amotify 0.1.31 → 0.1.32

package/dist/temps/designBook.js

@@ -1,14 +1,455 @@
-import{e as y}from"../chunk-VY3566IV.js";import{Fragment as d,jsx as e,jsxs as t}from"react/jsx-runtime";import S from"react";import{$$ as w,Config as G}from"../@utils/_";import{Box as o,Span as V,Grid as p,Flex as c,FAI as g,Img as T,Logo as l,Placeholder as U}from"../atoms/_";import{List as v,LinkifyText as Y,Accordion as H,Row as B,Column as h,Text as n}from"../mols/_";import{Layout as k,Table as b,Input as i,Button as r,Sheet as O,Snackbar as z,Tooltips as F,Loader as C,Effect as q,Cropper as J}from"../fn/_";const M={_:()=>t(d,{children:[e(M.DarkMode,{}),e(M.ThemeColor,{})]}),DarkMode:()=>t(B.Separate,{children:[e(o,{isSemiBoldFont:!0,fontSize:"4.thirdTitle",children:"Dark Mode"}),e(c,{gap:2,children:e(i.Segmented.Border,{value:G.get().darkMode,textAlign:"left",options:[{value:"light",label:"Light"},{value:"dark",label:"Dark"},{value:"dim",label:"Dim"},{value:"auto",label:"Auto"}],flexCenter:!0,onUpdateValidValue:({value:a})=>{let u=a[0];G.update.darkMode(u)}})})]}),ThemeColor:()=>{const a=x=>{G.update.themeColor(x)};let u=[];const s=["comun","leaf","heart","droplet","brick","flower","lip","wine","theater","bat","poizon","eggplant","ufo","alien","tombstone","ninja","moon","rain","unicorn","axe","gem","soap","drizzle","building","fish","icicles","water","tree1","tree2","tree3","battery","seedle","greenTea","oak","salad","cloudy","lemon","angel","parasol","pizza","thunder","latte","island","shovel","coffee","carrot","cactus","volcano","choco","industry","gun","galaxy","line","twitter","amazon","facebook","android","slackBlue","slackGreen","slackRed","slackYellow","slackBase","googleBlue","googleGreen","googleYellow","googleRed"];for(let x of s)u.push(e(r.Button.Prime.R,{padding:[1,1.5],fontColor:"white",borderRadius:"1.tone.primary",textAlign:"left",backgroundColor:x,onClick:()=>{a(x)},children:e(n.Supplement,{children:x.toCapital()})}));return t(B.Separate,{children:[e(n.SubTitle,{children:"ThemeColor"}),e(p,{gridCols:5,gap:"1/3",children:u})]})}},R={_:()=>t(d,{children:[t(c,{gap:1,flexChilds:"even",flexNewLine:!0,children:[e(o,{padding:2,ssCardBox:!0,flexCenter:!0,children:"Hello"}),e(o,{padding:2,ssCardBox:"border",flexCenter:!0,children:"Hello"}),e(o,{padding:2,ssCardBox:"cloud",flexCenter:!0,children:"Hello"})]}),t(c,{gap:1,children:[e(o,{flexCenter:!0,children:e(U,{unitWidth:6,unitHeight:6,children:"Placeholder",isRounded:!0})}),t(p,{gridCols:3,gap:1,flexSizing:"auto",children:[e(o,{backgroundColor:"1.layer.base",padding:2}),e(o,{backgroundColor:"2.layer.cloud",padding:2}),e(o,{backgroundColor:"3.layer.canvas",padding:2}),e(o,{backgroundColor:"4.layer.darken",padding:2}),e(o,{backgroundColor:"5.layer.darker",padding:2}),e(o,{backgroundColor:"6.layer.darkest",padding:2})]}),t(p,{gridCols:3,gap:"1/2",flexSizing:"auto",ssCardBox:!0,children:[e(o,{flexCenter:!0,fontColor:"1.clear",children:"FontColor1"}),e(o,{flexCenter:!0,fontColor:"2.normal",children:"FontColor2"}),e(o,{flexCenter:!0,fontColor:"3.blur",children:"FontColor3"}),e(o,{flexCenter:!0,fontColor:"4.thin",children:"FontColor4"}),e(o,{flexCenter:!0,fontColor:"5.translucent",children:"FontColor5"})]})]}),e(R.Fonts,{}),e(R.Box,{}),e(R.Flex,{}),e(R.Grid,{}),e(R.Others,{})]}),Fonts:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Font"}),t(o,{overflow:"auto",padding:1,children:[e(n.Description,{padding:1,children:`<Box
+import {
+  __async
+} from "../chunk-JJ3PEWPN.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import {
+  $$,
+  Config
+} from "../@utils/_";
+import {
+  Box,
+  Span,
+  Grid,
+  Flex,
+  FAI,
+  Img,
+  Logo,
+  Placeholder
+} from "../atoms/_";
+import {
+  List,
+  LinkifyText,
+  Accordion,
+  Row,
+  Column,
+  Text
+} from "../mols/_";
+import {
+  Layout,
+  Table,
+  Input,
+  Button,
+  Sheet,
+  Snackbar,
+  Tooltips,
+  Loader,
+  Effect,
+  Cropper
+} from "../fn/_";
+const Profiles = {
+  _: () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Profiles.DarkMode, {}),
+      /* @__PURE__ */ jsx(Profiles.ThemeColor, {})
+    ] });
+  },
+  DarkMode: () => {
+    return /* @__PURE__ */ jsxs(Row.Separate, { children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          isSemiBoldFont: true,
+          fontSize: "4.thirdTitle",
+          children: "Dark Mode"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Flex,
+        {
+          gap: 2,
+          children: /* @__PURE__ */ jsx(
+            Input.Segmented.Border,
+            {
+              value: Config.get().darkMode,
+              textAlign: "left",
+              options: [
+                { value: "light", label: "Light" },
+                { value: "dark", label: "Dark" },
+                { value: "dim", label: "Dim" },
+                { value: "auto", label: "Auto" }
+              ],
+              flexCenter: true,
+              onUpdateValidValue: ({ value }) => {
+                let Value = value[0];
+                Config.update.darkMode(Value);
+              }
+            }
+          )
+        }
+      )
+    ] });
+  },
+  ThemeColor: () => {
+    const ChangeColor = (value) => {
+      Config.update.themeColor(value);
+    };
+    let Colors = [];
+    const ColorList = [
+      "comun",
+      "leaf",
+      "heart",
+      "droplet",
+      "brick",
+      "flower",
+      "lip",
+      "wine",
+      "theater",
+      "bat",
+      "poizon",
+      "eggplant",
+      "ufo",
+      "alien",
+      "tombstone",
+      "ninja",
+      "moon",
+      "rain",
+      "unicorn",
+      "axe",
+      "gem",
+      "soap",
+      "drizzle",
+      "building",
+      "fish",
+      "icicles",
+      "water",
+      "tree1",
+      "tree2",
+      "tree3",
+      "battery",
+      "seedle",
+      "greenTea",
+      "oak",
+      "salad",
+      "cloudy",
+      "lemon",
+      "angel",
+      "parasol",
+      "pizza",
+      "thunder",
+      "latte",
+      "island",
+      "shovel",
+      "coffee",
+      "carrot",
+      "cactus",
+      "volcano",
+      "choco",
+      "industry",
+      "gun",
+      "galaxy",
+      "line",
+      "twitter",
+      "amazon",
+      "facebook",
+      "android",
+      "slackBlue",
+      "slackGreen",
+      "slackRed",
+      "slackYellow",
+      "slackBase",
+      "googleBlue",
+      "googleGreen",
+      "googleYellow",
+      "googleRed"
+    ];
+    for (let colorKey of ColorList) {
+      Colors.push(/* @__PURE__ */ jsx(
+        Button.Button.Prime.R,
+        {
+          padding: [1, 1.5],
+          fontColor: "white",
+          borderRadius: "1.tone.primary",
+          textAlign: "left",
+          backgroundColor: colorKey,
+          onClick: () => {
+            ChangeColor(colorKey);
+          },
+          children: /* @__PURE__ */ jsx(Text.Supplement, { children: colorKey.toCapital() })
+        }
+      ));
+    }
+    return /* @__PURE__ */ jsxs(Row.Separate, { children: [
+      /* @__PURE__ */ jsx(Text.SubTitle, { children: "ThemeColor" }),
+      /* @__PURE__ */ jsx(
+        Grid,
+        {
+          gridCols: 5,
+          gap: "1/3",
+          children: Colors
+        }
+      )
+    ] });
+  }
+};
+const Basic = {
+  _: () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          gap: 1,
+          flexChilds: "even",
+          flexNewLine: true,
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 2,
+                ssCardBox: true,
+                flexCenter: true,
+                children: "Hello"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 2,
+                ssCardBox: "border",
+                flexCenter: true,
+                children: "Hello"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 2,
+                ssCardBox: "cloud",
+                flexCenter: true,
+                children: "Hello"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          gap: 1,
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                flexCenter: true,
+                children: /* @__PURE__ */ jsx(
+                  Placeholder,
+                  {
+                    unitWidth: 6,
+                    unitHeight: 6,
+                    children: "Placeholder",
+                    isRounded: true
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Grid,
+              {
+                gridCols: 3,
+                gap: 1,
+                flexSizing: "auto",
+                children: [
+                  /* @__PURE__ */ jsx(Box, { backgroundColor: "1.layer.base", padding: 2 }),
+                  /* @__PURE__ */ jsx(Box, { backgroundColor: "2.layer.cloud", padding: 2 }),
+                  /* @__PURE__ */ jsx(Box, { backgroundColor: "3.layer.canvas", padding: 2 }),
+                  /* @__PURE__ */ jsx(Box, { backgroundColor: "4.layer.darken", padding: 2 }),
+                  /* @__PURE__ */ jsx(Box, { backgroundColor: "5.layer.darker", padding: 2 }),
+                  /* @__PURE__ */ jsx(Box, { backgroundColor: "6.layer.darkest", padding: 2 })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Grid,
+              {
+                gridCols: 3,
+                gap: "1/2",
+                flexSizing: "auto",
+                ssCardBox: true,
+                children: [
+                  /* @__PURE__ */ jsx(Box, { flexCenter: true, fontColor: "1.clear", children: "FontColor1" }),
+                  /* @__PURE__ */ jsx(Box, { flexCenter: true, fontColor: "2.normal", children: "FontColor2" }),
+                  /* @__PURE__ */ jsx(Box, { flexCenter: true, fontColor: "3.blur", children: "FontColor3" }),
+                  /* @__PURE__ */ jsx(Box, { flexCenter: true, fontColor: "4.thin", children: "FontColor4" }),
+                  /* @__PURE__ */ jsx(Box, { flexCenter: true, fontColor: "5.translucent", children: "FontColor5" })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Basic.Fonts, {}),
+      /* @__PURE__ */ jsx(Basic.Box, {}),
+      /* @__PURE__ */ jsx(Basic.Flex, {}),
+      /* @__PURE__ */ jsx(Basic.Grid, {}),
+      /* @__PURE__ */ jsx(Basic.Others, {})
+    ] });
+  },
+  Fonts: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Font"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          overflow: "auto",
+          padding: 1,
+          children: [
+            /* @__PURE__ */ jsx(
+              Text.Description,
+              {
+                padding: 1,
+                children: `<Box
   fontSize={ 0 ~ 8 }
 >
   some text
-</Box>`}),e(v,{rowStyles:{flexType:"col",borderBottom:!0,padding:1,flexWrap:!1,gap:"1/2"},rows:[{children:t(d,{children:["\u30FB Landing",t(o,{fontSize:"7.landing",isSemiBoldFont:!0,children:["Visualize Your ",e(V,{fontColor:"theme",children:"Colors"})," On a Real Website"]})]})},{children:t(d,{children:["\u30FB Title",e(o,{fontSize:"6.title",children:"\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u56FD\u6C11\u8CA0\u62C5\u7387\u3092\u516C\u8868\u3057\u307E\u3059"})]})},{children:t(d,{children:["\u30FB SubTitle",e(o,{fontSize:"5.subTitle",children:"\u652F\u6255\u3044\u3092\u53D7\u3051\u4ED8\u3051\u308B"})]})},{children:t(d,{children:["\u30FB ThirdTitle",e(o,{fontSize:"4.thirdTitle",children:"\u79DF\u7A0E\u8CA0\u62C5\u7387\u3068\u793E\u4F1A\u4FDD\u969C\u8CA0\u62C5\u7387\u3092\u5408\u8A08\u3057\u305F\u56FD\u6C11\u8CA0\u62C5\u7387\u306B\u3064\u3044\u3066\u3001\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u898B\u901A\u3057\u3092\u63A8\u8A08\u3057\u307E\u3057\u305F\u306E\u3067\u3001\u516C\u8868\u3057\u307E\u3059\u3002"})]})},{children:t(d,{children:["\u30FB Paragraph",e(n.Description,{fontSize:"3.paragraph",children:e(Y,{text:`
+</Box>`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              List,
+              {
+                rowStyles: {
+                  flexType: "col",
+                  borderBottom: true,
+                  padding: 1,
+                  flexWrap: false,
+                  gap: "1/2"
+                },
+                rows: [
+                  {
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\u30FB Landing",
+                      /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          fontSize: "7.landing",
+                          isSemiBoldFont: true,
+                          children: [
+                            "Visualize Your ",
+                            /* @__PURE__ */ jsx(
+                              Span,
+                              {
+                                fontColor: "theme",
+                                children: "Colors"
+                              }
+                            ),
+                            " On a Real Website"
+                          ]
+                        }
+                      )
+                    ] })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\u30FB Title",
+                      /* @__PURE__ */ jsx(Box, { fontSize: "6.title", children: "\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u56FD\u6C11\u8CA0\u62C5\u7387\u3092\u516C\u8868\u3057\u307E\u3059" })
+                    ] })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\u30FB SubTitle",
+                      /* @__PURE__ */ jsx(Box, { fontSize: "5.subTitle", children: "\u652F\u6255\u3044\u3092\u53D7\u3051\u4ED8\u3051\u308B" })
+                    ] })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\u30FB ThirdTitle",
+                      /* @__PURE__ */ jsx(Box, { fontSize: "4.thirdTitle", children: "\u79DF\u7A0E\u8CA0\u62C5\u7387\u3068\u793E\u4F1A\u4FDD\u969C\u8CA0\u62C5\u7387\u3092\u5408\u8A08\u3057\u305F\u56FD\u6C11\u8CA0\u62C5\u7387\u306B\u3064\u3044\u3066\u3001\u4EE4\u548C\uFF14\u5E74\u5EA6\u306E\u898B\u901A\u3057\u3092\u63A8\u8A08\u3057\u307E\u3057\u305F\u306E\u3067\u3001\u516C\u8868\u3057\u307E\u3059\u3002" })
+                    ] })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\u30FB Paragraph",
+                      /* @__PURE__ */ jsx(
+                        Text.Description,
+                        {
+                          fontSize: "3.paragraph",
+                          children: /* @__PURE__ */ jsx(
+                            LinkifyText,
+                            {
+                              text: `
 This article discusses performance best practices for fonts.
-There are a variety of ways in which web fonts impact performance:https://google.com`})})]})},{children:t(d,{children:["\u30FB Normal",e(o,{fontSize:"2.normal",children:"\u52B9\u7387\u7684\u3067\u6301\u7D9A\u53EF\u80FD\u306A\u8CA1\u653F\u3078\u306E\u8EE2\u63DB\u3092\u56F3\u308A\u3001\u3053\u306E\u8CA1\u653F\u69CB\u9020\u3092\u5404\u822C\u306E\u69CB\u9020\u6539\u9769\u3068\u3068\u3082\u306B\u63A8\u9032\u3059\u308B\u3053\u3068\u3067\u3001\u6C11\u9593\u9700\u8981\u4E3B\u5C0E\u306E\u6301\u7D9A\u7684\u7D4C\u6E08\u6210\u9577\u306E\u5B9F\u73FE\u3092\u76EE\u6307\u3057\u307E\u3059\u3002 \u5C11\u5B50\u30FB\u9AD8\u9F62\u5316\u3001\u56FD\u969B\u5316\u306A\u3069\u7D4C\u6E08\u793E\u4F1A\u306E\u69CB\u9020\u5909\u5316\u306B\u5BFE\u5FDC\u3067\u304D\u308B21\u4E16\u7D00\u306E\u3042\u308B\u3079\u304D\u7A0E\u5236\u3092\u304D\u305A\u304D\u307E\u3059\u3002 \u8CA1\u653F\u6295\u878D\u8CC7\u306F\u3001\u884C\u8CA1\u653F\u6539\u9769\u306E\u8DA3\u65E8\u3092\u8E0F\u307E\u3048\u3001\u6C11\u9593\u3067\u306F\u3067\u304D\u306A\u3044\u5206\u91CE\u30FB\u4E8B\u696D\u306A\u3069\u306B\u91CD\u70B9\u5316\u3092\u884C\u3044\u3001\u771F\u306B\u653F\u7B56\u7684\u306B\u5FC5\u8981\u306A\u8CC7\u91D1\u9700\u8981\u306B\u306F\u7684\u78BA\u306B\u5BFE\u5FDC\u3057\u307E\u3059\u3002 \u91D1\u878D\u5E81\u3068\u5354\u529B\u3057\u3001\u91D1\u878D\u306E\u30BB\u30FC\u30D5\u30C6\u30A3\u30CD\u30C3\u30C8\u3092\u6574\u5099\u3057\u3001\u91D1\u878D\u5371\u6A5F\u306B\u7D20\u65E9\u304F\u5BFE\u5FDC\u3059\u308B\u306A\u3069\u3001\u91D1\u878D\u30B7\u30B9\u30C6\u30E0\u306E\u5B89\u5B9A\u306E\u78BA\u4FDD\u3092\u76EE\u6307\u3057\u307E\u3059\u3002 \u56FD\u969B\u7684\u306A\u5354\u529B\u7B49\u306B\u7A4D\u6975\u7684\u306B\u53D6\u308A\u7D44\u3080\u3053\u3068\u306B\u3088\u308A\u3001\u56FD\u969B\u901A\u8CA8\u30B7\u30B9\u30C6\u30E0\u306E\u5B89\u5B9A\u30FB\u56FD\u969B\u8CBF\u6613\u306E\u79E9\u5E8F\u3042\u308B\u767A\u5C55\u3092\u76EE\u6307\u3057\u307E\u3059\u3002"})]})},{children:t(d,{children:["\u30FB Mini",e(o,{fontSize:"1.mini",children:"Copyright \xA9 Ministry of Finance Japan. All Rights Reserved."})]})}]})]})]}),Box:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Box"}),e(o,{padding:1,overflow:"auto",children:e(b.Normal,{ssCardBox:!1,tone:"cellBorder",borderRadius:0,height:1,colLength:2,head:!1,rows:[[{children:e(n.Description,{children:`<Box>
+There are a variety of ways in which web fonts impact performance:https://google.com`
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\u30FB Normal",
+                      /* @__PURE__ */ jsx(Box, { fontSize: "2.normal", children: "\u52B9\u7387\u7684\u3067\u6301\u7D9A\u53EF\u80FD\u306A\u8CA1\u653F\u3078\u306E\u8EE2\u63DB\u3092\u56F3\u308A\u3001\u3053\u306E\u8CA1\u653F\u69CB\u9020\u3092\u5404\u822C\u306E\u69CB\u9020\u6539\u9769\u3068\u3068\u3082\u306B\u63A8\u9032\u3059\u308B\u3053\u3068\u3067\u3001\u6C11\u9593\u9700\u8981\u4E3B\u5C0E\u306E\u6301\u7D9A\u7684\u7D4C\u6E08\u6210\u9577\u306E\u5B9F\u73FE\u3092\u76EE\u6307\u3057\u307E\u3059\u3002 \u5C11\u5B50\u30FB\u9AD8\u9F62\u5316\u3001\u56FD\u969B\u5316\u306A\u3069\u7D4C\u6E08\u793E\u4F1A\u306E\u69CB\u9020\u5909\u5316\u306B\u5BFE\u5FDC\u3067\u304D\u308B21\u4E16\u7D00\u306E\u3042\u308B\u3079\u304D\u7A0E\u5236\u3092\u304D\u305A\u304D\u307E\u3059\u3002 \u8CA1\u653F\u6295\u878D\u8CC7\u306F\u3001\u884C\u8CA1\u653F\u6539\u9769\u306E\u8DA3\u65E8\u3092\u8E0F\u307E\u3048\u3001\u6C11\u9593\u3067\u306F\u3067\u304D\u306A\u3044\u5206\u91CE\u30FB\u4E8B\u696D\u306A\u3069\u306B\u91CD\u70B9\u5316\u3092\u884C\u3044\u3001\u771F\u306B\u653F\u7B56\u7684\u306B\u5FC5\u8981\u306A\u8CC7\u91D1\u9700\u8981\u306B\u306F\u7684\u78BA\u306B\u5BFE\u5FDC\u3057\u307E\u3059\u3002 \u91D1\u878D\u5E81\u3068\u5354\u529B\u3057\u3001\u91D1\u878D\u306E\u30BB\u30FC\u30D5\u30C6\u30A3\u30CD\u30C3\u30C8\u3092\u6574\u5099\u3057\u3001\u91D1\u878D\u5371\u6A5F\u306B\u7D20\u65E9\u304F\u5BFE\u5FDC\u3059\u308B\u306A\u3069\u3001\u91D1\u878D\u30B7\u30B9\u30C6\u30E0\u306E\u5B89\u5B9A\u306E\u78BA\u4FDD\u3092\u76EE\u6307\u3057\u307E\u3059\u3002 \u56FD\u969B\u7684\u306A\u5354\u529B\u7B49\u306B\u7A4D\u6975\u7684\u306B\u53D6\u308A\u7D44\u3080\u3053\u3068\u306B\u3088\u308A\u3001\u56FD\u969B\u901A\u8CA8\u30B7\u30B9\u30C6\u30E0\u306E\u5B89\u5B9A\u30FB\u56FD\u969B\u8CBF\u6613\u306E\u79E9\u5E8F\u3042\u308B\u767A\u5C55\u3092\u76EE\u6307\u3057\u307E\u3059\u3002" })
+                    ] })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\u30FB Mini",
+                      /* @__PURE__ */ jsx(Box, { fontSize: "1.mini", children: "Copyright \xA9 Ministry of Finance Japan. All Rights Reserved." })
+                    ] })
+                  }
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  },
+  Box: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Box"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsx(
+            Table.Normal,
+            {
+              ssCardBox: false,
+              tone: "cellBorder",
+              borderRadius: 0,
+              height: 1,
+              colLength: 2,
+              head: false,
+              rows: [
+                [
+                  {
+                    children: /* @__PURE__ */ jsx(Text.Description, { children: `<Box>
 helloWorld!!
-</Box>`})},{children:e(o,{children:" helloWorld!! "})}],[{children:e(n.Description,{children:`<Box
+</Box>` })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsx(Box, { children: " helloWorld!! " })
+                  }
+                ],
+                [
+                  {
+                    children: /* @__PURE__ */ jsx(Text.Description, { children: `<Box
 children={ 'helloWorld!!' }
-/>`})},{children:e(o,{children:"helloWorld!!"})}],[{children:e(n.Description,{children:`<Box
+/>` })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsx(Box, { children: "helloWorld!!" })
+                  }
+                ],
+                [
+                  {
+                    children: /* @__PURE__ */ jsx(Text.Description, { children: `<Box
 fontColor={ '4.thin' }
 padding={ 1 }
 margin={ 1 }
@@ -17,29 +458,426 @@ borderRadius={ 2 }
 border={ 'normal' }
 children={ 'styleBox' }
 />
-`})},{children:e(o,{fontColor:"4.thin",padding:1,margin:1,textAlign:"center",borderRadius:2,border:!0,children:"styleBox"})}]]})})]}),Flex:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Flex"}),e(o,{padding:1,overflow:"auto",children:e(b.Normal,{ssCardBox:!1,colLength:2,tone:"cellBorder",borderRadius:0,height:1,head:!1,rows:[[{children:e(n.Description,{children:`<Flex flexType='row' gap={ 1 }>
+` })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        fontColor: "4.thin",
+                        padding: 1,
+                        margin: 1,
+                        textAlign: "center",
+                        borderRadius: 2,
+                        border: true,
+                        children: "styleBox"
+                      }
+                    )
+                  }
+                ]
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  },
+  Flex: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Flex"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsx(
+            Table.Normal,
+            {
+              ssCardBox: false,
+              colLength: 2,
+              tone: "cellBorder",
+              borderRadius: 0,
+              height: 1,
+              head: false,
+              rows: [
+                [
+                  {
+                    children: /* @__PURE__ */ jsx(Text.Description, { children: `<Flex flexType='row' gap={ 1 }>
 <Box children={ 'FlexBox1' } />
 <Box children={ 'FlexBox2' } />
 <Box children={ 'FlexBox3' } />
-</Flex>`})},{children:t(c,{flexType:"row",gap:1,fontColor:"theme",children:[e(o,{padding:1,borderRadius:1,flexCenter:!0,children:"FlexBox1",backgroundColor:"tcOpLow"}),e(o,{padding:1,borderRadius:1,flexCenter:!0,children:"FlexBox2",backgroundColor:"tcOpMiddle"}),e(o,{padding:1,borderRadius:1,flexCenter:!0,children:"FlexBox3",backgroundColor:"tcOpHigh"})]})}],[{children:e(n.Description,{textAlign:"left",children:`<Flex
+</Flex>` })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(
+                      Flex,
+                      {
+                        flexType: "row",
+                        gap: 1,
+                        fontColor: "theme",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              padding: 1,
+                              borderRadius: 1,
+                              flexCenter: true,
+                              children: "FlexBox1",
+                              backgroundColor: "tcOpLow"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              padding: 1,
+                              borderRadius: 1,
+                              flexCenter: true,
+                              children: "FlexBox2",
+                              backgroundColor: "tcOpMiddle"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              padding: 1,
+                              borderRadius: 1,
+                              flexCenter: true,
+                              children: "FlexBox3",
+                              backgroundColor: "tcOpHigh"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                ],
+                [
+                  {
+                    children: /* @__PURE__ */ jsx(Text.Description, { textAlign: "left", children: `<Flex
 flexType='col'
 flexChilds={ 'auto' }
 >
 <Box />
 <Box />
 ...
-</Flex>`})},{children:t(d,{children:[t(c,{gap:1,flexCenter:!0,children:[e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcLightest"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcLighter"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcLighten"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"theme"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcDarken"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcDarker"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"tcDarkest"})]}),t(c,{gap:1,flexCenter:!0,children:[e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"1.layer.base"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"2.layer.cloud"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"3.layer.canvas"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"4.layer.darken"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"5.layer.darker"}),e(o,{flexCenter:!0,unitWidth:3,unitHeight:3,isRounded:!0,boxShadow:"0.normal",backgroundColor:"6.layer.darkest"})]})]})}],[{children:e(n.Description,{children:`<Flex gap={ 1 }>
+</Flex>` })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(
+                        Flex,
+                        {
+                          gap: 1,
+                          flexCenter: true,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "tcLightest"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "tcLighter"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "tcLighten"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "theme"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "tcDarken"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "tcDarker"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "tcDarkest"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        Flex,
+                        {
+                          gap: 1,
+                          flexCenter: true,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "1.layer.base"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "2.layer.cloud"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "3.layer.canvas"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "4.layer.darken"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "5.layer.darker"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                flexCenter: true,
+                                unitWidth: 3,
+                                unitHeight: 3,
+                                isRounded: true,
+                                boxShadow: "0.normal",
+                                backgroundColor: "6.layer.darkest"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] })
+                  }
+                ],
+                [
+                  {
+                    children: /* @__PURE__ */ jsx(Text.Description, { children: `<Flex gap={ 1 }>
 <Box flexGrid={ 2 } ... />
 <Box flexGrid={ 3 } ... />
 <Box flexGrid={ 4 } ... />
-</Flex>`})},{children:t(c,{gap:1,fontColor:"white",children:[e(o,{padding:1,flexCenter:!0,borderRadius:1,backgroundColor:"posi",flexGrid:2,children:"Box1"}),e(o,{padding:1,flexCenter:!0,borderRadius:1,backgroundColor:"nega",flexGrid:3,children:"Box2"}),e(o,{padding:1,flexCenter:!0,borderRadius:1,backgroundColor:"warn",flexGrid:4,children:"Box3"})]})}]]})})]}),Grid:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Grid"}),e(o,{padding:1,overflow:"auto",children:e(b.Normal,{ssCardBox:!1,colLength:2,tone:"cellBorder",height:1,backgroundColor:"nega",borderRadius:0,head:!1,rows:[[{children:e(n.Description,{children:`<Grid gridCols={ 3 } gap={ 1 }>
+</Flex>` })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(
+                      Flex,
+                      {
+                        gap: 1,
+                        fontColor: "white",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              padding: 1,
+                              flexCenter: true,
+                              borderRadius: 1,
+                              backgroundColor: "posi",
+                              flexGrid: 2,
+                              children: "Box1"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              padding: 1,
+                              flexCenter: true,
+                              borderRadius: 1,
+                              backgroundColor: "nega",
+                              flexGrid: 3,
+                              children: "Box2"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              padding: 1,
+                              flexCenter: true,
+                              borderRadius: 1,
+                              backgroundColor: "warn",
+                              flexGrid: 4,
+                              children: "Box3"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                ]
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  },
+  Grid: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Grid"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsx(
+            Table.Normal,
+            {
+              ssCardBox: false,
+              colLength: 2,
+              tone: "cellBorder",
+              height: 1,
+              backgroundColor: "nega",
+              borderRadius: 0,
+              head: false,
+              rows: [
+                [
+                  {
+                    children: /* @__PURE__ */ jsx(Text.Description, { children: `<Grid gridCols={ 3 } gap={ 1 }>
 <Box children={ 'GridBox1' } />
 <Box children={ 'GridBox2' } />
 <Box children={ 'GridBox3' } />
 <Box children={ 'GridBox4' } />
 <Box children={ 'GridBox5' } />
 <Box children={ 'GridBox6' } />
-</Grid>`})},{children:t(p,{gridCols:3,gap:1,children:[e(o,{border:!0,padding:1,backgroundColor:"1.layer.base",children:"GridBox1"}),e(o,{border:!0,padding:1,backgroundColor:"2.layer.cloud",children:"GridBox2"}),e(o,{border:!0,padding:1,backgroundColor:"3.layer.canvas",children:"GridBox3"}),e(o,{border:!0,padding:1,backgroundColor:"4.layer.darken",children:"GridBox4"}),e(o,{border:!0,padding:1,backgroundColor:"5.layer.darker",children:"GridBox5"}),e(o,{border:!0,padding:1,backgroundColor:"6.layer.darkest",children:"GridBox6"})]})}]]})})]}),Others:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Others"}),e(o,{padding:1,overflow:"auto",children:e(b.Normal,{ssCardBox:!1,colLength:2,tone:"cellBorder",height:1,borderRadius:0,head:!1,rows:[[{children:e(d,{children:e(n.Description,{children:`
+</Grid>` })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(Grid, { gridCols: 3, gap: 1, children: [
+                      /* @__PURE__ */ jsx(Box, { border: true, padding: 1, backgroundColor: "1.layer.base", children: "GridBox1" }),
+                      /* @__PURE__ */ jsx(Box, { border: true, padding: 1, backgroundColor: "2.layer.cloud", children: "GridBox2" }),
+                      /* @__PURE__ */ jsx(Box, { border: true, padding: 1, backgroundColor: "3.layer.canvas", children: "GridBox3" }),
+                      /* @__PURE__ */ jsx(Box, { border: true, padding: 1, backgroundColor: "4.layer.darken", children: "GridBox4" }),
+                      /* @__PURE__ */ jsx(Box, { border: true, padding: 1, backgroundColor: "5.layer.darker", children: "GridBox5" }),
+                      /* @__PURE__ */ jsx(Box, { border: true, padding: 1, backgroundColor: "6.layer.darkest", children: "GridBox6" })
+                    ] })
+                  }
+                ]
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  },
+  Others: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Others"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsx(
+            Table.Normal,
+            {
+              ssCardBox: false,
+              colLength: 2,
+              tone: "cellBorder",
+              height: 1,
+              borderRadius: 0,
+              head: false,
+              rows: [
+                [
+                  {
+                    children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Text.Description, { children: `
 <Button.Label
 htmlFor='testAccordion'
 type='sub'
@@ -53,27 +891,2068 @@ children={
     in Accordion Element
   </>
 }
-/>`})})},{children:t(d,{children:[e(r.Label.Sub.R,{children:"ToggleButton",onClick:()=>{H.fn.toggle("testAccordion")}}),e(H,{accordionID:"testAccordion",defaultOpen:!0,children:"in Accordion Element"})]})}],[{children:e(n.Description,{children:`
+/>` }) })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        Button.Label.Sub.R,
+                        {
+                          children: "ToggleButton",
+                          onClick: () => {
+                            Accordion.fn.toggle("testAccordion");
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Accordion,
+                        {
+                          accordionID: "testAccordion",
+                          defaultOpen: true,
+                          children: "in Accordion Element"
+                        }
+                      )
+                    ] })
+                  }
+                ],
+                [
+                  {
+                    children: /* @__PURE__ */ jsx(Text.Description, { children: `
 <Img
 maxheight={ 8 }
 maxWidth={ 8 }
 src='...'
 alt='noImage'
 />
-                        `})},{children:e(T,{src:l.Images.defaultIcon("user"),alt:"noImage",freeCSS:{maxHeight:12*8,maxWidth:12*8}})}]]})})]})},f={_:()=>t(d,{children:[e(f.Comun,{}),e(f.Mingoo,{}),e(f.Google,{}),e(f.Facebook,{}),e(f.Line,{}),e(f.Twitter,{})]}),Comun:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Comun"}),e(o,{padding:1,overflow:"auto",children:t(h,{padding:2,children:[t(B.Left,{gap:2,children:[e(l.Brands.ComunIcon,{size:"S"}),e(l.Brands.ComunIcon,{size:"R"}),e(l.Brands.ComunIcon,{size:"L"}),e(l.Brands.ComunIcon,{size:"2L"}),e(l.Brands.ComunIcon,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunTitle,{size:"S"}),e(l.Brands.ComunTitle,{size:"R"}),e(l.Brands.ComunTitle,{size:"L"}),e(l.Brands.ComunTitle,{size:"2L"}),e(l.Brands.ComunTitle,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunLogoH,{size:"S"}),e(l.Brands.ComunLogoH,{size:"R"}),e(l.Brands.ComunLogoH,{size:"L"}),e(l.Brands.ComunLogoH,{size:"2L"}),e(l.Brands.ComunLogoH,{size:"3L"})]}),t(B.Left,{gap:2,children:[e(l.Brands.ComunLogoV,{size:"S"}),e(l.Brands.ComunLogoV,{size:"R"}),e(l.Brands.ComunLogoV,{size:"L"}),e(l.Brands.ComunLogoV,{size:"2L"}),e(l.Brands.ComunLogoV,{size:"3L"})]})]})})]}),Mingoo:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Mingoo"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.MingooIcon,{size:"S"}),e(l.Brands.MingooIcon,{size:"R"}),e(l.Brands.MingooIcon,{size:"L"}),e(l.Brands.MingooIcon,{size:"2L"}),e(l.Brands.MingooIcon,{size:"3L"})]})})]}),Google:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Google"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Google,{size:"S"}),e(l.Brands.Google,{size:"R"}),e(l.Brands.Google,{size:"L"}),e(l.Brands.Google,{size:"2L"}),e(l.Brands.Google,{size:"3L"})]})})]}),Facebook:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Facebook"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Facebook,{size:"S"}),e(l.Brands.Facebook,{size:"R"}),e(l.Brands.Facebook,{size:"L"}),e(l.Brands.Facebook,{size:"2L"}),e(l.Brands.Facebook,{size:"3L"})]})})]}),Line:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"LINE"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.LINE,{size:"S"}),e(l.Brands.LINE,{size:"R"}),e(l.Brands.LINE,{size:"L"}),e(l.Brands.LINE,{size:"2L"}),e(l.Brands.LINE,{size:"3L"})]})})]}),Twitter:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Twitter"}),e(o,{padding:1,overflow:"auto",children:t(B.Center,{flexType:"col",gap:2,padding:2,children:[e(l.Brands.Twitter,{size:"S"}),e(l.Brands.Twitter,{size:"R"}),e(l.Brands.Twitter,{size:"L"}),e(l.Brands.Twitter,{size:"2L"}),e(l.Brands.Twitter,{size:"3L"})]})})]})},L={_:()=>t(d,{children:[e(L.Ripple,{}),e(L.Variables,{}),e(L.Tooltips,{}),e(L.Snackbar,{})]}),Ripple:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Ripple"}),t(h,{padding:2,children:[e(n.Description,{children:`<Element
+                        ` })
+                  },
+                  {
+                    children: /* @__PURE__ */ jsx(
+                      Img,
+                      {
+                        src: Logo.Images.defaultIcon("user"),
+                        alt: "noImage",
+                        freeCSS: {
+                          maxHeight: 12 * 8,
+                          maxWidth: 12 * 8
+                        }
+                      }
+                    )
+                  }
+                ]
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+};
+const Logos = {
+  _: () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Logos.Comun, {}),
+      /* @__PURE__ */ jsx(Logos.Mingoo, {}),
+      /* @__PURE__ */ jsx(Logos.Google, {}),
+      /* @__PURE__ */ jsx(Logos.Facebook, {}),
+      /* @__PURE__ */ jsx(Logos.Line, {}),
+      /* @__PURE__ */ jsx(Logos.Twitter, {})
+    ] });
+  },
+  Comun: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Comun"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsxs(
+            Column,
+            {
+              padding: 2,
+              children: [
+                /* @__PURE__ */ jsxs(Row.Left, { gap: 2, children: [
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunIcon, { size: "S" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunIcon, { size: "R" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunIcon, { size: "L" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunIcon, { size: "2L" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunIcon, { size: "3L" })
+                ] }),
+                /* @__PURE__ */ jsxs(Row.Left, { gap: 2, children: [
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunTitle, { size: "S" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunTitle, { size: "R" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunTitle, { size: "L" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunTitle, { size: "2L" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunTitle, { size: "3L" })
+                ] }),
+                /* @__PURE__ */ jsxs(Row.Left, { gap: 2, children: [
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunLogoH, { size: "S" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunLogoH, { size: "R" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunLogoH, { size: "L" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunLogoH, { size: "2L" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunLogoH, { size: "3L" })
+                ] }),
+                /* @__PURE__ */ jsxs(Row.Left, { gap: 2, children: [
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunLogoV, { size: "S" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunLogoV, { size: "R" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunLogoV, { size: "L" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunLogoV, { size: "2L" }),
+                  /* @__PURE__ */ jsx(Logo.Brands.ComunLogoV, { size: "3L" })
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  },
+  Mingoo: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Mingoo"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsxs(
+            Row.Center,
+            {
+              flexType: "col",
+              gap: 2,
+              padding: 2,
+              children: [
+                /* @__PURE__ */ jsx(Logo.Brands.MingooIcon, { size: "S" }),
+                /* @__PURE__ */ jsx(Logo.Brands.MingooIcon, { size: "R" }),
+                /* @__PURE__ */ jsx(Logo.Brands.MingooIcon, { size: "L" }),
+                /* @__PURE__ */ jsx(Logo.Brands.MingooIcon, { size: "2L" }),
+                /* @__PURE__ */ jsx(Logo.Brands.MingooIcon, { size: "3L" })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  },
+  Google: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Google"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsxs(
+            Row.Center,
+            {
+              flexType: "col",
+              gap: 2,
+              padding: 2,
+              children: [
+                /* @__PURE__ */ jsx(Logo.Brands.Google, { size: "S" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Google, { size: "R" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Google, { size: "L" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Google, { size: "2L" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Google, { size: "3L" })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  },
+  Facebook: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Facebook"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsxs(
+            Row.Center,
+            {
+              flexType: "col",
+              gap: 2,
+              padding: 2,
+              children: [
+                /* @__PURE__ */ jsx(Logo.Brands.Facebook, { size: "S" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Facebook, { size: "R" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Facebook, { size: "L" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Facebook, { size: "2L" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Facebook, { size: "3L" })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  },
+  Line: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "LINE"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsxs(
+            Row.Center,
+            {
+              flexType: "col",
+              gap: 2,
+              padding: 2,
+              children: [
+                /* @__PURE__ */ jsx(Logo.Brands.LINE, { size: "S" }),
+                /* @__PURE__ */ jsx(Logo.Brands.LINE, { size: "R" }),
+                /* @__PURE__ */ jsx(Logo.Brands.LINE, { size: "L" }),
+                /* @__PURE__ */ jsx(Logo.Brands.LINE, { size: "2L" }),
+                /* @__PURE__ */ jsx(Logo.Brands.LINE, { size: "3L" })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  },
+  Twitter: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Twitter"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsxs(
+            Row.Center,
+            {
+              flexType: "col",
+              gap: 2,
+              padding: 2,
+              children: [
+                /* @__PURE__ */ jsx(Logo.Brands.Twitter, { size: "S" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Twitter, { size: "R" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Twitter, { size: "L" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Twitter, { size: "2L" }),
+                /* @__PURE__ */ jsx(Logo.Brands.Twitter, { size: "3L" })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+};
+const Effections = {
+  _: () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Effections.Ripple, {}),
+      /* @__PURE__ */ jsx(Effections.Variables, {}),
+      /* @__PURE__ */ jsx(Effections.Tooltips, {}),
+      /* @__PURE__ */ jsx(Effections.Snackbar, {})
+    ] });
+  },
+  Ripple: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Ripple"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Column,
+        {
+          padding: 2,
+          children: [
+            /* @__PURE__ */ jsx(Text.Description, { children: `<Element
   ssEffectsOnActive={ 'ripple.( cloud | theme | nega | posi | warn )' }
-/>`}),t(B.Center,{children:[e(r.Button.Prime.R,{ssEffectsOnActive:["ripple.white"],children:"White"}),e(r.Button.Border.R,{ssEffectsOnActive:["ripple.cloud"],children:"Cloud"}),e(r.Button.Border.R,{children:"Theme",ssEffectsOnActive:["ripple.theme"]})]})]})]}),Variables:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Effects"}),t(h,{padding:2,children:[e(n.Description,{children:`<Button
+/>` }),
+            /* @__PURE__ */ jsxs(Row.Center, { children: [
+              /* @__PURE__ */ jsx(
+                Button.Button.Prime.R,
+                {
+                  ssEffectsOnActive: ["ripple.white"],
+                  children: "White"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button.Button.Border.R,
+                {
+                  ssEffectsOnActive: ["ripple.cloud"],
+                  children: "Cloud"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button.Button.Border.R,
+                {
+                  children: "Theme",
+                  ssEffectsOnActive: ["ripple.theme"]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] });
+  },
+  Variables: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Effects"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Column,
+        {
+          padding: 2,
+          children: [
+            /* @__PURE__ */ jsx(Text.Description, { children: `<Button
     ssEffectsOnActive={ 'shrink' }
-/>`}),e(B.Left,{children:e(r.Button.Prime.R,{onClick:()=>{C.fn.mini.active("testLoadingKey"),setTimeout(()=>{C.fn.stopALL()},5e3)},children:t(B.Center,{gap:0,children:[e(C.White.S,{loaderID:"testLoadingKey",marginRight:1}),e(o,{textAlign:"left",children:"Launch Mini Loader"})]})})}),t(B.Left,{children:[e(r.Button.Border.R,{children:"Shrink",ssEffectsOnActive:"shrink"}),e(r.Button.Border.R,{children:"Pudding",ssEffectsOnActive:"pudding"}),e(r.Button.Border.R,{children:"Expand",ssEffectsOnActive:"expand"}),e(r.Button.Border.R,{children:"corner Loader",onClick:()=>{C.fn.corner.active(),setTimeout(()=>{C.fn.corner.stop()},3e3)}}),e(r.Button.Border.R,{children:"top Loader",onClick:()=>{C.fn.top.active(),setTimeout(()=>{C.fn.top.stop()},7e3)}})]})]})]}),Tooltips:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"ToolTips"}),e(p,{gridCols:5,gap:1,padding:2,children:Array.from({length:25}).map((a,u)=>t(r.Button.Border.R,{padding:2,onMouseOver:s=>{let x=w.uuid.gen();F.open({tipsID:"tips-"+(u+1)+"---"+x,parent:s.currentTarget,gravityPoint:u+1,padding:0,content:e(F.Comps.Body,{children:u},u)})},children:["GravityPoint",u+1]}))})]}),Snackbar:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Snackbars"}),t(B.Center,{padding:2,children:[e(r.Button.Prime.R,{onClick:()=>{z.add({children:"hello World!!"})},children:"Add Normal Snackbar"}),e(r.Button.Prime.R,{onClick:()=>{z.add({secondsToClose:30,children:t(B.Separate,{verticalAlign:"baseline",paddingLeft:"2/3",children:["\u4E88\u7D04\u6642\u9593\u304C\u66F4\u65B0\u3055\u308C\u307E\u3057\u305F",e(r.Button.Clear.S,{color:"white",fontColor:"posi",children:"\u5143\u306B\u623B\u3059"})]})})},children:"Notices"}),e(r.Button.Prime.R,{onClick:()=>{let a=w.uuid.gen();z.add({snackID:a,children:t(h,{padding:1,children:[t(B.Left,{verticalAlign:"top",children:[e(T,{src:l.Images.defaultIcon("user"),ssSphere:4}),e(n.Description,{children:`Some Text
+/>` }),
+            /* @__PURE__ */ jsx(Row.Left, { children: /* @__PURE__ */ jsx(
+              Button.Button.Prime.R,
+              {
+                onClick: () => {
+                  Loader.fn.mini.active("testLoadingKey");
+                  setTimeout(() => {
+                    Loader.fn.stopALL();
+                  }, 5e3);
+                },
+                children: /* @__PURE__ */ jsxs(
+                  Row.Center,
+                  {
+                    gap: 0,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Loader.White.S,
+                        {
+                          loaderID: "testLoadingKey",
+                          marginRight: 1
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          textAlign: "left",
+                          children: "Launch Mini Loader"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(Row.Left, { children: [
+              /* @__PURE__ */ jsx(
+                Button.Button.Border.R,
+                {
+                  children: "Shrink",
+                  ssEffectsOnActive: "shrink"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button.Button.Border.R,
+                {
+                  children: "Pudding",
+                  ssEffectsOnActive: "pudding"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button.Button.Border.R,
+                {
+                  children: "Expand",
+                  ssEffectsOnActive: "expand"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button.Button.Border.R,
+                {
+                  children: "corner Loader",
+                  onClick: () => {
+                    Loader.fn.corner.active();
+                    setTimeout(() => {
+                      Loader.fn.corner.stop();
+                    }, 3e3);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button.Button.Border.R,
+                {
+                  children: "top Loader",
+                  onClick: () => {
+                    Loader.fn.top.active();
+                    setTimeout(() => {
+                      Loader.fn.top.stop();
+                    }, 7e3);
+                  }
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] });
+  },
+  Tooltips: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "ToolTips"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Grid,
+        {
+          gridCols: 5,
+          gap: 1,
+          padding: 2,
+          children: Array.from({ length: 25 }).map((a, index) => {
+            return /* @__PURE__ */ jsxs(
+              Button.Button.Border.R,
+              {
+                padding: 2,
+                onMouseOver: (e) => {
+                  let tipsID = $$.uuid.gen();
+                  Tooltips.open({
+                    tipsID: "tips-" + (index + 1) + "---" + tipsID,
+                    parent: e.currentTarget,
+                    gravityPoint: index + 1,
+                    padding: 0,
+                    content: /* @__PURE__ */ jsx(
+                      Tooltips.Comps.Body,
+                      {
+                        children: index
+                      },
+                      index
+                    )
+                  });
+                },
+                children: [
+                  "GravityPoint",
+                  index + 1
+                ]
+              }
+            );
+          })
+        }
+      )
+    ] });
+  },
+  Snackbar: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Snackbars"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Row.Center,
+        {
+          padding: 2,
+          children: [
+            /* @__PURE__ */ jsx(
+              Button.Button.Prime.R,
+              {
+                onClick: () => {
+                  Snackbar.add({
+                    children: "hello World!!"
+                  });
+                },
+                children: "Add Normal Snackbar"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Prime.R,
+              {
+                onClick: () => {
+                  Snackbar.add({
+                    secondsToClose: 30,
+                    children: /* @__PURE__ */ jsxs(
+                      Row.Separate,
+                      {
+                        verticalAlign: "baseline",
+                        paddingLeft: "2/3",
+                        children: [
+                          "\u4E88\u7D04\u6642\u9593\u304C\u66F4\u65B0\u3055\u308C\u307E\u3057\u305F",
+                          /* @__PURE__ */ jsx(
+                            Button.Button.Clear.S,
+                            {
+                              color: "white",
+                              fontColor: "posi",
+                              children: "\u5143\u306B\u623B\u3059"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  });
+                },
+                children: "Notices"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Prime.R,
+              {
+                onClick: () => {
+                  let snackID = $$.uuid.gen();
+                  Snackbar.add({
+                    snackID,
+                    children: /* @__PURE__ */ jsxs(
+                      Column,
+                      {
+                        padding: 1,
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            Row.Left,
+                            {
+                              verticalAlign: "top",
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  Img,
+                                  {
+                                    src: Logo.Images.defaultIcon("user"),
+                                    ssSphere: 4
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(Text.Description, { children: `Some Text
 Some Text
-Some Text`})]}),t(B.Separate,{children:[e(r.Button.Sub.S,{color:"white",onClick:()=>{z.remove(a)},children:"\u9589\u3058\u308B"}),e(r.Anchor.Prime.S,{href:"https://google.com",children:"\u8A73\u7D30"})]})]})})},children:"Message"})]})]})},P={_:()=>t(d,{children:[e(P.Types,{}),e(P.Tone,{}),e(P.Segmented,{})]}),Tone:()=>t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Tone"}),e(o,{padding:1,overflow:"auto",children:t(p,{gridCols:2,gap:2,children:[t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBPrime"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Prime.R,{color:"theme",children:"theme"}),e(r.Button.Prime.R,{color:"coffee",children:"posi"}),e(r.Button.Prime.R,{color:"ninja",children:"nega"}),e(r.Button.Prime.R,{color:"droplet",children:"warn"}),e(r.Button.Prime.R,{color:"googleBlue",children:"mono"}),e(r.Button.Prime.R,{color:"poizon",children:"pozion"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBSub"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Sub.R,{color:"theme",children:"theme"}),e(r.Button.Sub.R,{color:"posi",children:"posi"}),e(r.Button.Sub.R,{color:"nega",children:"nega"}),e(r.Button.Sub.R,{color:"warn",children:"warn"}),e(r.Button.Sub.R,{color:"cloud",children:"cloud"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.Sub.R,{color:"white",children:"white"}),e(r.Button.Sub.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBClear"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Clear.R,{color:"theme",children:"theme"}),e(r.Button.Clear.R,{color:"posi",children:"posi"}),e(r.Button.Clear.R,{color:"nega",children:"nega"}),e(r.Button.Clear.R,{color:"warn",children:"warn"}),e(r.Button.Clear.R,{color:"cloud",children:"cloud"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.Clear.R,{color:"white",children:"white"}),e(r.Button.Clear.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBFillToBorder"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.FillToBorder.R,{color:"theme",children:"theme"}),e(r.Button.FillToBorder.R,{color:"posi",children:"posi"}),e(r.Button.FillToBorder.R,{color:"nega",children:"nega"}),e(r.Button.FillToBorder.R,{color:"warn",children:"warn"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.FillToBorder.R,{color:"white",children:"white"}),e(r.Button.FillToBorder.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBBorderToFill"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.BorderToFill.R,{color:"theme",fontColor:"nega",children:e(o,{children:"theme"})}),e(r.Button.BorderToFill.R,{color:"posi",children:"posi"}),e(r.Button.BorderToFill.R,{color:"nega",children:"nega"}),e(r.Button.BorderToFill.R,{color:"warn",children:"warn"})]}),t(p,{gridCols:3,gap:1,padding:1,backgroundColor:"dark",ssCardBox:!0,children:[e(r.Button.BorderToFill.R,{color:"white",children:"white"}),e(r.Button.BorderToFill.R,{color:"cloud",children:"cloud"})]})]}),t(o,{children:[e(o,{padding:1,fontSize:"3.paragraph",isBoldFont:!0,children:"\u30FBOthers"}),t(p,{gridCols:3,gap:1,padding:1,children:[e(r.Button.Border.R,{children:"Border"}),e(r.Button.Normal.R,{children:"Normal"}),e(r.Button.Link,{children:"Link"}),e(r.Button.Plain,{children:"Plain"})]})]})]})})]}),Types:()=>t(c,{gap:2,flexChilds:"auto",children:[t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBButton"}),e(o,{padding:1,overflow:"auto",children:e(v,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Button.Prime ... />"}),e(o,{children:e(r.Button.Prime.R,{children:"Button.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Button.Sub ... />"}),e(o,{children:e(r.Button.Sub.R,{children:"Button.Sub AAAA"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Button.Border ... />"}),e(o,{children:e(r.Button.Border.R,{children:"Button.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBLabel"}),e(o,{padding:1,overflow:"auto",children:e(v,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Label.Prime ... />"}),e(o,{children:e(r.Label.Prime.R,{children:"Label.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Label.Sub ... />"}),e(o,{children:e(r.Label.Sub.R,{children:"Label.Sub"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Label.Border ... />"}),e(o,{children:e(r.Label.Border.R,{children:"Label.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBAnchor"}),e(o,{padding:1,overflow:"auto",children:e(v,{rowStyles:{padding:[1,0],horizontalAlign:"between",borderBottom:"2.normal"},rows:[{children:t(d,{children:[e(o,{children:"<Button.Anchor.Prime ... />"}),e(o,{children:e(r.Anchor.Prime.R,{href:"",children:"Anchor.Prime"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Anchor.Sub ... />"}),e(o,{children:e(r.Anchor.Sub.R,{href:"",children:"Anchor.Sub"})})]})},{children:t(d,{children:[e(o,{children:"<Button.Anchor.Border ... />"}),e(o,{children:e(r.Anchor.Border.R,{href:"",children:"Anchor.Border"})})]}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"\u30FBSizes"}),t(p,{gridCols:2,padding:1,gap:2,children:[e(o,{flexCenter:!0,children:e(r.Button.Prime.XS,{children:'size="XS"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.S,{children:'size="S"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.R,{children:'size="R"'})}),e(o,{flexCenter:!0,children:e(r.Button.Prime.L,{children:'size="L"'})})]})]})]}),Segmented:()=>t(o,{ssCardBox:!0,children:[e(n.ThirdTitle,{padding:1,borderBottom:!0,children:"Segmented"}),t(c,{overflow:"auto",gap:2,padding:3,children:[e(i.Segmented.Auto,{tone:"cloud",value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]}),e(i.Segmented.Cloud,{value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]}),e(i.Segmented.Cloud2,{value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]}),e(i.Segmented.Cloud3,{value:1,options:[{value:0,label:e(g.AngleLeft,{})},{value:1,label:e(g.AngleRight,{})},{value:2,label:e(g.AngleUp,{})},{value:3,label:e(g.AngleDown,{})}]}),e(i.Segmented.Border,{value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]}),e(i.Segmented.Border2,{value:1,options:[{value:0,label:"On"},{value:1,label:"Off"}]}),e(i.Segmented.BottomLine,{value:1,options:[{value:0,label:"Takana"},{value:1,label:"Mentai"},{value:2,label:"Mayo"},{value:3,label:"Gyudon"}]})]})]})},K=()=>{const a={Basic:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"TextInput"}),t(o,{padding:1,children:[t(B.Separate,{marginBottom:2,children:[e(n.Description,{children:`<Input.Text
+Some Text` })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(Row.Separate, { children: [
+                            /* @__PURE__ */ jsx(
+                              Button.Button.Sub.S,
+                              {
+                                color: "white",
+                                onClick: () => {
+                                  Snackbar.remove(snackID);
+                                },
+                                children: "\u9589\u3058\u308B"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Button.Anchor.Prime.S,
+                              {
+                                href: "https://google.com",
+                                children: "\u8A73\u7D30"
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    )
+                  });
+                },
+                children: "Message"
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+};
+const Buttons = {
+  _: () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Buttons.Types, {}),
+      /* @__PURE__ */ jsx(Buttons.Tone, {}),
+      /* @__PURE__ */ jsx(Buttons.Segmented, {})
+    ] });
+  },
+  Tone: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Tone"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsxs(
+            Grid,
+            {
+              gridCols: 2,
+              gap: 2,
+              children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      padding: 1,
+                      fontSize: "3.paragraph",
+                      isBoldFont: true,
+                      children: "\u30FBPrime"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Grid,
+                    {
+                      gridCols: 3,
+                      gap: 1,
+                      padding: 1,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Prime.R,
+                          {
+                            color: "theme",
+                            children: "theme"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Prime.R,
+                          {
+                            color: "coffee",
+                            children: "posi"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Prime.R,
+                          {
+                            color: "ninja",
+                            children: "nega"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Prime.R,
+                          {
+                            color: "droplet",
+                            children: "warn"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Prime.R,
+                          {
+                            color: "googleBlue",
+                            children: "mono"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Prime.R,
+                          {
+                            color: "poizon",
+                            children: "pozion"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      padding: 1,
+                      fontSize: "3.paragraph",
+                      isBoldFont: true,
+                      children: "\u30FBSub"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Grid,
+                    {
+                      gridCols: 3,
+                      gap: 1,
+                      padding: 1,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Sub.R,
+                          {
+                            color: "theme",
+                            children: "theme"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Sub.R,
+                          {
+                            color: "posi",
+                            children: "posi"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Sub.R,
+                          {
+                            color: "nega",
+                            children: "nega"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Sub.R,
+                          {
+                            color: "warn",
+                            children: "warn"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Sub.R,
+                          {
+                            color: "cloud",
+                            children: "cloud"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Grid,
+                    {
+                      gridCols: 3,
+                      gap: 1,
+                      padding: 1,
+                      backgroundColor: "dark",
+                      ssCardBox: true,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Sub.R,
+                          {
+                            color: "white",
+                            children: "white"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Sub.R,
+                          {
+                            color: "cloud",
+                            children: "cloud"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      padding: 1,
+                      fontSize: "3.paragraph",
+                      isBoldFont: true,
+                      children: "\u30FBClear"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Grid,
+                    {
+                      gridCols: 3,
+                      gap: 1,
+                      padding: 1,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Clear.R,
+                          {
+                            color: "theme",
+                            children: "theme"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Clear.R,
+                          {
+                            color: "posi",
+                            children: "posi"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Clear.R,
+                          {
+                            color: "nega",
+                            children: "nega"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Clear.R,
+                          {
+                            color: "warn",
+                            children: "warn"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Clear.R,
+                          {
+                            color: "cloud",
+                            children: "cloud"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Grid,
+                    {
+                      gridCols: 3,
+                      gap: 1,
+                      padding: 1,
+                      backgroundColor: "dark",
+                      ssCardBox: true,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Clear.R,
+                          {
+                            color: "white",
+                            children: "white"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Clear.R,
+                          {
+                            color: "cloud",
+                            children: "cloud"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      padding: 1,
+                      fontSize: "3.paragraph",
+                      isBoldFont: true,
+                      children: "\u30FBFillToBorder"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Grid,
+                    {
+                      gridCols: 3,
+                      gap: 1,
+                      padding: 1,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Button.Button.FillToBorder.R,
+                          {
+                            color: "theme",
+                            children: "theme"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.FillToBorder.R,
+                          {
+                            color: "posi",
+                            children: "posi"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.FillToBorder.R,
+                          {
+                            color: "nega",
+                            children: "nega"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.FillToBorder.R,
+                          {
+                            color: "warn",
+                            children: "warn"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Grid,
+                    {
+                      gridCols: 3,
+                      gap: 1,
+                      padding: 1,
+                      backgroundColor: "dark",
+                      ssCardBox: true,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Button.Button.FillToBorder.R,
+                          {
+                            color: "white",
+                            children: "white"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.FillToBorder.R,
+                          {
+                            color: "cloud",
+                            children: "cloud"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      padding: 1,
+                      fontSize: "3.paragraph",
+                      isBoldFont: true,
+                      children: "\u30FBBorderToFill"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Grid,
+                    {
+                      gridCols: 3,
+                      gap: 1,
+                      padding: 1,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Button.Button.BorderToFill.R,
+                          {
+                            color: "theme",
+                            fontColor: "nega",
+                            children: /* @__PURE__ */ jsx(Box, { children: "theme" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.BorderToFill.R,
+                          {
+                            color: "posi",
+                            children: "posi"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.BorderToFill.R,
+                          {
+                            color: "nega",
+                            children: "nega"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.BorderToFill.R,
+                          {
+                            color: "warn",
+                            children: "warn"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Grid,
+                    {
+                      gridCols: 3,
+                      gap: 1,
+                      padding: 1,
+                      backgroundColor: "dark",
+                      ssCardBox: true,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Button.Button.BorderToFill.R,
+                          {
+                            color: "white",
+                            children: "white"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.BorderToFill.R,
+                          {
+                            color: "cloud",
+                            children: "cloud"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      padding: 1,
+                      fontSize: "3.paragraph",
+                      isBoldFont: true,
+                      children: "\u30FBOthers"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Grid,
+                    {
+                      gridCols: 3,
+                      gap: 1,
+                      padding: 1,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Border.R,
+                          {
+                            children: "Border"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Normal.R,
+                          {
+                            children: "Normal"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Link,
+                          {
+                            children: "Link"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button.Button.Plain,
+                          {
+                            children: "Plain"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  },
+  Types: () => {
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: 2,
+        flexChilds: "auto",
+        children: [
+          /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+            /* @__PURE__ */ jsx(
+              Text.ThirdTitle,
+              {
+                padding: 1,
+                borderBottom: true,
+                children: "\u30FBButton"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 1,
+                overflow: "auto",
+                children: /* @__PURE__ */ jsx(
+                  List,
+                  {
+                    rowStyles: {
+                      padding: [1, 0],
+                      horizontalAlign: "between",
+                      borderBottom: "2.normal"
+                    },
+                    rows: [
+                      {
+                        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Box, { children: "<Button.Button.Prime ... />" }),
+                          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                            Button.Button.Prime.R,
+                            {
+                              children: "Button.Prime"
+                            }
+                          ) })
+                        ] })
+                      },
+                      {
+                        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Box, { children: "<Button.Button.Sub ... />" }),
+                          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                            Button.Button.Sub.R,
+                            {
+                              children: "Button.Sub AAAA"
+                            }
+                          ) })
+                        ] })
+                      },
+                      {
+                        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Box, { children: "<Button.Button.Border ... />" }),
+                          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                            Button.Button.Border.R,
+                            {
+                              children: "Button.Border"
+                            }
+                          ) })
+                        ] }),
+                        borderBottom: "unset"
+                      }
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+            /* @__PURE__ */ jsx(
+              Text.ThirdTitle,
+              {
+                padding: 1,
+                borderBottom: true,
+                children: "\u30FBLabel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 1,
+                overflow: "auto",
+                children: /* @__PURE__ */ jsx(
+                  List,
+                  {
+                    rowStyles: {
+                      padding: [1, 0],
+                      horizontalAlign: "between",
+                      borderBottom: "2.normal"
+                    },
+                    rows: [
+                      {
+                        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Box, { children: "<Button.Label.Prime ... />" }),
+                          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button.Label.Prime.R, { children: "Label.Prime" }) })
+                        ] })
+                      },
+                      {
+                        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Box, { children: "<Button.Label.Sub ... />" }),
+                          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button.Label.Sub.R, { children: "Label.Sub" }) })
+                        ] })
+                      },
+                      {
+                        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Box, { children: "<Button.Label.Border ... />" }),
+                          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                            Button.Label.Border.R,
+                            {
+                              children: "Label.Border"
+                            }
+                          ) })
+                        ] }),
+                        borderBottom: "unset"
+                      }
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+            /* @__PURE__ */ jsx(
+              Text.ThirdTitle,
+              {
+                padding: 1,
+                borderBottom: true,
+                children: "\u30FBAnchor"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 1,
+                overflow: "auto",
+                children: /* @__PURE__ */ jsx(
+                  List,
+                  {
+                    rowStyles: {
+                      padding: [1, 0],
+                      horizontalAlign: "between",
+                      borderBottom: "2.normal"
+                    },
+                    rows: [
+                      {
+                        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Box, { children: "<Button.Anchor.Prime ... />" }),
+                          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                            Button.Anchor.Prime.R,
+                            {
+                              href: "",
+                              children: "Anchor.Prime"
+                            }
+                          ) })
+                        ] })
+                      },
+                      {
+                        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Box, { children: "<Button.Anchor.Sub ... />" }),
+                          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                            Button.Anchor.Sub.R,
+                            {
+                              href: "",
+                              children: "Anchor.Sub"
+                            }
+                          ) })
+                        ] })
+                      },
+                      {
+                        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Box, { children: "<Button.Anchor.Border ... />" }),
+                          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                            Button.Anchor.Border.R,
+                            {
+                              href: "",
+                              children: "Anchor.Border"
+                            }
+                          ) })
+                        ] }),
+                        borderBottom: "unset"
+                      }
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+            /* @__PURE__ */ jsx(
+              Text.ThirdTitle,
+              {
+                padding: 1,
+                borderBottom: true,
+                children: "\u30FBSizes"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Grid,
+              {
+                gridCols: 2,
+                padding: 1,
+                gap: 2,
+                children: [
+                  /* @__PURE__ */ jsx(Box, { flexCenter: true, children: /* @__PURE__ */ jsx(
+                    Button.Button.Prime.XS,
+                    {
+                      children: 'size="XS"'
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Box, { flexCenter: true, children: /* @__PURE__ */ jsx(
+                    Button.Button.Prime.S,
+                    {
+                      children: 'size="S"'
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Box, { flexCenter: true, children: /* @__PURE__ */ jsx(
+                    Button.Button.Prime.R,
+                    {
+                      children: 'size="R"'
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Box, { flexCenter: true, children: /* @__PURE__ */ jsx(
+                    Button.Button.Prime.L,
+                    {
+                      children: 'size="L"'
+                    }
+                  ) })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  },
+  Segmented: () => {
+    return /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.ThirdTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Segmented"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          overflow: "auto",
+          gap: 2,
+          padding: 3,
+          children: [
+            /* @__PURE__ */ jsx(
+              Input.Segmented.Auto,
+              {
+                tone: "cloud",
+                value: 1,
+                options: [
+                  { value: 0, label: /* @__PURE__ */ jsx(FAI.AngleLeft, {}) },
+                  { value: 1, label: /* @__PURE__ */ jsx(FAI.AngleRight, {}) },
+                  { value: 2, label: /* @__PURE__ */ jsx(FAI.AngleUp, {}) },
+                  { value: 3, label: /* @__PURE__ */ jsx(FAI.AngleDown, {}) }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input.Segmented.Cloud,
+              {
+                value: 1,
+                options: [
+                  { value: 0, label: /* @__PURE__ */ jsx(FAI.AngleLeft, {}) },
+                  { value: 1, label: /* @__PURE__ */ jsx(FAI.AngleRight, {}) },
+                  { value: 2, label: /* @__PURE__ */ jsx(FAI.AngleUp, {}) },
+                  { value: 3, label: /* @__PURE__ */ jsx(FAI.AngleDown, {}) }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input.Segmented.Cloud2,
+              {
+                value: 1,
+                options: [
+                  { value: 0, label: /* @__PURE__ */ jsx(FAI.AngleLeft, {}) },
+                  { value: 1, label: /* @__PURE__ */ jsx(FAI.AngleRight, {}) },
+                  { value: 2, label: /* @__PURE__ */ jsx(FAI.AngleUp, {}) },
+                  { value: 3, label: /* @__PURE__ */ jsx(FAI.AngleDown, {}) }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input.Segmented.Cloud3,
+              {
+                value: 1,
+                options: [
+                  { value: 0, label: /* @__PURE__ */ jsx(FAI.AngleLeft, {}) },
+                  { value: 1, label: /* @__PURE__ */ jsx(FAI.AngleRight, {}) },
+                  { value: 2, label: /* @__PURE__ */ jsx(FAI.AngleUp, {}) },
+                  { value: 3, label: /* @__PURE__ */ jsx(FAI.AngleDown, {}) }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input.Segmented.Border,
+              {
+                value: 1,
+                options: [
+                  { value: 0, label: "On" },
+                  { value: 1, label: "Off" }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input.Segmented.Border2,
+              {
+                value: 1,
+                options: [
+                  { value: 0, label: "On" },
+                  { value: 1, label: "Off" }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input.Segmented.BottomLine,
+              {
+                value: 1,
+                options: [
+                  { value: 0, label: "Takana" },
+                  { value: 1, label: "Mentai" },
+                  { value: 2, label: "Mayo" },
+                  { value: 3, label: "Gyudon" }
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+};
+const Inputs = () => {
+  const InputComps = {
+    Basic: () => {
+      return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+        /* @__PURE__ */ jsx(
+          Text.Paragraph,
+          {
+            padding: 1,
+            borderBottom: true,
+            children: "TextInput"
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { padding: 1, children: [
+          /* @__PURE__ */ jsxs(
+            Row.Separate,
+            {
+              marginBottom: 2,
+              children: [
+                /* @__PURE__ */ jsx(Text.Description, { children: `<Input.Text
     required
     value={ 'hello React!!' }
-  />`}),t(h,{gap:"1/2",children:[t(o,{children:["testInputLabel ",e(i.Comps.RequiredSign,{})]}),e(i.Text.Normal,{required:!0,value:"helloReact"})]})]}),t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Text.Email",e(i.Text.Email,{autoComplete:"off",name:"emailInput",value:"******@gmail.com"})]}),t(o,{children:["Input.Text.Number",e(i.Text.Number,{value:"324"})]}),t(o,{children:["Input.Text.Tel",e(i.Text.Tel,{value:"080-6995-2229"})]}),t(o,{children:["Input.Text.Money.JPY",e(i.Text.Money.JPY,{value:"3000"})]}),t(o,{children:["Input.Text.Url",e(i.Text.Url,{value:"http://google.com"})]}),t(o,{children:["Input.Text.Postal",t(B.Right,{children:[e(o,{flexSizing:0,children:e(i.Text.Postal,{override:"force"})}),e(r.Button.Border.R,{onClick:()=>y(void 0,null,function*(){}),children:"\u73FE\u5728\u5730\u3092\u53D6\u5F97"})]}),e(o,{id:"postalResult",padding:1,textAlign:"left"})]}),t(o,{children:["Input.Text.Password",e(i.Text.Password,{value:"onigiriUmai"})]}),t(o,{flexNewLine:!0,children:["Input.TextArea",e(i.TextArea,{value:`text1
+  />` }),
+                /* @__PURE__ */ jsxs(Column, { gap: "1/2", children: [
+                  /* @__PURE__ */ jsxs(Box, { children: [
+                    "testInputLabel ",
+                    /* @__PURE__ */ jsx(Input.Comps.RequiredSign, {})
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Input.Text.Normal,
+                    {
+                      required: true,
+                      value: "helloReact"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 2,
+              flexChilds: "auto",
+              children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Text.Email",
+                  /* @__PURE__ */ jsx(
+                    Input.Text.Email,
+                    {
+                      autoComplete: "off",
+                      name: "emailInput",
+                      value: "******@gmail.com"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Text.Number",
+                  /* @__PURE__ */ jsx(
+                    Input.Text.Number,
+                    {
+                      value: "324"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Text.Tel",
+                  /* @__PURE__ */ jsx(
+                    Input.Text.Tel,
+                    {
+                      value: "080-6995-2229"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Text.Money.JPY",
+                  /* @__PURE__ */ jsx(
+                    Input.Text.Money.JPY,
+                    {
+                      value: "3000"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Text.Url",
+                  /* @__PURE__ */ jsx(
+                    Input.Text.Url,
+                    {
+                      value: "http://google.com"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Text.Postal",
+                  /* @__PURE__ */ jsxs(Row.Right, { children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        flexSizing: 0,
+                        children: /* @__PURE__ */ jsx(
+                          Input.Text.Postal,
+                          {
+                            override: "force"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button.Button.Border.R,
+                      {
+                        onClick: () => __async(void 0, null, function* () {
+                        }),
+                        children: "\u73FE\u5728\u5730\u3092\u53D6\u5F97"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      id: "postalResult",
+                      padding: 1,
+                      textAlign: "left"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Text.Password",
+                  /* @__PURE__ */ jsx(
+                    Input.Text.Password,
+                    {
+                      value: "onigiriUmai"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { flexNewLine: true, children: [
+                  "Input.TextArea",
+                  /* @__PURE__ */ jsx(
+                    Input.TextArea,
+                    {
+                      value: `text1
   text2
   text3
   text4
-  text5`,rows:5})]})]})]})]})}),Time:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Time Input"}),e(o,{padding:1,children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Time.Clock",e(i.Time.Clock,{})]}),t(o,{children:["Input.Time.Date",e(i.Time.Date,{})]}),t(o,{children:["Input.Time.Week",e(i.Time.Week,{})]}),t(o,{children:["Input.Time.Month",e(i.Time.Month,{})]}),t(o,{children:["Input.Time.Year",e(i.Time.Year,{})]}),t(o,{children:["Input.Time.Periods.Date",e(i.Time.Periods.Date,{})]}),t(o,{children:["Input.Time.Periods.Month",e(i.Time.Periods.Month,{})]}),t(o,{children:["Input.Time.DateWareki",e(i.Time.DateWareki,{})]}),t(o,{children:["Input.Time.picker",e(i.Select,{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:u})=>{i.Time.fn.picker.launch({parent:"#timePicker",restrict:u,defaultValue:"",onValueUpdate:s=>{console.log(s)}})}})]})]})})]})}),List:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Radio & Checkbox Input"}),e(o,{padding:1,children:t(h,{children:[t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Radio",e(i.Radio,{value:[1],options:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3"}]})]}),t(o,{children:["Input.Checkbox",e(i.Checkbox,{value:[2,"3"],options:[{value:"1",label:"option1"},{value:"2",label:"option2"},{value:"3",label:"option3"}]})]})]}),t(h,{children:[e(n.Paragraph,{children:"Tones"}),t(c,{gap:2,flexChilds:"auto",children:[e(i.Radio,{tone:"plain",value:[1],gap:1,options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"normal",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"cloud",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"border",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]}),e(i.Radio,{tone:"vivid",value:[1],options:[{value:1,label:"Option1"},{value:2,label:"Option2"},{value:3,label:"Option3"}]})]})]})]})})]})}),Select:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Select,Search,Chips Input"}),e(o,{padding:1,children:e(h,{children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.Select",e(i.Select,{required:!0,value:3,options:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3a"},{value:4,label:"option4"}]})]}),t(o,{children:["Input.Search",e(i.Search,{required:!0,defaultOptions:[{value:1,label:"1"},{value:{value1:2,value2:3},label:"Object"},{value:3,label:"3"},{value:101,label:"101"},{value:102,label:"102"}],onDynamicSearch:(...u)=>y(void 0,null,function*(){let s=[];for(let x=0;x<100;x++)s.push({value:x,label:String(x)});return{options:s}})})]}),t(o,{flexNewLine:!0,children:["Input.Chips",e(i.Chips,{limit:5,value:[{value:"option3",label:"option3"}],onUpdateValidValue:({value:u})=>{console.log(u)},defaultOptions:[{value:1,label:"option1"},{value:2,label:"option2"},{value:3,label:"option3"},{value:4,label:"option4"}]})]})]})})})]})}),Variables:()=>e(d,{children:t(o,{ssCardBox:!0,children:[e(n.Paragraph,{padding:1,borderBottom:!0,children:"Variables"}),e(o,{padding:1,children:e(h,{children:t(c,{gap:2,flexChilds:"auto",children:[t(o,{children:["Input.File",e(i.Filer,{limit:3})]}),t(o,{children:["Input.Switch",t(c,{gap:2,children:[e(i.Switch,{}),e(i.Switch,{appearance:"applely",color:"icicles",value:!0}),e(i.Switch,{appearance:"applely",icon:e(g.Check,{}),color:"warn",value:!0})]})]}),t(o,{flexNewLine:!0,children:["Input.Slider",e(i.Slider,{color:"battery",name:"sliderInput",value:40,step:10,min:0,max:100})]})]})})})]})})};return e(d,{children:e(k.Plate,{size:"L",children:t(p,{gap:2,gridCols:2,children:[e(a.Basic,{}),e(a.Select,{}),e(a.Time,{}),e(a.List,{}),e(a.Variables,{})]})})})},j=()=>{const a=u=>{let s="testModal2";O.open({type:u,sheetID:s,size:"S",padding:2,content:t(O.Comps.Body,{padding:1,children:[e(o,{padding:2,children:"Content"}),e(B.Right,{children:e(r.Button.Prime.R,{onClick:()=>{O.close(s)},children:"\u9589\u3058\u308B"})})]})})};return t(d,{children:[t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"CardBox"}),e(o,{padding:1,overflow:"auto",children:e(n.Description,{children:`<Box ssCardBox>
+  text5`,
+                      rows: 5
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] })
+      ] }) });
+    },
+    Time: () => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.Paragraph,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Time Input"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          children: /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 2,
+              flexChilds: "auto",
+              children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Time.Clock",
+                  /* @__PURE__ */ jsx(
+                    Input.Time.Clock,
+                    {}
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Time.Date",
+                  /* @__PURE__ */ jsx(
+                    Input.Time.Date,
+                    {}
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Time.Week",
+                  /* @__PURE__ */ jsx(
+                    Input.Time.Week,
+                    {}
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Time.Month",
+                  /* @__PURE__ */ jsx(
+                    Input.Time.Month,
+                    {}
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Time.Year",
+                  /* @__PURE__ */ jsx(
+                    Input.Time.Year,
+                    {}
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Time.Periods.Date",
+                  /* @__PURE__ */ jsx(
+                    Input.Time.Periods.Date,
+                    {}
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Time.Periods.Month",
+                  /* @__PURE__ */ jsx(
+                    Input.Time.Periods.Month,
+                    {}
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Time.DateWareki",
+                  /* @__PURE__ */ jsx(
+                    Input.Time.DateWareki,
+                    {}
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "Input.Time.picker",
+                  /* @__PURE__ */ jsx(
+                    Input.Select,
+                    {
+                      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,
+                          defaultValue: "",
+                          onValueUpdate: (value2) => {
+                            console.log(value2);
+                          }
+                        });
+                      }
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    ] }) }),
+    List: () => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.Paragraph,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Radio & Checkbox Input"
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsxs(Column, { children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            gap: 2,
+            flexChilds: "auto",
+            children: [
+              /* @__PURE__ */ jsxs(Box, { children: [
+                "Input.Radio",
+                /* @__PURE__ */ jsx(
+                  Input.Radio,
+                  {
+                    value: [1],
+                    options: [
+                      { value: 1, label: "option1" },
+                      { value: 2, label: "option2" },
+                      { value: 3, label: "option3" }
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Box, { children: [
+                "Input.Checkbox",
+                /* @__PURE__ */ jsx(
+                  Input.Checkbox,
+                  {
+                    value: [2, "3"],
+                    options: [
+                      { value: "1", label: "option1" },
+                      { value: "2", label: "option2" },
+                      { value: "3", label: "option3" }
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Column, { children: [
+          /* @__PURE__ */ jsx(Text.Paragraph, { children: "Tones" }),
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 2,
+              flexChilds: "auto",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Input.Radio,
+                  {
+                    tone: "plain",
+                    value: [1],
+                    gap: 1,
+                    options: [
+                      { value: 1, label: "Option1" },
+                      { value: 2, label: "Option2" },
+                      { value: 3, label: "Option3" }
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input.Radio,
+                  {
+                    tone: "normal",
+                    value: [1],
+                    options: [
+                      { value: 1, label: "Option1" },
+                      { value: 2, label: "Option2" },
+                      { value: 3, label: "Option3" }
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input.Radio,
+                  {
+                    tone: "cloud",
+                    value: [1],
+                    options: [
+                      { value: 1, label: "Option1" },
+                      { value: 2, label: "Option2" },
+                      { value: 3, label: "Option3" }
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input.Radio,
+                  {
+                    tone: "border",
+                    value: [1],
+                    options: [
+                      { value: 1, label: "Option1" },
+                      { value: 2, label: "Option2" },
+                      { value: 3, label: "Option3" }
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input.Radio,
+                  {
+                    tone: "vivid",
+                    value: [1],
+                    options: [
+                      { value: 1, label: "Option1" },
+                      { value: 2, label: "Option2" },
+                      { value: 3, label: "Option3" }
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }) })
+    ] }) }),
+    Select: () => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.Paragraph,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Select,Search,Chips Input"
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          gap: 2,
+          flexChilds: "auto",
+          children: [
+            /* @__PURE__ */ jsxs(Box, { children: [
+              "Input.Select",
+              /* @__PURE__ */ jsx(
+                Input.Select,
+                {
+                  required: true,
+                  value: 3,
+                  options: [
+                    { value: 1, label: "option1" },
+                    { value: 2, label: "option2" },
+                    { value: 3, label: "option3a" },
+                    { value: 4, label: "option4" }
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              "Input.Search",
+              /* @__PURE__ */ jsx(
+                Input.Search,
+                {
+                  required: true,
+                  defaultOptions: [
+                    {
+                      value: 1,
+                      label: "1"
+                    },
+                    {
+                      value: {
+                        value1: 2,
+                        value2: 3
+                      },
+                      label: "Object"
+                    },
+                    { value: 3, label: "3" },
+                    {
+                      value: 101,
+                      label: "101"
+                    },
+                    {
+                      value: 102,
+                      label: "102"
+                    }
+                  ],
+                  onDynamicSearch: (...args) => __async(void 0, null, function* () {
+                    let options = [];
+                    for (let i = 0; i < 100; i++) {
+                      options.push({
+                        value: i,
+                        label: String(i)
+                      });
+                    }
+                    return { options };
+                  })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                flexNewLine: true,
+                children: [
+                  "Input.Chips",
+                  /* @__PURE__ */ jsx(
+                    Input.Chips,
+                    {
+                      limit: 5,
+                      value: [
+                        { value: "option3", label: "option3" }
+                      ],
+                      onUpdateValidValue: ({ value }) => {
+                        console.log(value);
+                      },
+                      defaultOptions: [
+                        { value: 1, label: "option1" },
+                        { value: 2, label: "option2" },
+                        { value: 3, label: "option3" },
+                        { value: 4, label: "option4" }
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) }) })
+    ] }) }),
+    Variables: () => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.Paragraph,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Variables"
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          gap: 2,
+          flexChilds: "auto",
+          children: [
+            /* @__PURE__ */ jsxs(Box, { children: [
+              "Input.File",
+              /* @__PURE__ */ jsx(
+                Input.Filer,
+                {
+                  limit: 3
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              "Input.Switch",
+              /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  gap: 2,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Input.Switch,
+                      {}
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Input.Switch,
+                      {
+                        appearance: "applely",
+                        color: "icicles",
+                        value: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Input.Switch,
+                      {
+                        appearance: "applely",
+                        icon: /* @__PURE__ */ jsx(FAI.Check, {}),
+                        color: "warn",
+                        value: true
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                flexNewLine: true,
+                children: [
+                  "Input.Slider",
+                  /* @__PURE__ */ jsx(
+                    Input.Slider,
+                    {
+                      color: "battery",
+                      name: "sliderInput",
+                      value: 40,
+                      step: 10,
+                      min: 0,
+                      max: 100
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) }) })
+    ] }) })
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    Layout.Plate,
+    {
+      size: "L",
+      children: /* @__PURE__ */ jsxs(
+        Grid,
+        {
+          gap: 2,
+          gridCols: 2,
+          children: [
+            /* @__PURE__ */ jsx(InputComps.Basic, {}),
+            /* @__PURE__ */ jsx(InputComps.Select, {}),
+            /* @__PURE__ */ jsx(InputComps.Time, {}),
+            /* @__PURE__ */ jsx(InputComps.List, {}),
+            /* @__PURE__ */ jsx(InputComps.Variables, {})
+          ]
+        }
+      )
+    }
+  ) });
+};
+const Styling = () => {
+  const SheetContent = (type) => {
+    let sheetID = "testModal2";
+    Sheet.open({
+      type,
+      sheetID,
+      size: "S",
+      padding: 2,
+      content: /* @__PURE__ */ jsxs(
+        Sheet.Comps.Body,
+        {
+          padding: 1,
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 2,
+                minHeight: "viewHeight",
+                children: "Content"
+              }
+            ),
+            /* @__PURE__ */ jsx(Row.Right, { children: /* @__PURE__ */ jsx(
+              Button.Button.Prime.R,
+              {
+                onClick: () => {
+                  Sheet.close(sheetID);
+                },
+                children: "\u9589\u3058\u308B"
+              }
+            ) })
+          ]
+        }
+      )
+    });
+  };
+  useEffect(() => {
+    SheetContent("normal.middleCenter");
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "CardBox"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsx(Text.Description, { children: `<Box ssCardBox>
   <Box>
     Header
   </Box>
@@ -84,16 +2963,756 @@ Some Text`})]}),t(B.Separate,{children:[e(r.Button.Sub.S,{color:"white",onClick:
   <Box>
     Footer
   </Box>
-</Box>`})}),e(o,{padding:2,children:t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Header"}),e(o,{padding:1,overflow:"auto",children:"Body"}),e(o,{padding:1,children:"Footer"})]})})]}),t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"List"}),e(o,{padding:1,overflow:"auto",children:e(n.Description,{children:`<List
+</Box>` })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 2,
+          children: /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+            /* @__PURE__ */ jsx(
+              Text.SubTitle,
+              {
+                padding: 1,
+                borderBottom: true,
+                children: "Header"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 1,
+                overflow: "auto",
+                children: "Body"
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { padding: 1, children: "Footer" })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "List"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsx(Text.Description, { children: `<List
   options={ [
     {
       title?: LeftSideReactComponent,
       content: RightSideReactComponent
     }
   ] }
-/>`})}),e(o,{padding:2,overflow:"auto",children:e(v,{border:!0,rowStyles:{padding:1,borderBottom:!0},rows:[{children:t(d,{children:[e(o,{children:"Title1"}),e(o,{children:e(o,{children:"Content1"})})]}),horizontalAlign:"between"},{children:t(d,{children:[e(o,{flexGrid:1,children:"Title2"}),e(o,{flexGrid:2,children:e(o,{children:"Content2"})})]})},{children:t(d,{children:[e(o,{children:"Title3"}),e(o,{children:e(o,{children:"Content3"})})]}),flexType:"col"},{children:e(d,{children:e(o,{children:e(o,{children:"Content4"})})}),borderBottom:"unset"}]})})]}),t(o,{ssCardBox:!0,children:[e(n.SubTitle,{padding:1,borderBottom:!0,children:"Sheet"}),e(o,{padding:1,overflow:"auto",children:e(n.Description,{children:`Sheet.open( {
+/>` })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 2,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsx(
+            List,
+            {
+              border: true,
+              rowStyles: {
+                padding: 1,
+                borderBottom: true
+              },
+              rows: [
+                {
+                  children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Box, { children: "Title1" }),
+                    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Box, { children: "Content1" }) })
+                  ] }),
+                  horizontalAlign: "between"
+                },
+                {
+                  children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        flexGrid: 1,
+                        children: "Title2"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        flexGrid: 2,
+                        children: /* @__PURE__ */ jsx(Box, { children: "Content2" })
+                      }
+                    )
+                  ] })
+                },
+                {
+                  children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Box, { children: "Title3" }),
+                    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Box, { children: "Content3" }) })
+                  ] }),
+                  flexType: "col"
+                },
+                {
+                  children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Box, { children: "Content4" }) }) }),
+                  borderBottom: "unset"
+                }
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { ssCardBox: true, children: [
+      /* @__PURE__ */ jsx(
+        Text.SubTitle,
+        {
+          padding: 1,
+          borderBottom: true,
+          children: "Sheet"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 1,
+          overflow: "auto",
+          children: /* @__PURE__ */ jsx(Text.Description, { children: `Sheet.open( {
   sheetID: 'sheetID',
   header: ReactElement | React.FC< { modalClose } >,
   body: ReactElement | React.FC< { modalClose } >,
   footer: ReactElement | React.FC< { modalClose } >
-} );`})}),t(h,{padding:2,children:[e(o,{flexCenter:!0,children:t(p,{gridCols:3,gap:1,children:[e(r.Button.Border.R,{onClick:()=>{a("normal.topLeft")},children:"Top Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.topCenter")},children:"Top Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.topRight")},children:"Top Right"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleLeft")},children:"Middle Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleCenter")},children:"Middle Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.middleRight")},children:"Middle Right"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomLeft")},children:"Bottom Left"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomCenter")},children:"Bottom Center"}),e(r.Button.Border.R,{onClick:()=>{a("normal.bottomRight")},children:"Bottom Right"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.left")},children:"Drawer Left"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.bottom")},children:"Drawer Bottom"}),e(r.Button.Border.R,{onClick:()=>{a("drawer.right")},children:"Drawer Right"}),e(r.Button.Border.R,{onClick:u=>{F.open({tipsID:"test40",content:e(o,{padding:1,border:!0,borderRadius:2,backgroundColor:"dark",fontColor:"white",children:"Content"}),parent:u.target})},children:"Open Tooltips"})]})}),t(B.Center,{children:["Image Picker",e(T,{src:l.Images.defaultIcon("user"),unitWidth:6,unitHeight:6,showExpand:!0})]})]})]})]})},D={_:()=>e(d,{children:t(h,{children:[e(D.Data,{}),e(D.Normal,{}),e(D.Drag,{}),e(D.Spread,{})]})}),Normal:()=>{let a=[];for(var u=0;u<10;u++){let s=[{children:"head_"+u},{children:"data_"+u},{children:"data_"+u}];a.push(s)}return t(d,{children:[e(o,{fontSize:"5.subTitle",children:"Table.Normal"}),e(b.Normal,{colLength:3,head:[{children:"head1"},{children:"head2"},{children:"head3"}],rows:a,ssCardBox:!0,onRowClick:s=>{console.log(s)}})]})},Drag:()=>{let a=[];for(var u=0;u<4;u++){let s=[{children:"head_"+u},{children:"data_"+u},{children:"data_"+u}];s.rowID="rowID-"+u,a.push(s)}return t(d,{children:[e(o,{fontSize:"5.subTitle",children:"Table.Drag"}),e(b.Drag,{colLength:3,head:[{children:"head1"},{children:"head2"},{children:"head3"}],rows:a,ssCardBox:!0,onOrderChanged:s=>{console.log(s)}})]})},Data:()=>{let a=[];for(var u=0;u<100;u++){let x=Math.round(Math.random()*50+1),I=Math.round(Math.random()*50+1),A=Math.round(Math.random()*50+1),m="name_"+x,W="data_"+I,E="data_"+A,N=[{type:"th",children:u+":"+m,data:m,orderIndex:u},{type:"td",children:W,data:W},{type:"td",children:E,data:E}];a.push(N)}a[1].checked=!0,a[4].checked=!0,a[10].checked=!0;let s="testDataTable";return t(d,{children:[t(c,{horizontalAlign:"between",children:[e(o,{fontSize:"5.subTitle",children:"Table.Data"}),t(c,{gap:"1/2",backgroundColor:"theme",borderRadius:"1.tone.primary",overflow:"hidden",fontColor:"white",children:[e(r.Button.Clear.R,{color:"white",children:"SubmitButton"}),e(o,{flexSizing:"none",unitWidth:"1/4",backgroundColor:"lcOpMiddle",isRounded:!0,margin:["2/3",0]}),e(r.Button.Clear.R,{padding:[0,1],color:"white",onClick:x=>{F.open({tipsID:w.uuid.gen(),parent:x.target,gravityPoint:24,close_option:{aroundClick:!0,parentBlur:!1},content:e(d,{children:t(h,{gap:0,padding:["2/3",0],backgroundColor:"1.layer.base",borderRadius:2,boxShadow:"0.normal",overflow:"hidden",children:[e(r.Button.Clear.S,{borderRadius:0,borderBottom:"1.thin",children:"\u3059\u3079\u3066\u3092\u51FA\u529B"}),e(r.Button.Clear.S,{borderRadius:0,borderBottom:"1.thin",children:"\u3053\u306E\u30DA\u30FC\u30B8\u306E\u307F\u51FA\u529B"}),e(r.Button.Clear.S,{borderRadius:0,children:"\u30C1\u30A7\u30C3\u30AF\u3057\u305F\u884C\u306E\u307F\u51FA\u529B"})]})})})},children:e(g.EllipsisV,{})})]})]}),t(B.Separate,{verticalAlign:"bottom",children:[t(B.Left,{verticalAlign:"bottom",children:[e(b.Data.SearchInput,{tableID:s}),e(b.Data.Info,{tableID:s})]}),t(B.Right,{verticalAlign:"unset",children:[e(b.Data.RowLength,{tableID:s,lengthSelect:[30,50,100]}),e(b.Data.Paging,{tableID:s})]})]}),e(b.Data,{tableID:s,colLength:3,head:[{data:"head1"},{data:"head2"},{data:"head3"}],rows:a,pageRowLength:30,ssCardBox:!0,filter:[!0],checker:!0})]})},Spread:()=>e(d,{children:e(o,{fontSize:"5.subTitle",children:"Table.Spread"})})},Q=()=>{let[a,u]=S.useState(""),[s,x]=S.useState(""),[I,A]=S.useState("");return e(d,{children:t(o,{children:[t(r.Button.Prime.R,{onClick:()=>{J.open({use:"square",develops:[{size:"S"},{size:"R"},{size:"L"}],onProcessFinished:m=>y(void 0,null,function*(){u(yield m[0].toDataUrl()),x(yield m[1].toDataUrl()),A(yield m[2].toDataUrl())})})},children:[e(g.Image,{})," \u30A4\u30E1\u30FC\u30B8\u3092\u9078\u629E"]}),t(c,{verticalAlign:"top",gap:1,children:[a&&e(T,{isRounded:!0,src:a,alt:"",showExpand:!0,freeCSS:{maxWidth:12*12}}),s&&e(T,{style:{maxWidth:24*12},src:s,alt:"",showExpand:!0}),I&&e(T,{style:{maxWidth:24*12},src:I,alt:"",showExpand:!0}),e(k.SwipeView,{border:!0,borderWidth:3,margin:[3,"auto"],freeCSS:{width:12*10},slideIndex:1,options:{loop:!0,onSlideCallback:m=>{}},slides:[e(o,{backgroundColor:"nega",padding:3,flexCenter:!0,children:"test1"}),e(o,{backgroundColor:"posi",padding:3,flexCenter:!0,children:"test2"}),e(o,{backgroundColor:"warn",padding:3,flexCenter:!0,children:"test3"}),e(o,{backgroundColor:"theme",padding:3,flexCenter:!0,children:"test4"})]})]})]})})},_=()=>{let[a,u]=S.useState(Number(w.getQueryParams().ti)||0);return S.useEffect(()=>{w.setQueryParam({key:"ti",value:a})},[a]),e(d,{children:t(h,{gap:0,minHeight:"contentHeight",backgroundColor:"1.layer.base",children:[e(k.TabBar,{borderBottom:!0,position:"sticky",backgroundColor:"1.layer.base",top:"topBase",tabIndex:a,tabs:["Profiles","Basic","Buttons","Inputs","Styling","Effection","Tables","Croppie","PlayGround","Logo"],onTabChange:s=>{localStorage.setItem("designTabHeader",String(s)),u(s)},UnderBreakPointStyles:{position:"static",top:0}}),e(o,{flexSizing:0,position:"relative",freeCSS:{zIndex:1},children:e(k.PageViewController,{viewIndex:a,views:[e(M._,{}),e(R._,{}),e(P._,{}),e(K,{}),e(j,{}),e(L._,{}),e(D._,{}),e(Q,{}),e(f._,{})],wrapper:s=>e(q.FadeIn,{animationTime:200,children:e(k.Plate,{children:e(c,{gap:2,padding:2,flexWrap:!0,flexChilds:"auto",children:s})})},a)})})]})})};export{_ as DesignBook,_ as default};
+} );` })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Column,
+        {
+          padding: 2,
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                flexCenter: true,
+                children: /* @__PURE__ */ jsxs(
+                  Grid,
+                  {
+                    gridCols: 3,
+                    gap: 1,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("normal.topLeft");
+                          },
+                          children: "Top Left"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("normal.topCenter");
+                          },
+                          children: "Top Center"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("normal.topRight");
+                          },
+                          children: "Top Right"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("normal.middleLeft");
+                          },
+                          children: "Middle Left"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("normal.middleCenter");
+                          },
+                          children: "Middle Center"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("normal.middleRight");
+                          },
+                          children: "Middle Right"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("normal.bottomLeft");
+                          },
+                          children: "Bottom Left"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("normal.bottomCenter");
+                          },
+                          children: "Bottom Center"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("normal.bottomRight");
+                          },
+                          children: "Bottom Right"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("drawer.left");
+                          },
+                          children: "Drawer Left"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("drawer.bottom");
+                          },
+                          children: "Drawer Bottom"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: () => {
+                            SheetContent("drawer.right");
+                          },
+                          children: "Drawer Right"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button.Button.Border.R,
+                        {
+                          onClick: (event) => {
+                            Tooltips.open({
+                              tipsID: "test40",
+                              content: /* @__PURE__ */ jsx(
+                                Box,
+                                {
+                                  padding: 1,
+                                  border: true,
+                                  borderRadius: 2,
+                                  backgroundColor: "dark",
+                                  fontColor: "white",
+                                  children: "Content"
+                                }
+                              ),
+                              parent: event.target
+                            });
+                          },
+                          children: "Open Tooltips"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(Row.Center, { children: [
+              "Image Picker",
+              /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: Logo.Images.defaultIcon("user"),
+                  unitWidth: 6,
+                  unitHeight: 6,
+                  showExpand: true
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const Tables = {
+  _: () => {
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Column, { children: [
+      /* @__PURE__ */ jsx(Tables.Data, {}),
+      /* @__PURE__ */ jsx(Tables.Normal, {}),
+      /* @__PURE__ */ jsx(Tables.Drag, {}),
+      /* @__PURE__ */ jsx(Tables.Spread, {})
+    ] }) });
+  },
+  Normal: () => {
+    let PureData = [];
+    for (var i = 0; i < 10; i++) {
+      let Row2 = [
+        { children: "head_" + i },
+        { children: "data_" + i },
+        { children: "data_" + i }
+      ];
+      PureData.push(Row2);
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { fontSize: "5.subTitle", children: "Table.Normal" }),
+      /* @__PURE__ */ jsx(
+        Table.Normal,
+        {
+          colLength: 3,
+          head: [
+            { children: "head1" },
+            { children: "head2" },
+            { children: "head3" }
+          ],
+          rows: PureData,
+          ssCardBox: true,
+          onRowClick: (rowID) => {
+            console.log(rowID);
+          }
+        }
+      )
+    ] });
+  },
+  Drag: () => {
+    let DragData = [];
+    for (var i = 0; i < 4; i++) {
+      let Row2 = [
+        { children: "head_" + i },
+        { children: "data_" + i },
+        { children: "data_" + i }
+      ];
+      Row2.rowID = "rowID-" + i;
+      DragData.push(Row2);
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { fontSize: "5.subTitle", children: "Table.Drag" }),
+      /* @__PURE__ */ jsx(
+        Table.Drag,
+        {
+          colLength: 3,
+          head: [
+            { children: "head1" },
+            { children: "head2" },
+            { children: "head3" }
+          ],
+          rows: DragData,
+          ssCardBox: true,
+          onOrderChanged: (args) => {
+            console.log(args);
+          }
+        }
+      )
+    ] });
+  },
+  Data: () => {
+    let DataData = [];
+    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 Row2 = [
+        {
+          type: "th",
+          children: i + ":" + Data1,
+          data: Data1,
+          orderIndex: i
+        },
+        {
+          type: "td",
+          children: Data2,
+          data: Data2
+        },
+        {
+          type: "td",
+          children: Data3,
+          data: Data3
+        }
+      ];
+      DataData.push(Row2);
+    }
+    DataData[1].checked = true;
+    DataData[4].checked = true;
+    DataData[10].checked = true;
+    let tableID = "testDataTable";
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          horizontalAlign: "between",
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                fontSize: "5.subTitle",
+                children: "Table.Data"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                gap: "1/2",
+                backgroundColor: "theme",
+                borderRadius: "1.tone.primary",
+                overflow: "hidden",
+                fontColor: "white",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Button.Button.Clear.R,
+                    {
+                      color: "white",
+                      children: "SubmitButton"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      flexSizing: "none",
+                      unitWidth: "1/4",
+                      backgroundColor: "lcOpMiddle",
+                      isRounded: true,
+                      margin: ["2/3", 0]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button.Button.Clear.R,
+                    {
+                      padding: [0, 1],
+                      color: "white",
+                      onClick: (event) => {
+                        Tooltips.open({
+                          tipsID: $$.uuid.gen(),
+                          parent: event.target,
+                          gravityPoint: 24,
+                          close_option: {
+                            aroundClick: true,
+                            parentBlur: false
+                          },
+                          content: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+                            Column,
+                            {
+                              gap: 0,
+                              padding: ["2/3", 0],
+                              backgroundColor: "1.layer.base",
+                              borderRadius: 2,
+                              boxShadow: "0.normal",
+                              overflow: "hidden",
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  Button.Button.Clear.S,
+                                  {
+                                    borderRadius: 0,
+                                    borderBottom: "1.thin",
+                                    children: "\u3059\u3079\u3066\u3092\u51FA\u529B"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  Button.Button.Clear.S,
+                                  {
+                                    borderRadius: 0,
+                                    borderBottom: "1.thin",
+                                    children: "\u3053\u306E\u30DA\u30FC\u30B8\u306E\u307F\u51FA\u529B"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  Button.Button.Clear.S,
+                                  {
+                                    borderRadius: 0,
+                                    children: "\u30C1\u30A7\u30C3\u30AF\u3057\u305F\u884C\u306E\u307F\u51FA\u529B"
+                                  }
+                                )
+                              ]
+                            }
+                          ) })
+                        });
+                      },
+                      children: /* @__PURE__ */ jsx(FAI.EllipsisV, {})
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Row.Separate,
+        {
+          verticalAlign: "bottom",
+          children: [
+            /* @__PURE__ */ jsxs(
+              Row.Left,
+              {
+                verticalAlign: "bottom",
+                children: [
+                  /* @__PURE__ */ jsx(Table.Data.SearchInput, { tableID }),
+                  /* @__PURE__ */ jsx(Table.Data.Info, { tableID })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Row.Right,
+              {
+                verticalAlign: "unset",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Table.Data.RowLength,
+                    {
+                      tableID,
+                      lengthSelect: [30, 50, 100]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Table.Data.Paging, { tableID })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Table.Data,
+        {
+          tableID,
+          colLength: 3,
+          head: [
+            { data: "head1" },
+            { data: "head2" },
+            { data: "head3" }
+          ],
+          rows: DataData,
+          pageRowLength: 30,
+          ssCardBox: true,
+          filter: [true],
+          checker: true
+        }
+      )
+    ] });
+  },
+  Spread: () => {
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Box, { fontSize: "5.subTitle", children: "Table.Spread" }) });
+  }
+};
+const Cropping = () => {
+  let [val_ImageUrl1, set_ImageUrl1] = React.useState("");
+  let [val_ImageUrl2, set_ImageUrl2] = React.useState("");
+  let [val_ImageUrl3, set_ImageUrl3] = React.useState("");
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(
+      Button.Button.Prime.R,
+      {
+        onClick: () => {
+          Cropper.open({
+            use: "square",
+            develops: [
+              {
+                size: "S"
+              },
+              {
+                size: "R"
+              },
+              {
+                size: "L"
+              }
+            ],
+            onProcessFinished: (develops) => __async(void 0, null, function* () {
+              set_ImageUrl1(yield develops[0].toDataUrl());
+              set_ImageUrl2(yield develops[1].toDataUrl());
+              set_ImageUrl3(yield develops[2].toDataUrl());
+            })
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx(FAI.Image, {}),
+          " \u30A4\u30E1\u30FC\u30B8\u3092\u9078\u629E"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Flex, { verticalAlign: "top", gap: 1, children: [
+      val_ImageUrl1 && /* @__PURE__ */ jsx(
+        Img,
+        {
+          isRounded: true,
+          src: val_ImageUrl1,
+          alt: "",
+          showExpand: true,
+          freeCSS: {
+            maxWidth: 12 * 12
+          }
+        }
+      ),
+      val_ImageUrl2 && /* @__PURE__ */ jsx(
+        Img,
+        {
+          style: {
+            maxWidth: 24 * 12
+          },
+          src: val_ImageUrl2,
+          alt: "",
+          showExpand: true
+        }
+      ),
+      val_ImageUrl3 && /* @__PURE__ */ jsx(
+        Img,
+        {
+          style: {
+            maxWidth: 24 * 12
+          },
+          src: val_ImageUrl3,
+          alt: "",
+          showExpand: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Layout.SwipeView,
+        {
+          border: true,
+          borderWidth: 3,
+          margin: [3, "auto"],
+          freeCSS: {
+            // maxWidth: 12 * 30
+            width: 12 * 10
+          },
+          slideIndex: 1,
+          options: {
+            loop: true,
+            onSlideCallback: (index) => {
+            }
+          },
+          slides: [
+            /* @__PURE__ */ jsx(Box, { backgroundColor: "nega", padding: 3, flexCenter: true, children: "test1" }),
+            /* @__PURE__ */ jsx(Box, { backgroundColor: "posi", padding: 3, flexCenter: true, children: "test2" }),
+            /* @__PURE__ */ jsx(Box, { backgroundColor: "warn", padding: 3, flexCenter: true, children: "test3" }),
+            /* @__PURE__ */ jsx(Box, { backgroundColor: "theme", padding: 3, flexCenter: true, children: "test4" })
+          ]
+        }
+      )
+    ] })
+  ] }) });
+};
+const DesignBook = () => {
+  let [val_tabIndex, set_tabIndex] = React.useState(Number($$.getQueryParams().ti) || 0);
+  React.useEffect(() => {
+    $$.setQueryParam({ key: "ti", value: val_tabIndex });
+  }, [val_tabIndex]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    Column,
+    {
+      gap: 0,
+      minHeight: "contentHeight",
+      backgroundColor: "1.layer.base",
+      children: [
+        /* @__PURE__ */ jsx(
+          Layout.TabBar,
+          {
+            borderBottom: true,
+            position: "sticky",
+            backgroundColor: "1.layer.base",
+            top: "topBase",
+            tabIndex: val_tabIndex,
+            tabs: [
+              "Profiles",
+              "Basic",
+              "Buttons",
+              "Inputs",
+              "Styling",
+              "Effection",
+              "Tables",
+              "Croppie",
+              "PlayGround",
+              "Logo"
+            ],
+            onTabChange: (index) => {
+              localStorage.setItem("designTabHeader", String(index));
+              set_tabIndex(index);
+            },
+            UnderBreakPointStyles: {
+              position: "static",
+              top: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            flexSizing: 0,
+            position: "relative",
+            freeCSS: {
+              zIndex: 1
+            },
+            children: /* @__PURE__ */ jsx(
+              Layout.PageViewController,
+              {
+                viewIndex: val_tabIndex,
+                views: [
+                  /* @__PURE__ */ jsx(Profiles._, {}),
+                  /* @__PURE__ */ jsx(Basic._, {}),
+                  /* @__PURE__ */ jsx(Buttons._, {}),
+                  /* @__PURE__ */ jsx(Inputs, {}),
+                  /* @__PURE__ */ jsx(Styling, {}),
+                  /* @__PURE__ */ jsx(Effections._, {}),
+                  /* @__PURE__ */ jsx(Tables._, {}),
+                  /* @__PURE__ */ jsx(Cropping, {}),
+                  /* @__PURE__ */ jsx(Logos._, {})
+                ],
+                wrapper: (View) => {
+                  return /* @__PURE__ */ jsx(
+                    Effect.FadeIn,
+                    {
+                      animationTime: 200,
+                      children: /* @__PURE__ */ jsx(Layout.Plate, { children: /* @__PURE__ */ jsx(
+                        Flex,
+                        {
+                          gap: 2,
+                          padding: 2,
+                          flexWrap: true,
+                          flexChilds: "auto",
+                          children: View
+                        }
+                      ) })
+                    },
+                    val_tabIndex
+                  );
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  DesignBook,
+  DesignBook as default
+};