@colisweb/rescript-toolkit 2.8.2 → 2.9.0-mobile

package/lib/es6_global/stories/Toolkit__UI_RichTextStory.bs.js

@@ -0,0 +1,44 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Toolkit__Ui_RichText from "../src/ui/Toolkit__Ui_RichText.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_RichTextResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_RichText.resi";
+
+var $$default = Storybook.CSF.make("Components/RichText", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function sample(param) {
+  return React.createElement("div", {
+              className: "flex flex-col gap-4"
+            }, React.createElement(Toolkit__Ui_RichText.make, {
+                  text: "test"
+                }), React.createElement(Toolkit__Ui_RichText.make, {
+                  text: "\n    <h1>\n      test 2\n    </h1>\n  "
+                }), React.createElement(Toolkit__Ui_RichText.make, {
+                  text: "https://www.colisweb.com"
+                }));
+}
+
+Storybook.CSF.addMeta(sample, "sample", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_RichTextResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<div>\n    <RichText text=\"test\" />\n  </div>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-label--sample"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  sample ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_SelectStory.bs.js

@@ -0,0 +1,135 @@
+
+
+import * as Cx from "../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.js";
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import ReactSelect from "react-select";
+import * as BsReactSelect from "../src/vendors/BsReactSelect.bs.js";
+import * as Toolkit__Ui_Label from "../src/ui/Toolkit__Ui_Label.bs.js";
+import * as Toolkit__Ui_Select from "../src/ui/Toolkit__Ui_Select.bs.js";
+import * as AddonKnobs from "@storybook/addon-knobs";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_SelectResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Select.resi";
+
+var $$default = Storybook.CSF.make("Form/Select", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function $$native(param) {
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Label.make, {
+                  htmlFor: "test",
+                  optionalMessage: "Optional",
+                  children: "Label"
+                }), React.createElement(Toolkit__Ui_Select.make, {
+                  options: [
+                    [
+                      "label",
+                      "value",
+                      true
+                    ],
+                    [
+                      "label2",
+                      "value2",
+                      true
+                    ],
+                    [
+                      "label disabled",
+                      "value3",
+                      false
+                    ]
+                  ],
+                  onChange: (function (param) {
+                      
+                    }),
+                  placeholder: "This is a placeholder",
+                  id: "test"
+                }));
+}
+
+Storybook.CSF.addMeta($$native, "native", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_SelectResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<div>\n  <Label htmlFor=\"test\" optionalMessage={\"Optional\"->React.string}>\n    \"Label\"->React.string\n  </Label>\n  <Select\n    onChange={_ => ()}\n    id=\"test\"\n    placeholder=\"This is a placeholder\"\n    options=[|\n      (\"label\", \"value\", true),\n      (\"label2\"->React.string, \"value2\", true),\n      (\"label disabled\"->React.string, \"value3\", false),\n    |]\n  />\n</div>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-select--native"
+                          }));
+          })
+      }
+    }, undefined);
+
+function reactSelect(param) {
+  var options = [
+    {
+      label: "Label",
+      value: "value"
+    },
+    {
+      label: "Label2",
+      value: "value2"
+    },
+    {
+      label: "Label3",
+      value: "value3"
+    }
+  ];
+  var isDisabled = AddonKnobs.boolean("isDisabled", false);
+  var isInvalid = AddonKnobs.boolean("isInvalid", false);
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Label.make, {
+                  htmlFor: "test",
+                  optionalMessage: "Optional",
+                  children: "Label"
+                }), React.createElement(ReactSelect, {
+                  name: "test",
+                  isDisabled: isDisabled,
+                  placeholder: "Placeholder",
+                  className: Cx.cx([isInvalid ? "errored" : ""]),
+                  classNamePrefix: "react-select",
+                  onChange: (function (v) {
+                      console.log(v);
+                      
+                    }),
+                  options: options
+                }), React.createElement("div", {
+                  className: "h-10"
+                }), React.createElement(Toolkit__Ui_Label.make, {
+                  htmlFor: "test2",
+                  optionalMessage: "Optional",
+                  children: "Searchable select with multiple value"
+                }), React.createElement(BsReactSelect.ReactSelectMultiple.make, {
+                  name: "test2",
+                  isDisabled: isDisabled,
+                  placeholder: "Placeholder",
+                  className: Cx.cx([isInvalid ? "errored" : ""]),
+                  classNamePrefix: "react-select",
+                  defaultValue: [],
+                  onChange: (function (v) {
+                      console.log(v);
+                      
+                    }),
+                  options: options
+                }));
+}
+
+Storybook.CSF.addMeta(reactSelect, "react-select", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\nopen BsReactSelect;\nlet options = [|\n  {label: \"Label\", value: \"value\"},\n  {label: \"Label2\", value: \"value2\"},\n  {label: \"Label3\", value: \"value3\"},\n|];\n\nlet isDisabled = Knobs.boolean(\"isDisabled\", false);\nlet isInvalid = Knobs.boolean(\"isInvalid\", false);\n\n<div>\n  <Label htmlFor=\"test\" optionalMessage={\"Optional\"->React.string}>\n    \"Label\"->React.string\n  </Label>\n  <ReactSelect\n    name=\"test\"\n    isDisabled\n    classNamePrefix=\"react-select\"\n    className={cx([isInvalid ? \"errored\" : \"\"])}\n    placeholder=\"Placeholder\"\n    onChange={v => Js.log(v)}\n    options\n  />\n  <div className=\"h-10\" />\n  <Label htmlFor=\"test2\" optionalMessage={\"Optional\"->React.string}>\n    \"Searchable select with multiple value\"->React.string\n  </Label>\n  <ReactSelectMultiple\n    name=\"test2\"\n    isDisabled\n    defaultValue=[||]\n    classNamePrefix=\"react-select\"\n    className={cx([isInvalid ? \"errored\" : \"\"])}\n    placeholder=\"Placeholder\"\n    onChange={v => Js.log(v)}\n    options\n  />\n</div>;\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-select--react-select"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  $$native ,
+  reactSelect ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_SnackbarStory.bs.js

@@ -0,0 +1,120 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Caml_option from "../../../node_modules/rescript/lib/es6/caml_option.js";
+import * as Toolkit__Ui_Button from "../src/ui/Toolkit__Ui_Button.bs.js";
+import * as Toolkit__Ui_Snackbar from "../src/ui/Toolkit__Ui_Snackbar.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_SnackbarResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Snackbar.resi";
+
+var $$default = Storybook.CSF.make("Components/Snackbar", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function success(param) {
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Snackbar.Provider.make, {}), React.createElement("div", {
+                  className: "mb-4 flex flex-row flex-col-gap-4"
+                }, React.createElement("span", undefined, React.createElement(Toolkit__Ui_Button.make, {
+                          onClick: (function (param) {
+                              Toolkit__Ui_Snackbar.show("Success", undefined, undefined, "success", undefined, undefined);
+                              
+                            }),
+                          children: "Success"
+                        })), React.createElement("span", undefined, React.createElement(Toolkit__Ui_Button.make, {
+                          onClick: (function (param) {
+                              Toolkit__Ui_Snackbar.show("Success", "Description", undefined, "success", undefined, undefined);
+                              
+                            }),
+                          children: "Success with description"
+                        }))));
+}
+
+Storybook.CSF.addMeta(success, "success", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_SnackbarResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<div>\n    <Snackbar.Provider />\n    <div className=\"mb-4 flex flex-row flex-col-gap-4\">\n      <span>\n        <Button\n          onClick={_ =>\n            Snackbar.show(~title=\"Success\", ~variant=#success, ())\n          }>\n          \"Success\"->React.string\n        </Button>\n      </span>\n      <span>\n        <Button\n          onClick={_ =>\n            Snackbar.show(\n              ~title=\"Success\",\n              ~description=\"Description\"->React.string,\n              ~variant=#success,\n              (),\n            )\n          }>\n          \"Success with description\"->React.string\n        </Button>\n      </span>\n    </div>\n  </div>;\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-snackbar--success"
+                          }));
+          })
+      }
+    }, undefined);
+
+function warning(param) {
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Snackbar.Provider.make, {}), React.createElement("div", {
+                  className: "mb-4 flex flex-row flex-col-gap-4"
+                }, React.createElement("span", undefined, React.createElement(Toolkit__Ui_Button.make, {
+                          onClick: (function (param) {
+                              Toolkit__Ui_Snackbar.show("warning", undefined, undefined, "warning", undefined, undefined);
+                              
+                            }),
+                          children: "warning"
+                        })), React.createElement("span", undefined, React.createElement(Toolkit__Ui_Button.make, {
+                          onClick: (function (param) {
+                              Toolkit__Ui_Snackbar.show("warning", "Description", undefined, "warning", undefined, undefined);
+                              
+                            }),
+                          children: "warning with description"
+                        }))));
+}
+
+Storybook.CSF.addMeta(warning, "warning", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_SnackbarResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<div>\n  <Snackbar.Provider />\n  <div className=\"mb-4 flex flex-row flex-col-gap-4\">\n    <span>\n      <Button\n        onClick={_ =>\n          Snackbar.show(~title=\"warning\", ~variant=#warning, ())\n        }>\n        \"warning\"->React.string\n      </Button>\n    </span>\n    <span>\n      <Button\n        onClick={_ =>\n          Snackbar.show(\n            ~title=\"warning\",\n            ~description=\"Description\"->React.string,\n            ~variant=#warning,\n            (),\n          )\n        }>\n        \"warning with description\"->React.string\n      </Button>\n    </span>\n  </div>\n</div>;\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-snackbar--warning"
+                          }));
+          })
+      }
+    }, undefined);
+
+function danger(param) {
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Snackbar.Provider.make, {}), React.createElement("div", {
+                  className: "mb-4 flex flex-row flex-col-gap-4"
+                }, React.createElement("span", undefined, React.createElement(Toolkit__Ui_Button.make, {
+                          onClick: (function (param) {
+                              Toolkit__Ui_Snackbar.show("danger", undefined, undefined, "danger", undefined, undefined);
+                              
+                            }),
+                          children: "danger"
+                        })), React.createElement("span", undefined, React.createElement(Toolkit__Ui_Button.make, {
+                          onClick: (function (param) {
+                              Toolkit__Ui_Snackbar.show("danger title pretty long", Caml_option.some(React.createElement("div", undefined, React.createElement("p", undefined, "Description with some text"))), undefined, "danger", undefined, undefined);
+                              
+                            }),
+                          children: "danger with description"
+                        }))));
+}
+
+Storybook.CSF.addMeta(danger, "danger", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_SnackbarResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<div>\n  <Snackbar.Provider />\n  <div className=\"mb-4 flex flex-row flex-col-gap-4\">\n    <span>\n      <Button\n        onClick={_ => Snackbar.show(~title=\"danger\", ~variant=#danger, ())}>\n        \"danger\"->React.string\n      </Button>\n    </span>\n    <span>\n      <Button\n        onClick={_ =>\n          Snackbar.show(\n            ~title=\"danger\",\n            ~description=\"Description\"->React.string,\n            ~variant=#danger,\n            (),\n          )\n        }>\n        \"danger with description\"->React.string\n      </Button>\n    </span>\n  </div>\n</div>;\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-snackbar--danger"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  success ,
+  warning ,
+  danger ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_SpinnerStory.bs.js

@@ -0,0 +1,113 @@
+
+
+import * as React from "react";
+import * as Js_dict from "../../../node_modules/rescript/lib/es6/js_dict.js";
+import * as Storybook from "./Storybook.bs.js";
+import * as Belt_Array from "../../../node_modules/rescript/lib/es6/belt_Array.js";
+import * as Toolkit__Ui_Spinner from "../src/ui/Toolkit__Ui_Spinner.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_SpinnerResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Spinner.resi";
+
+var $$default = Storybook.CSF.make("Components/Spinner", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function defaultPalette(param) {
+  var colors = Js_dict.fromArray([
+        [
+          "current",
+          "current"
+        ],
+        [
+          "black",
+          "black"
+        ],
+        [
+          "white",
+          "white"
+        ],
+        [
+          "gray",
+          "gray"
+        ],
+        [
+          "success",
+          "success"
+        ],
+        [
+          "primary",
+          "primary"
+        ],
+        [
+          "warning",
+          "warning"
+        ],
+        [
+          "info",
+          "info"
+        ],
+        [
+          "danger",
+          "danger"
+        ]
+      ]);
+  var sizes = Js_dict.fromArray([
+        [
+          "sm",
+          "sm"
+        ],
+        [
+          "md",
+          "md"
+        ],
+        [
+          "lg",
+          "lg"
+        ],
+        [
+          "xl",
+          "xl"
+        ]
+      ]);
+  return React.createElement("div", undefined, Belt_Array.mapWithIndex(Js_dict.entries(colors), (function (i, param) {
+                    var color = param[1];
+                    var colorText = param[0];
+                    return React.createElement("div", {
+                                key: String(i) + colorText,
+                                className: "flex flex-row flex-col-gap-4 mb-4 items-center"
+                              }, React.createElement("strong", {
+                                    className: "w-40"
+                                  }, colorText), React.createElement("div", {
+                                    className: "flex items-center flex-col-gap-6 mb-2"
+                                  }, Belt_Array.mapWithIndex(Js_dict.entries(sizes), (function (k, param) {
+                                          return React.createElement("div", {
+                                                      key: String(i + k | 0) + (colorText + param[0])
+                                                    }, React.createElement(Toolkit__Ui_Spinner.make, {
+                                                          size: param[1],
+                                                          color: color
+                                                        }));
+                                        }))));
+                  })));
+}
+
+Storybook.CSF.addMeta(defaultPalette, "default palette", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_SpinnerResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n            <Spinner color=#primary size=#md />\n          "
+                          }), React.createElement(Toolkit__Ui_Spinner.make, {
+                            size: "md",
+                            color: "primary"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  defaultPalette ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_SwitchStory.bs.js

@@ -0,0 +1,43 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Toolkit__Ui_Switch from "../src/ui/Toolkit__Ui_Switch.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_SwitchResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Switch.resi";
+
+var $$default = Storybook.CSF.make("Form/Switch", undefined, undefined, undefined, undefined, undefined, undefined);
+
+function sample(param) {
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Switch.make, {
+                  size: "md"
+                }), React.createElement(Toolkit__Ui_Switch.make, {
+                  size: "lg",
+                  checkedClassName: "border-info-500",
+                  label: React.createElement("p", undefined, "simple label"),
+                  className: "border p-1 rounded"
+                }));
+}
+
+Storybook.CSF.addMeta(sample, "sample", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_SwitchResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\n<div>\n  <Switch size=#md />\n  <Switch size=#lg />\n</div>\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "form-switch--sample"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  sample ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_TableStory.bs.js

@@ -0,0 +1,74 @@
+
+
+import * as React from "react";
+import * as Storybook from "./Storybook.bs.js";
+import * as Belt_Array from "../../../node_modules/rescript/lib/es6/belt_Array.js";
+import * as ReactTable from "react-table";
+import * as Toolkit__Ui_Table from "../src/ui/Toolkit__Ui_Table.bs.js";
+import * as Blocks from "@storybook/addon-docs/blocks";
+import Toolkit__Ui_TableResi from "!!raw-loader!../../../src/ui/Toolkit__Ui_Table.resi";
+
+var $$default = Storybook.CSF.make("Components/Table", undefined, undefined, undefined, undefined, undefined, undefined);
+
+var data = Belt_Array.make(100, [
+      {
+        name: "toto",
+        age: 2
+      },
+      {}
+    ]);
+
+function Toolkit__UI_TableStory$Test(Props) {
+  var columns = React.useMemo((function () {
+          return [{
+                    accessor: (function (param) {
+                        return param[0].name;
+                      }),
+                    id: "test",
+                    header: "Name",
+                    filterRender: (function (param) {
+                        return null;
+                      }),
+                    cell: (function (cell) {
+                        return React.createElement("p", undefined, cell.cell.value);
+                      })
+                  }];
+        }), []);
+  var table = ReactTable.useTable({
+        columns: columns,
+        data: data
+      }, ReactTable.useFilters, ReactTable.useSortBy, ReactTable.usePagination, ReactTable.useAbsoluteLayout, ReactTable.useResizeColumns);
+  return React.createElement("div", undefined, React.createElement(Toolkit__Ui_Table.Pagination.make, {
+                  table: table
+                }), React.createElement(Toolkit__Ui_Table.Core.make, {
+                  table: table,
+                  emptyMessage: "No items"
+                }));
+}
+
+function example(param) {
+  return React.createElement(Toolkit__UI_TableStory$Test, {});
+}
+
+Storybook.CSF.addMeta(example, "example", undefined, {
+      docs: {
+        page: (function (param) {
+            return React.createElement(React.Fragment, undefined, React.createElement(Storybook.CodeBlock.make, {
+                            children: Toolkit__Ui_TableResi
+                          }), React.createElement(Blocks.Source, {
+                            language: "rescript",
+                            code: "\nlet data: data =\n    Array.make(100, ({name: \"toto\", age: 2}, Js.Dict.empty()));\n\n  [@react.component]\n  let make = () => {\n    let columns =\n      React.useMemo0(() => {\n        [|\n          ReactTable.makeColumn(\n            ~accessor=((value, _dict)) => value.name,\n            ~id=\"test\",\n            ~header=\"Name\"->React.string,\n            ~filterRender=_ => React.null,\n            ~cell=cell => {<p> cell.cell.value->React.string </p>},\n            (),\n          ),\n        |]\n      });\n\n    let table =\n      ReactTable.(\n        useTable5(\n          make(~columns, ~data, ()),\n          useFilters,\n          useSortBy,\n          usePagination,\n          useAbsoluteLayout,\n          useResizeColumns,\n        )\n      );\n\n    <div>\n      <Toolkit__Ui_Table.Pagination table />\n      <Toolkit__Ui_Table.Core table emptyMessage=\"No items\" />\n    </\n          "
+                          }), React.createElement(Blocks.Story, {
+                            id: "components-table--example"
+                          }));
+          })
+      }
+    }, undefined);
+
+export {
+  $$default ,
+  $$default as default,
+  example ,
+  
+}
+/* default Not a pure module */

package/lib/es6_global/stories/Toolkit__UI_TabsStory.bs.js

@@ -0,0 +1,75 @@
+
+
+import * as React from "react";
+import * as Tabs from "@reach/tabs";
+import * as React$1 from "@storybook/react";
+import * as AddonKnobs from "@storybook/addon-knobs";
+
+var _module = module;
+
+React$1.storiesOf("Components/Tabs", _module).addDecorator(AddonKnobs.withKnobs).add("default", (function (param) {
+            return React.createElement("div", undefined, React.createElement(Tabs.Tabs, {
+                            children: null,
+                            className: "flex flex-col"
+                          }, React.createElement(Tabs.TabList, {
+                                children: null,
+                                className: "cw-Tabs"
+                              }, React.createElement(Tabs.Tab, {
+                                    children: "Tab 1"
+                                  }), React.createElement(Tabs.Tab, {
+                                    children: "Tab 2"
+                                  })), React.createElement(Tabs.TabPanels, {
+                                children: null,
+                                className: "mt-4"
+                              }, React.createElement(Tabs.TabPanel, {
+                                    children: "Panel 1"
+                                  }), React.createElement(Tabs.TabPanel, {
+                                    children: "Panel 2"
+                                  }))));
+          })).add("big", (function (param) {
+          return React.createElement("div", undefined, React.createElement(Tabs.Tabs, {
+                          children: null,
+                          className: "flex flex-col"
+                        }, React.createElement(Tabs.TabList, {
+                              children: null,
+                              className: "cw-Tabs cw-Tabs--big"
+                            }, React.createElement(Tabs.Tab, {
+                                  children: "Tab 1"
+                                }), React.createElement(Tabs.Tab, {
+                                  children: "Tab 2"
+                                })), React.createElement(Tabs.TabPanels, {
+                              children: null,
+                              className: "mt-4"
+                            }, React.createElement(Tabs.TabPanel, {
+                                  children: "Panel 1"
+                                }), React.createElement(Tabs.TabPanel, {
+                                  children: "Panel 2"
+                                }))));
+        })).add("with render", (function (param) {
+        return React.createElement("div", undefined, React.createElement(Tabs.Tabs, {
+                        children: (function (param) {
+                            return React.createElement(React.Fragment, undefined, "selected index : " + String(param.selectedIndex), React.createElement(Tabs.TabList, {
+                                            children: null,
+                                            className: "cw-Tabs"
+                                          }, React.createElement(Tabs.Tab, {
+                                                children: "Tab 1"
+                                              }), React.createElement(Tabs.Tab, {
+                                                children: "Tab 2"
+                                              })), React.createElement(Tabs.TabPanels, {
+                                            children: null,
+                                            className: "mt-4"
+                                          }, React.createElement(Tabs.TabPanel, {
+                                                children: "Panel 1"
+                                              }), React.createElement(Tabs.TabPanel, {
+                                                children: "Panel 2"
+                                              })));
+                          }),
+                        className: "flex flex-col"
+                      }));
+      }));
+
+export {
+  _module ,
+  
+}
+/* _module Not a pure module */