matsuri-ui 9.7.2-alpha.0

package/dist/esm/Table/useTable.js

@@ -0,0 +1,308 @@
+var _excluded = ["data"],
+    _excluded2 = ["subRows"],
+    _excluded3 = ["subRows"],
+    _excluded4 = ["cell", "row"],
+    _excluded5 = ["cell", "row"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var isAllRowSelected = false;
+export var useTable = _ref => {
+  var _props$initialState, _props$initialState2;
+
+  var {
+    data
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var columns = useRef(props.columns);
+  var [filterValues, setFilters] = useState({});
+
+  var makeSetFilter = accessor => value => {
+    setFilters(prev => {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        [accessor]: value
+      });
+    });
+  };
+
+  var toggleAllRowsSelected = useCallback(() => {
+    setRows(prev => {
+      var copy = prev.slice();
+      isAllRowSelected = !isAllRowSelected;
+      return copy.map(row => _objectSpread(_objectSpread({}, row), {}, {
+        isSelected: isAllRowSelected
+      }));
+    });
+  }, []);
+  var headers = useMemo(() => {
+    return Object.entries(columns.current).map(_ref2 => {
+      var [accessor, {
+        Header,
+        width,
+        minWidth,
+        maxWidth,
+        align
+      }] = _ref2;
+      return {
+        key: accessor,
+        style: {
+          width,
+          minWidth,
+          maxWidth,
+          textAlign: align
+        },
+        render: typeof Header === "string" ? () => {
+          return Header;
+        } : () => {
+          return Header({
+            toggleAllRowsSelected,
+            setFilters,
+            filterValues,
+            column: {
+              filterValue: filterValues[accessor],
+              setFilter: makeSetFilter(accessor)
+            }
+          });
+        }
+      };
+    });
+  }, [filterValues, toggleAllRowsSelected]);
+  var dataToProps = useCallback(data => {
+    return data.map((_ref3, key) => {
+      var {
+        subRows
+      } = _ref3,
+          cells = _objectWithoutProperties(_ref3, _excluded2);
+
+      var canExpand = Boolean(subRows);
+      var path = [key];
+      return {
+        key: path.join("."),
+        path,
+        values: cells,
+        isSelected: false,
+        canExpand,
+        isExpanded: false,
+        subRows
+      };
+    });
+  }, []);
+  var [propsMap, setPropsMap] = useState(dataToProps(data));
+  useEffect(() => {
+    setPropsMap(dataToProps(data));
+  }, [data, dataToProps]);
+  var [rows, setRows] = useState([]);
+  useEffect(() => {
+    var newRows = [];
+    propsMap.forEach(props => {
+      var {
+        isExpanded,
+        subRows,
+        path
+      } = props;
+      var cells = [];
+
+      var _loop = function _loop(i) {
+        var {
+          key
+        } = headers[i];
+        var value = props.values[key];
+        var column = columns.current[key];
+        if (column === undefined) return "break";
+        var {
+          Cell
+        } = column;
+        var contentProps = {
+          cell: {
+            value
+          },
+          row: props
+        };
+        cells.push({
+          key,
+          props: contentProps,
+          style: {
+            textAlign: column.cellAlign
+          },
+          Content: Cell || (_ref7 => {
+            var {
+              cell,
+              row
+            } = _ref7,
+                thisProps = _objectWithoutProperties(_ref7, _excluded5);
+
+            return ___EmotionJSX("div", thisProps, value);
+          }),
+          render: Cell !== undefined ? Cell.bind(null, contentProps) : () => value
+        });
+      };
+
+      for (var i = 0; i < headers.length; i++) {
+        var _ret = _loop(i);
+
+        if (_ret === "break") break;
+      }
+
+      newRows.push(_objectSpread(_objectSpread({}, props), {}, {
+        cells
+      }));
+
+      if (isExpanded && subRows) {
+        subRows.forEach((_ref4, key) => {
+          var {
+            subRows: sub
+          } = _ref4,
+              values = _objectWithoutProperties(_ref4, _excluded3);
+
+          var path = [...props.path, key];
+          var canExpand = false;
+          var subRowProps = {
+            canExpand,
+            values,
+            isExpanded: false,
+            isSelected: false,
+            subRows: undefined,
+            path,
+            key: path.join(".")
+          };
+          newRows.push(_objectSpread(_objectSpread({}, subRowProps), {}, {
+            cells: Object.entries(props.values).map(_ref5 => {
+              var [accessor, value] = _ref5;
+              var column = columns.current[accessor];
+
+              if (column) {
+                var {
+                  Cell: _Cell
+                } = column;
+                var contentProps = {
+                  cell: {
+                    value
+                  },
+                  row: props
+                };
+                return {
+                  key: accessor,
+                  render: _Cell !== undefined ? _Cell.bind(null, contentProps) : () => value,
+                  props: contentProps,
+                  Content: _Cell || (_ref6 => {
+                    var {
+                      cell,
+                      row
+                    } = _ref6,
+                        thisProps = _objectWithoutProperties(_ref6, _excluded4);
+
+                    return ___EmotionJSX("div", thisProps, value);
+                  })
+                };
+              } else {
+                return undefined;
+              }
+            }).filter(cell => cell !== undefined)
+          }));
+        });
+      } else {
+        newRows = newRows.filter(row => {
+          return row.path.length === 1 || row.path[0] !== path[0];
+        });
+      }
+    });
+    setRows(newRows);
+  }, [headers, propsMap]);
+  var toggleRowSelected = useCallback((toggleRows, flag) => {
+    setRows(prev => {
+      var copy = prev.slice();
+      toggleRows.forEach(toggleRow => {
+        copy[toggleRow].isSelected = flag === undefined ? !copy[toggleRow].isSelected : flag;
+      });
+      return copy;
+    });
+  }, []);
+  var toggleRowExpanded = useCallback((toggleRows, flag) => {
+    setPropsMap(prev => {
+      var copy = prev.slice();
+      toggleRows.forEach(toggleRow => {
+        var _copy$index;
+
+        var index = copy.findIndex(row => row.key === toggleRow);
+
+        if ((_copy$index = copy[index]) !== null && _copy$index !== void 0 && _copy$index.canExpand) {
+          copy[index].isExpanded = flag === undefined ? !copy[toggleRow].isExpanded : flag;
+        }
+      });
+      return copy;
+    });
+  }, []);
+  var [pageIndex, setPageIndex] = useState(((_props$initialState = props.initialState) === null || _props$initialState === void 0 ? void 0 : _props$initialState.pageIndex) || 0);
+  var [pageSize, setPageSize] = useState(((_props$initialState2 = props.initialState) === null || _props$initialState2 === void 0 ? void 0 : _props$initialState2.pageSize) || 10);
+  var canPreviousPage = useMemo(() => pageIndex !== 0, [pageIndex]);
+  var canNextPage = useMemo(() => Math.floor(data.length / pageSize) > pageIndex + 1, [data.length, pageIndex, pageSize]);
+  var nextPage = useCallback(() => {
+    setPageIndex(prev => prev + 1);
+  }, []);
+  var previousPage = useCallback(() => {
+    setPageIndex(prev => prev - 1);
+  }, []);
+  var [filteredRows, setFilteredRows] = useState([]);
+  useEffect(() => {
+    var fv = Object.entries(filterValues);
+    setFilteredRows(rows.filter(row => {
+      var values = Object.entries(row.values);
+      var flag = true;
+
+      firstLoop: for (var i = 0; i < fv.length; i++) {
+        var _columns$current$_acc;
+
+        var [_accessor, filterValue] = fv[i];
+        var filter = (_columns$current$_acc = columns.current[_accessor]) === null || _columns$current$_acc === void 0 ? void 0 : _columns$current$_acc.filter;
+
+        if (filter === undefined) {
+          throw new Error("Set columns.".concat(_accessor, ".filter"));
+        }
+
+        for (var j = 0; j < values.length; j++) {
+          var [key, _value] = values[j];
+          if (key !== _accessor) continue;
+
+          if (filter(_value, {
+            column: {
+              filterValue
+            }
+          }) === false) {
+            flag = false;
+            break firstLoop;
+          }
+        }
+      }
+
+      return flag;
+    }));
+  }, [filterValues, rows]);
+  var page = useMemo(() => filteredRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize), [filteredRows, pageIndex, pageSize]);
+  return {
+    canPreviousPage,
+    canNextPage,
+    gotoPage: setPageIndex,
+    nextPage,
+    setPageSize,
+    previousPage,
+    pageIndex,
+    headers,
+    rows: filteredRows,
+    page,
+    toggleRowSelected,
+    toggleAllRowsSelected,
+    toggleRowExpanded
+  };
+};
+//# sourceMappingURL=useTable.js.map

package/dist/esm/Table/useTable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Table/useTable.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","isAllRowSelected","useTable","data","props","columns","filterValues","setFilters","makeSetFilter","accessor","value","prev","toggleAllRowsSelected","setRows","copy","slice","map","row","isSelected","headers","Object","entries","current","Header","width","minWidth","maxWidth","align","key","style","textAlign","render","column","filterValue","setFilter","dataToProps","subRows","cells","canExpand","Boolean","path","join","values","isExpanded","propsMap","setPropsMap","rows","newRows","forEach","i","undefined","Cell","contentProps","cell","push","cellAlign","Content","thisProps","bind","length","sub","subRowProps","filter","toggleRowSelected","toggleRows","flag","toggleRow","toggleRowExpanded","index","findIndex","pageIndex","setPageIndex","initialState","pageSize","setPageSize","canPreviousPage","canNextPage","Math","floor","nextPage","previousPage","filteredRows","setFilteredRows","fv","firstLoop","Error","j","page","gotoPage"],"mappings":"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","sourcesContent":["import { CSSObject } from \"@emotion/react\"\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\ntype Values<S> = Pick<S, Exclude<keyof S, \"subRows\">>\n\ninterface Props<S> {\n    key: string\n    path: number[]\n    values: Values<S>\n    isSelected: boolean\n    canExpand: boolean\n    isExpanded: boolean\n    subRows: S[] | undefined\n}\n\ninterface Cell {\n    key: string\n    props: UseTableCellProps<any, any>\n    style: React.CSSProperties & CSSObject\n    render: () => React.ReactElement<any, any> | null\n    Content: (\n        props: React.HTMLProps<HTMLDivElement> & UseTableCellProps<any, any>\n    ) => React.ReactElement<any, any> | null\n}\ninterface Row<S> extends Props<S> {\n    cells: Cell[]\n}\n\ntype Rows<S> = Row<S>[]\n\nexport interface UseTableCellProps<S, K extends keyof S> {\n    cell: {\n        value: S[K]\n    }\n    row: Props<S>\n}\n\nlet isAllRowSelected = false\n\nexport type TableCell<S, K extends keyof S> = (props: UseTableCellProps<S, K>) => JSX.Element\n\ntype ColumnLayoutProperties = {\n    width?: string | number\n    minWidth?: string | number\n    maxWidth?: string | number\n    align?: React.CSSProperties[\"textAlign\"]\n    cellAlign?: React.CSSProperties[\"textAlign\"]\n}\n\ntype Column<S, K extends keyof S> = {\n    Header:\n        | string\n        | React.FC<{\n              toggleAllRowsSelected: () => void\n              filterValues: Values<S>\n              setFilters: (values: Values<S>) => void\n              column: {\n                  filterValue: S[K]\n                  setFilter: (value: S[K]) => void\n              }\n          }>\n    Cell?: React.VFC<UseTableCellProps<S, K>>\n    filter?: (\n        value: S[K],\n        args: {\n            column: {\n                filterValue: S[K]\n            }\n        }\n    ) => boolean\n} & ColumnLayoutProperties\n\nexport type TableColumns<S> = {\n    [K in keyof S]?: Column<S, K>\n}\n\nexport const useTable = <\n    S extends {\n        [accessor: string]: any\n        subRows?: S[]\n    }\n>({\n    data,\n    ...props\n}: {\n    columns: {\n        [K in keyof S]?: Column<S, K>\n    }\n    data: S[]\n    initialState?: { pageIndex?: number; pageSize?: number }\n}) => {\n    const columns = useRef(props.columns)\n\n    const [filterValues, setFilters] = useState({} as Pick<S, Exclude<keyof S, \"subRows\">>)\n\n    const makeSetFilter = (accessor: string) => (value: any) => {\n        setFilters((prev) => {\n            return {\n                ...prev,\n                [accessor]: value\n            }\n        })\n    }\n\n    const toggleAllRowsSelected = useCallback(() => {\n        setRows((prev) => {\n            const copy = prev.slice()\n            isAllRowSelected = !isAllRowSelected\n            return copy.map((row) => ({\n                ...row,\n                isSelected: isAllRowSelected\n            }))\n        })\n    }, [])\n\n    const headers = useMemo(() => {\n        return Object.entries(columns.current).map(\n            ([accessor, { Header, width, minWidth, maxWidth, align }]: [\n                string,\n                {\n                    Header: (props: any) => JSX.Element\n                } & ColumnLayoutProperties\n            ]) => {\n                return {\n                    key: accessor,\n                    style: {\n                        width,\n                        minWidth,\n                        maxWidth,\n                        textAlign: align\n                    } as React.CSSProperties & CSSObject,\n                    render:\n                        typeof Header === \"string\"\n                            ? () => {\n                                  return Header\n                              }\n                            : () => {\n                                  return Header({\n                                      toggleAllRowsSelected,\n                                      setFilters,\n                                      filterValues,\n                                      column: {\n                                          filterValue: filterValues[accessor],\n                                          setFilter: makeSetFilter(accessor)\n                                      }\n                                  })\n                              }\n                }\n            }\n        )\n    }, [filterValues, toggleAllRowsSelected])\n\n    const dataToProps = useCallback((data: S[]) => {\n        return data.map(({ subRows, ...cells }, key) => {\n            const canExpand = Boolean(subRows)\n            const path = [key]\n            return {\n                key: path.join(\".\"),\n                path,\n                values: cells,\n                isSelected: false,\n                canExpand,\n                isExpanded: false,\n                subRows\n            } as Props<S>\n        })\n    }, [])\n    const [propsMap, setPropsMap] = useState(dataToProps(data))\n    useEffect(() => {\n        setPropsMap(dataToProps(data))\n    }, [data, dataToProps])\n    const [rows, setRows] = useState<Rows<S>>([])\n\n    useEffect(() => {\n        let newRows: Rows<S> = []\n\n        propsMap.forEach((props) => {\n            const { isExpanded, subRows, path } = props\n\n            let cells: Cell[] = []\n\n            for (let i = 0; i < headers.length; i++) {\n                const { key } = headers[i]\n                const value = props.values[key]\n                const column = columns.current[key]\n                if (column === undefined) break\n                const { Cell } = column\n\n                const contentProps = {\n                    cell: { value },\n                    row: props\n                }\n                cells.push({\n                    key,\n                    props: contentProps,\n                    style: {\n                        textAlign: column.cellAlign\n                    },\n                    Content:\n                        Cell ||\n                        (({ cell, row, ...thisProps }) => {\n                            return <div {...thisProps}>{value}</div>\n                        }),\n                    render: Cell !== undefined ? Cell.bind(null, contentProps) : () => value\n                })\n            }\n\n            newRows.push({\n                ...props,\n                cells\n            })\n            if (isExpanded && subRows) {\n                subRows.forEach(({ subRows: sub, ...values }, key) => {\n                    const path = [...props.path, key]\n                    const canExpand = false\n                    const subRowProps: Props<S> = {\n                        canExpand,\n                        values,\n                        isExpanded: false,\n                        isSelected: false,\n                        subRows: undefined,\n                        path,\n                        key: path.join(\".\")\n                    }\n                    newRows.push({\n                        ...subRowProps,\n                        cells: Object.entries(props.values)\n                            .map(([accessor, value]) => {\n                                const column = columns.current[accessor]\n                                if (column) {\n                                    const { Cell } = column\n\n                                    const contentProps = {\n                                        cell: { value },\n                                        row: props\n                                    }\n                                    return {\n                                        key: accessor,\n                                        render: Cell !== undefined ? Cell.bind(null, contentProps) : () => value,\n                                        props: contentProps,\n                                        Content:\n                                            Cell ||\n                                            (({ cell, row, ...thisProps }) => {\n                                                return <div {...thisProps}>{value}</div>\n                                            })\n                                    }\n                                } else {\n                                    return undefined\n                                }\n                            })\n                            .filter((cell): cell is Cell => cell !== undefined)\n                    })\n                })\n            } else {\n                newRows = newRows.filter((row) => {\n                    return row.path.length === 1 || row.path[0] !== path[0]\n                })\n            }\n        })\n        setRows(newRows)\n    }, [headers, propsMap])\n\n    const toggleRowSelected = useCallback((toggleRows: number[], flag?: boolean) => {\n        setRows((prev) => {\n            const copy = prev.slice()\n            toggleRows.forEach((toggleRow) => {\n                copy[toggleRow].isSelected = flag === undefined ? !copy[toggleRow].isSelected : flag\n            })\n            return copy\n        })\n    }, [])\n\n    const toggleRowExpanded = useCallback((toggleRows: string[], flag?: boolean) => {\n        setPropsMap((prev) => {\n            let copy = prev.slice()\n            toggleRows.forEach((toggleRow) => {\n                const index = copy.findIndex((row) => row.key === toggleRow)\n                if (copy[index]?.canExpand) {\n                    copy[index].isExpanded = flag === undefined ? !copy[toggleRow].isExpanded : flag\n                }\n            })\n            return copy\n        })\n    }, [])\n\n    const [pageIndex, setPageIndex] = useState(props.initialState?.pageIndex || 0)\n    const [pageSize, setPageSize] = useState(props.initialState?.pageSize || 10)\n\n    const canPreviousPage = useMemo(() => pageIndex !== 0, [pageIndex])\n    const canNextPage = useMemo(\n        () => Math.floor(data.length / pageSize) > pageIndex + 1,\n        [data.length, pageIndex, pageSize]\n    )\n\n    const nextPage = useCallback(() => {\n        setPageIndex((prev) => prev + 1)\n    }, [])\n    const previousPage = useCallback(() => {\n        setPageIndex((prev) => prev - 1)\n    }, [])\n\n    const [filteredRows, setFilteredRows] = useState<Rows<S>>([])\n\n    useEffect(() => {\n        const fv = Object.entries(filterValues)\n        setFilteredRows(\n            rows.filter((row) => {\n                const values = Object.entries(row.values)\n                let flag = true\n                firstLoop: for (let i = 0; i < fv.length; i++) {\n                    const [accessor, filterValue] = fv[i]\n                    const filter = columns.current[accessor]?.filter\n                    if (filter === undefined) {\n                        throw new Error(`Set columns.${accessor}.filter`)\n                    }\n                    for (let j = 0; j < values.length; j++) {\n                        const [key, value] = values[j]\n                        if (key !== accessor) continue\n                        if (filter(value, { column: { filterValue } }) === false) {\n                            flag = false\n                            break firstLoop\n                        }\n                    }\n                }\n                return flag\n            })\n        )\n    }, [filterValues, rows])\n\n    const page = useMemo(\n        () => filteredRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize),\n        [filteredRows, pageIndex, pageSize]\n    )\n\n    return {\n        canPreviousPage,\n        canNextPage,\n        gotoPage: setPageIndex,\n        nextPage,\n        setPageSize,\n        previousPage,\n        pageIndex,\n        headers,\n        rows: filteredRows,\n        page,\n        toggleRowSelected,\n        toggleAllRowsSelected,\n        toggleRowExpanded\n    }\n}\n"],"file":"useTable.js"}

package/dist/esm/Tabs/Tab.js

@@ -0,0 +1,94 @@
+var _excluded = ["children", "index", "fullWidth", "as"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { css } from "@emotion/react";
+import { useTab } from "./useTab";
+import { useTheme } from "../theme";
+import React, { useCallback, useEffect, useRef } from "react";
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "m4v5le",
+  styles: "flex-grow:1;max-width:none;flex-basis:0;flex-shrink:1"
+} : {
+  name: "ht282j-Tab",
+  styles: "flex-grow:1;max-width:none;flex-basis:0;flex-shrink:1;label:Tab;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9UYWJzL1RhYi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0VvQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvVGFicy9UYWIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQXNDb21wb25lbnRQcm9wcywgRmFrZUFzQ29tcG9uZW50IH0gZnJvbSBcIi4uL0FzQ29tcG9uZW50UHJvcHNcIlxuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCJcbmltcG9ydCB7IHVzZVRhYiB9IGZyb20gXCIuL3VzZVRhYlwiXG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCIuLi90aGVtZVwiXG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCJcblxuaW50ZXJmYWNlIEJhc2VUYWJQcm9wcyB7XG4gICAgaW5kZXg/OiBudW1iZXJcbiAgICBmdWxsV2lkdGg/OiBib29sZWFuXG4gICAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdE5vZGVcbn1cblxuZXhwb3J0IHR5cGUgVGFiUHJvcHM8RSBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlPiA9IEFzQ29tcG9uZW50UHJvcHM8RSwgQmFzZVRhYlByb3BzPlxuXG5leHBvcnQgY29uc3QgVGFiID0gUmVhY3QuZm9yd2FyZFJlZihcbiAgICA8RSBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlID0gXCJidXR0b25cIj4oXG4gICAgICAgIHsgY2hpbGRyZW4sIGluZGV4ID0gMCwgZnVsbFdpZHRoLCBhcywgLi4ucmVzdCB9OiBUYWJQcm9wczxFPixcbiAgICAgICAgcmVmXzogYW55XG4gICAgKSA9PiB7XG4gICAgICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKVxuICAgICAgICBjb25zdCB7IGN1cnJlbnRJbmRleCwgc2V0Q3VycmVudEluZGV4LCBzZXRDdXJyZW50VGFiIH0gPSB1c2VUYWIoKVxuICAgICAgICBjb25zdCBoYW5kbGVDbGljayA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICAgICAgICAgIHNldEN1cnJlbnRJbmRleChpbmRleClcbiAgICAgICAgfSwgW2luZGV4LCBzZXRDdXJyZW50SW5kZXhdKVxuICAgICAgICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KHJlZl8gfHwgbnVsbClcbiAgICAgICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgICAgIGlmIChjdXJyZW50SW5kZXggPT09IGluZGV4ICYmIHJlZiAmJiByZWYuY3VycmVudCkge1xuICAgICAgICAgICAgICAgIHNldEN1cnJlbnRUYWIocmVmLmN1cnJlbnQpXG4gICAgICAgICAgICB9XG4gICAgICAgIH0sIFtjdXJyZW50SW5kZXgsIGluZGV4LCBzZXRDdXJyZW50VGFiXSlcbiAgICAgICAgY29uc3QgQ29tcG9uZW50OiBSZWFjdC5FbGVtZW50VHlwZSA9IGFzIHx8IFwiYnV0dG9uXCJcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxDb21wb25lbnRcbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgICAgICAgICAgJHtjc3Moe1xuICAgICAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogXCJpbmhlcml0XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBib3JkZXI6IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiAwLFxuICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB1c2VyU2VsZWN0OiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJvcmRlclJhZGl1czogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIHZlcnRpY2FsQWxpZ246IFwibWlkZGxlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgYXBwZWFyYW5jZTogXCJub25lXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBXZWJraXRUYXBIaWdobGlnaHRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgdGV4dFJlbmRlcmluZzogXCJhdXRvXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB3b3JkU3BhY2luZzogXCJub21yYWxcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIHRleHRJbmRlbnQ6IFwiMHB4XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93OiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIC4uLnRoZW1lLnR5cG9ncmFwaHkuYm9keSxcbiAgICAgICAgICAgICAgICAgICAgICAgIGZsZXhTaHJpbms6IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgdHJhbnNpdGlvbjogXCIwLjQ1c1wiLFxuICAgICAgICAgICAgICAgICAgICAgICAgbWluSGVpZ2h0OiB0aGVtZS5zcGFjaW5nICogNSxcbiAgICAgICAgICAgICAgICAgICAgICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjaW5nICogMixcbiAgICAgICAgICAgICAgICAgICAgICAgIHBhZGRpbmdSaWdodDogdGhlbWUuc3BhY2luZyAqIDJcbiAgICAgICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAgICAgICAgICR7ZnVsbFdpZHRoICYmXG4gICAgICAgICAgICAgICAgICAgIGNzcyh7XG4gICAgICAgICAgICAgICAgICAgICAgICBmbGV4R3JvdzogMSxcbiAgICAgICAgICAgICAgICAgICAgICAgIG1heFdpZHRoOiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGZsZXhCYXNpczogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIGZsZXhTaHJpbms6IDFcbiAgICAgICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L0NvbXBvbmVudD5cbiAgICAgICAgKVxuICAgIH1cbikgYXMgRmFrZUFzQ29tcG9uZW50PFwiYnV0dG9uXCIsIEJhc2VUYWJQcm9wcz5cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var Tab = /*#__PURE__*/React.forwardRef((_ref2, ref_) => {
+  var {
+    children,
+    index = 0,
+    fullWidth,
+    as
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var theme = useTheme();
+  var {
+    currentIndex,
+    setCurrentIndex,
+    setCurrentTab
+  } = useTab();
+  var handleClick = useCallback(() => {
+    setCurrentIndex(index);
+  }, [index, setCurrentIndex]);
+  var ref = useRef(ref_ || null);
+  useEffect(() => {
+    if (currentIndex === index && ref && ref.current) {
+      setCurrentTab(ref.current);
+    }
+  }, [currentIndex, index, setCurrentTab]);
+  var Component = as || "button";
+  return ___EmotionJSX(Component, _extends({
+    ref: ref,
+    onClick: handleClick
+  }, rest, {
+    css: /*#__PURE__*/css( /*#__PURE__*/css(_objectSpread(_objectSpread({
+      position: "relative",
+      boxSizing: "border-box",
+      color: "inherit",
+      border: 0,
+      margin: 0,
+      display: "inline-flex",
+      outline: 0,
+      padding: 0,
+      alignItems: "center",
+      userSelect: "none",
+      borderRadius: 0,
+      verticalAlign: "middle",
+      justifyContent: "center",
+      textDecoration: "none",
+      backgroundColor: "transparent",
+      appearance: "none",
+      WebkitTapHighlightColor: "transparent",
+      textRendering: "auto",
+      wordSpacing: "nomral",
+      textIndent: "0px",
+      textShadow: "none"
+    }, theme.typography.body), {}, {
+      flexShrink: 0,
+      cursor: "pointer",
+      transition: "0.45s",
+      minHeight: theme.spacing * 5,
+      paddingLeft: theme.spacing * 2,
+      paddingRight: theme.spacing * 2
+    }), process.env.NODE_ENV === "production" ? "" : ";label:Tab;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9UYWJzL1RhYi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNzQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvVGFicy9UYWIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQXNDb21wb25lbnRQcm9wcywgRmFrZUFzQ29tcG9uZW50IH0gZnJvbSBcIi4uL0FzQ29tcG9uZW50UHJvcHNcIlxuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCJcbmltcG9ydCB7IHVzZVRhYiB9IGZyb20gXCIuL3VzZVRhYlwiXG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCIuLi90aGVtZVwiXG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCJcblxuaW50ZXJmYWNlIEJhc2VUYWJQcm9wcyB7XG4gICAgaW5kZXg/OiBudW1iZXJcbiAgICBmdWxsV2lkdGg/OiBib29sZWFuXG4gICAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdE5vZGVcbn1cblxuZXhwb3J0IHR5cGUgVGFiUHJvcHM8RSBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlPiA9IEFzQ29tcG9uZW50UHJvcHM8RSwgQmFzZVRhYlByb3BzPlxuXG5leHBvcnQgY29uc3QgVGFiID0gUmVhY3QuZm9yd2FyZFJlZihcbiAgICA8RSBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlID0gXCJidXR0b25cIj4oXG4gICAgICAgIHsgY2hpbGRyZW4sIGluZGV4ID0gMCwgZnVsbFdpZHRoLCBhcywgLi4ucmVzdCB9OiBUYWJQcm9wczxFPixcbiAgICAgICAgcmVmXzogYW55XG4gICAgKSA9PiB7XG4gICAgICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKVxuICAgICAgICBjb25zdCB7IGN1cnJlbnRJbmRleCwgc2V0Q3VycmVudEluZGV4LCBzZXRDdXJyZW50VGFiIH0gPSB1c2VUYWIoKVxuICAgICAgICBjb25zdCBoYW5kbGVDbGljayA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICAgICAgICAgIHNldEN1cnJlbnRJbmRleChpbmRleClcbiAgICAgICAgfSwgW2luZGV4LCBzZXRDdXJyZW50SW5kZXhdKVxuICAgICAgICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KHJlZl8gfHwgbnVsbClcbiAgICAgICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgICAgIGlmIChjdXJyZW50SW5kZXggPT09IGluZGV4ICYmIHJlZiAmJiByZWYuY3VycmVudCkge1xuICAgICAgICAgICAgICAgIHNldEN1cnJlbnRUYWIocmVmLmN1cnJlbnQpXG4gICAgICAgICAgICB9XG4gICAgICAgIH0sIFtjdXJyZW50SW5kZXgsIGluZGV4LCBzZXRDdXJyZW50VGFiXSlcbiAgICAgICAgY29uc3QgQ29tcG9uZW50OiBSZWFjdC5FbGVtZW50VHlwZSA9IGFzIHx8IFwiYnV0dG9uXCJcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxDb21wb25lbnRcbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgICAgICAgICAgJHtjc3Moe1xuICAgICAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogXCJpbmhlcml0XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBib3JkZXI6IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiAwLFxuICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB1c2VyU2VsZWN0OiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJvcmRlclJhZGl1czogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIHZlcnRpY2FsQWxpZ246IFwibWlkZGxlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgYXBwZWFyYW5jZTogXCJub25lXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBXZWJraXRUYXBIaWdobGlnaHRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgdGV4dFJlbmRlcmluZzogXCJhdXRvXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB3b3JkU3BhY2luZzogXCJub21yYWxcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIHRleHRJbmRlbnQ6IFwiMHB4XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93OiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIC4uLnRoZW1lLnR5cG9ncmFwaHkuYm9keSxcbiAgICAgICAgICAgICAgICAgICAgICAgIGZsZXhTaHJpbms6IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgdHJhbnNpdGlvbjogXCIwLjQ1c1wiLFxuICAgICAgICAgICAgICAgICAgICAgICAgbWluSGVpZ2h0OiB0aGVtZS5zcGFjaW5nICogNSxcbiAgICAgICAgICAgICAgICAgICAgICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjaW5nICogMixcbiAgICAgICAgICAgICAgICAgICAgICAgIHBhZGRpbmdSaWdodDogdGhlbWUuc3BhY2luZyAqIDJcbiAgICAgICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAgICAgICAgICR7ZnVsbFdpZHRoICYmXG4gICAgICAgICAgICAgICAgICAgIGNzcyh7XG4gICAgICAgICAgICAgICAgICAgICAgICBmbGV4R3JvdzogMSxcbiAgICAgICAgICAgICAgICAgICAgICAgIG1heFdpZHRoOiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGZsZXhCYXNpczogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIGZsZXhTaHJpbms6IDFcbiAgICAgICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L0NvbXBvbmVudD5cbiAgICAgICAgKVxuICAgIH1cbikgYXMgRmFrZUFzQ29tcG9uZW50PFwiYnV0dG9uXCIsIEJhc2VUYWJQcm9wcz5cbiJdfQ== */"), " ", fullWidth && _ref, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Tab;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9UYWJzL1RhYi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0N3QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvVGFicy9UYWIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQXNDb21wb25lbnRQcm9wcywgRmFrZUFzQ29tcG9uZW50IH0gZnJvbSBcIi4uL0FzQ29tcG9uZW50UHJvcHNcIlxuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCJcbmltcG9ydCB7IHVzZVRhYiB9IGZyb20gXCIuL3VzZVRhYlwiXG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCIuLi90aGVtZVwiXG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSBcInJlYWN0XCJcblxuaW50ZXJmYWNlIEJhc2VUYWJQcm9wcyB7XG4gICAgaW5kZXg/OiBudW1iZXJcbiAgICBmdWxsV2lkdGg/OiBib29sZWFuXG4gICAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdE5vZGVcbn1cblxuZXhwb3J0IHR5cGUgVGFiUHJvcHM8RSBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlPiA9IEFzQ29tcG9uZW50UHJvcHM8RSwgQmFzZVRhYlByb3BzPlxuXG5leHBvcnQgY29uc3QgVGFiID0gUmVhY3QuZm9yd2FyZFJlZihcbiAgICA8RSBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlID0gXCJidXR0b25cIj4oXG4gICAgICAgIHsgY2hpbGRyZW4sIGluZGV4ID0gMCwgZnVsbFdpZHRoLCBhcywgLi4ucmVzdCB9OiBUYWJQcm9wczxFPixcbiAgICAgICAgcmVmXzogYW55XG4gICAgKSA9PiB7XG4gICAgICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKVxuICAgICAgICBjb25zdCB7IGN1cnJlbnRJbmRleCwgc2V0Q3VycmVudEluZGV4LCBzZXRDdXJyZW50VGFiIH0gPSB1c2VUYWIoKVxuICAgICAgICBjb25zdCBoYW5kbGVDbGljayA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICAgICAgICAgIHNldEN1cnJlbnRJbmRleChpbmRleClcbiAgICAgICAgfSwgW2luZGV4LCBzZXRDdXJyZW50SW5kZXhdKVxuICAgICAgICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KHJlZl8gfHwgbnVsbClcbiAgICAgICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgICAgIGlmIChjdXJyZW50SW5kZXggPT09IGluZGV4ICYmIHJlZiAmJiByZWYuY3VycmVudCkge1xuICAgICAgICAgICAgICAgIHNldEN1cnJlbnRUYWIocmVmLmN1cnJlbnQpXG4gICAgICAgICAgICB9XG4gICAgICAgIH0sIFtjdXJyZW50SW5kZXgsIGluZGV4LCBzZXRDdXJyZW50VGFiXSlcbiAgICAgICAgY29uc3QgQ29tcG9uZW50OiBSZWFjdC5FbGVtZW50VHlwZSA9IGFzIHx8IFwiYnV0dG9uXCJcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxDb21wb25lbnRcbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbGlja31cbiAgICAgICAgICAgICAgICB7Li4ucmVzdH1cbiAgICAgICAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgICAgICAgICAgJHtjc3Moe1xuICAgICAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBjb2xvcjogXCJpbmhlcml0XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBib3JkZXI6IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiBcImlubGluZS1mbGV4XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBvdXRsaW5lOiAwLFxuICAgICAgICAgICAgICAgICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB1c2VyU2VsZWN0OiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJvcmRlclJhZGl1czogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIHZlcnRpY2FsQWxpZ246IFwibWlkZGxlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIHRleHREZWNvcmF0aW9uOiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgYXBwZWFyYW5jZTogXCJub25lXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBXZWJraXRUYXBIaWdobGlnaHRDb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgdGV4dFJlbmRlcmluZzogXCJhdXRvXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB3b3JkU3BhY2luZzogXCJub21yYWxcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIHRleHRJbmRlbnQ6IFwiMHB4XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93OiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIC4uLnRoZW1lLnR5cG9ncmFwaHkuYm9keSxcbiAgICAgICAgICAgICAgICAgICAgICAgIGZsZXhTaHJpbms6IDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgICAgICAgICAgICAgICAgICAgdHJhbnNpdGlvbjogXCIwLjQ1c1wiLFxuICAgICAgICAgICAgICAgICAgICAgICAgbWluSGVpZ2h0OiB0aGVtZS5zcGFjaW5nICogNSxcbiAgICAgICAgICAgICAgICAgICAgICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjaW5nICogMixcbiAgICAgICAgICAgICAgICAgICAgICAgIHBhZGRpbmdSaWdodDogdGhlbWUuc3BhY2luZyAqIDJcbiAgICAgICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAgICAgICAgICR7ZnVsbFdpZHRoICYmXG4gICAgICAgICAgICAgICAgICAgIGNzcyh7XG4gICAgICAgICAgICAgICAgICAgICAgICBmbGV4R3JvdzogMSxcbiAgICAgICAgICAgICAgICAgICAgICAgIG1heFdpZHRoOiBcIm5vbmVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGZsZXhCYXNpczogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIGZsZXhTaHJpbms6IDFcbiAgICAgICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L0NvbXBvbmVudD5cbiAgICAgICAgKVxuICAgIH1cbikgYXMgRmFrZUFzQ29tcG9uZW50PFwiYnV0dG9uXCIsIEJhc2VUYWJQcm9wcz5cbiJdfQ== */")
+  }), children);
+});
+//# sourceMappingURL=Tab.js.map

package/dist/esm/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tabs/Tab.tsx"],"names":["css","useTab","useTheme","React","useCallback","useEffect","useRef","Tab","forwardRef","ref_","children","index","fullWidth","as","rest","theme","currentIndex","setCurrentIndex","setCurrentTab","handleClick","ref","current","Component","position","boxSizing","color","border","margin","display","outline","padding","alignItems","userSelect","borderRadius","verticalAlign","justifyContent","textDecoration","backgroundColor","appearance","WebkitTapHighlightColor","textRendering","wordSpacing","textIndent","textShadow","typography","body","flexShrink","cursor","transition","minHeight","spacing","paddingLeft","paddingRight"],"mappings":";;;;;;;;;;;;;;;;AACA,SAASA,GAAT,QAAoB,gBAApB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,QAAT,QAAyB,UAAzB;AACA,OAAOC,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,MAAxC,QAAsD,OAAtD;;;;;;;;;;;;;AAUA,OAAO,IAAMC,GAAG,gBAAGJ,KAAK,CAACK,UAAN,CACf,QAEIC,IAFJ,KAGK;AAAA,MAFD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAK,GAAG,CAApB;AAAuBC,IAAAA,SAAvB;AAAkCC,IAAAA;AAAlC,GAEC;AAAA,MAFwCC,IAExC;;AACD,MAAMC,KAAK,GAAGb,QAAQ,EAAtB;AACA,MAAM;AAAEc,IAAAA,YAAF;AAAgBC,IAAAA,eAAhB;AAAiCC,IAAAA;AAAjC,MAAmDjB,MAAM,EAA/D;AACA,MAAMkB,WAAW,GAAGf,WAAW,CAAC,MAAM;AAClCa,IAAAA,eAAe,CAACN,KAAD,CAAf;AACH,GAF8B,EAE5B,CAACA,KAAD,EAAQM,eAAR,CAF4B,CAA/B;AAGA,MAAMG,GAAG,GAAGd,MAAM,CAAoBG,IAAI,IAAI,IAA5B,CAAlB;AACAJ,EAAAA,SAAS,CAAC,MAAM;AACZ,QAAIW,YAAY,KAAKL,KAAjB,IAA0BS,GAA1B,IAAiCA,GAAG,CAACC,OAAzC,EAAkD;AAC9CH,MAAAA,aAAa,CAACE,GAAG,CAACC,OAAL,CAAb;AACH;AACJ,GAJQ,EAIN,CAACL,YAAD,EAAeL,KAAf,EAAsBO,aAAtB,CAJM,CAAT;AAKA,MAAMI,SAA4B,GAAGT,EAAE,IAAI,QAA3C;AACA,SACI,cAAC,SAAD;AACI,IAAA,GAAG,EAAEO,GADT;AAEI,IAAA,OAAO,EAAED;AAFb,KAGQL,IAHR;AAII,IAAA,GAAG,eAAEd,GAAF,eACGA,GAAG;AACDuB,MAAAA,QAAQ,EAAE,UADT;AAEDC,MAAAA,SAAS,EAAE,YAFV;AAGDC,MAAAA,KAAK,EAAE,SAHN;AAIDC,MAAAA,MAAM,EAAE,CAJP;AAKDC,MAAAA,MAAM,EAAE,CALP;AAMDC,MAAAA,OAAO,EAAE,aANR;AAODC,MAAAA,OAAO,EAAE,CAPR;AAQDC,MAAAA,OAAO,EAAE,CARR;AASDC,MAAAA,UAAU,EAAE,QATX;AAUDC,MAAAA,UAAU,EAAE,MAVX;AAWDC,MAAAA,YAAY,EAAE,CAXb;AAYDC,MAAAA,aAAa,EAAE,QAZd;AAaDC,MAAAA,cAAc,EAAE,QAbf;AAcDC,MAAAA,cAAc,EAAE,MAdf;AAeDC,MAAAA,eAAe,EAAE,aAfhB;AAgBDC,MAAAA,UAAU,EAAE,MAhBX;AAiBDC,MAAAA,uBAAuB,EAAE,aAjBxB;AAkBDC,MAAAA,aAAa,EAAE,MAlBd;AAmBDC,MAAAA,WAAW,EAAE,QAnBZ;AAoBDC,MAAAA,UAAU,EAAE,KApBX;AAqBDC,MAAAA,UAAU,EAAE;AArBX,OAsBE5B,KAAK,CAAC6B,UAAN,CAAiBC,IAtBnB;AAuBDC,MAAAA,UAAU,EAAE,CAvBX;AAwBDC,MAAAA,MAAM,EAAE,SAxBP;AAyBDC,MAAAA,UAAU,EAAE,OAzBX;AA0BDC,MAAAA,SAAS,EAAElC,KAAK,CAACmC,OAAN,GAAgB,CA1B1B;AA2BDC,MAAAA,WAAW,EAAEpC,KAAK,CAACmC,OAAN,GAAgB,CA3B5B;AA4BDE,MAAAA,YAAY,EAAErC,KAAK,CAACmC,OAAN,GAAgB;AA5B7B,mgJADN,OA+BGtC,SAAS,QA/BZ;AAJP,MA4CKF,QA5CL,CADJ;AAgDH,CAjEc,CAAZ","sourcesContent":["import { AsComponentProps, FakeAsComponent } from \"../AsComponentProps\"\nimport { css } from \"@emotion/react\"\nimport { useTab } from \"./useTab\"\nimport { useTheme } from \"../theme\"\nimport React, { useCallback, useEffect, useRef } from \"react\"\n\ninterface BaseTabProps {\n    index?: number\n    fullWidth?: boolean\n    children?: React.ReactNode\n}\n\nexport type TabProps<E extends React.ElementType> = AsComponentProps<E, BaseTabProps>\n\nexport const Tab = React.forwardRef(\n    <E extends React.ElementType = \"button\">(\n        { children, index = 0, fullWidth, as, ...rest }: TabProps<E>,\n        ref_: any\n    ) => {\n        const theme = useTheme()\n        const { currentIndex, setCurrentIndex, setCurrentTab } = useTab()\n        const handleClick = useCallback(() => {\n            setCurrentIndex(index)\n        }, [index, setCurrentIndex])\n        const ref = useRef<HTMLButtonElement>(ref_ || null)\n        useEffect(() => {\n            if (currentIndex === index && ref && ref.current) {\n                setCurrentTab(ref.current)\n            }\n        }, [currentIndex, index, setCurrentTab])\n        const Component: React.ElementType = as || \"button\"\n        return (\n            <Component\n                ref={ref}\n                onClick={handleClick}\n                {...rest}\n                css={css`\n                    ${css({\n                        position: \"relative\",\n                        boxSizing: \"border-box\",\n                        color: \"inherit\",\n                        border: 0,\n                        margin: 0,\n                        display: \"inline-flex\",\n                        outline: 0,\n                        padding: 0,\n                        alignItems: \"center\",\n                        userSelect: \"none\",\n                        borderRadius: 0,\n                        verticalAlign: \"middle\",\n                        justifyContent: \"center\",\n                        textDecoration: \"none\",\n                        backgroundColor: \"transparent\",\n                        appearance: \"none\",\n                        WebkitTapHighlightColor: \"transparent\",\n                        textRendering: \"auto\",\n                        wordSpacing: \"nomral\",\n                        textIndent: \"0px\",\n                        textShadow: \"none\",\n                        ...theme.typography.body,\n                        flexShrink: 0,\n                        cursor: \"pointer\",\n                        transition: \"0.45s\",\n                        minHeight: theme.spacing * 5,\n                        paddingLeft: theme.spacing * 2,\n                        paddingRight: theme.spacing * 2\n                    })}\n                    ${fullWidth &&\n                    css({\n                        flexGrow: 1,\n                        maxWidth: \"none\",\n                        flexBasis: 0,\n                        flexShrink: 1\n                    })}\n                `}\n            >\n                {children}\n            </Component>\n        )\n    }\n) as FakeAsComponent<\"button\", BaseTabProps>\n"],"file":"Tab.js"}

package/dist/esm/Tabs/TabGroup.js

@@ -0,0 +1,78 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { css } from "@emotion/react";
+import { useTab } from "./useTab";
+import { useTheme } from "../theme";
+import { useWindowResize } from "../hooks/useWindowResize";
+import React, { useEffect, useState } from "react";
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var positions = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+var underlineStyles = {
+  none: undefined,
+  always: process.env.NODE_ENV === "production" ? {
+    name: "16s0a54",
+    styles: "border-bottom:3px solid #e0e0e0"
+  } : {
+    name: "bp0g7p-always",
+    styles: "border-bottom:3px solid #e0e0e0;label:always;",
+    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9UYWJzL1RhYkdyb3VwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQmUiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1RhYnMvVGFiR3JvdXAudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCJcbmltcG9ydCB7IHVzZVRhYiB9IGZyb20gXCIuL3VzZVRhYlwiXG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCIuLi90aGVtZVwiXG5pbXBvcnQgeyB1c2VXaW5kb3dSZXNpemUgfSBmcm9tIFwiLi4vaG9va3MvdXNlV2luZG93UmVzaXplXCJcbmltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCJcblxuZXhwb3J0IGludGVyZmFjZSBUYWJHcm91cFByb3BzIGV4dGVuZHMgUmVhY3QuSFRNTFByb3BzPEhUTUxEaXZFbGVtZW50PiB7XG4gICAgcG9zaXRpb24/OiBcInN0YXJ0XCIgfCBcImNlbnRlclwiIHwgXCJlbmRcIlxuICAgIHVuZGVybGluZT86IFwibm9uZVwiIHwgXCJob3ZlclwiIHwgXCJhbHdheXNcIlxufVxuXG5jb25zdCBwb3NpdGlvbnMgPSB7XG4gICAgc3RhcnQ6IFwiZmxleC1zdGFydFwiLFxuICAgIGNlbnRlcjogXCJjZW50ZXJcIixcbiAgICBlbmQ6IFwiZmxleC1lbmRcIlxufVxuXG5jb25zdCB1bmRlcmxpbmVTdHlsZXMgPSB7XG4gICAgbm9uZTogdW5kZWZpbmVkLFxuICAgIGFsd2F5czogY3NzYFxuICAgICAgICBib3JkZXItYm90dG9tOiAzcHggc29saWQgI2UwZTBlMDtcbiAgICBgLFxuICAgIGhvdmVyOiBjc3NgXG4gICAgICAgIGJvcmRlci1ib3R0b206IDNweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICAgICAgdHJhbnNpdGlvbjogMC4ycztcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICBib3JkZXItYm90dG9tOiAzcHggc29saWQgI2UwZTBlMDtcbiAgICAgICAgfVxuICAgIGBcbn1cblxuZXhwb3J0IGNvbnN0IFRhYkdyb3VwOiBSZWFjdC5GQzxUYWJHcm91cFByb3BzPiA9ICh7IHBvc2l0aW9uID0gXCJzdGFydFwiLCB1bmRlcmxpbmUgPSBcIm5vbmVcIiwgY2hpbGRyZW4gfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKVxuICAgIGNvbnN0IHsgY3VycmVudFRhYiB9ID0gdXNlVGFiKClcbiAgICBjb25zdCB7IHdpZHRoIH0gPSB1c2VXaW5kb3dSZXNpemUoKVxuICAgIGNvbnN0IFtpbmRpY2F0b3JTdHlsZSwgc2V0SW5kaWNhdG9yU3R5bGVdID0gdXNlU3RhdGUoe1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICB3aWR0aDogMCxcbiAgICAgICAgbGVmdDogMFxuICAgIH0pXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgaWYgKGN1cnJlbnRUYWIpXG4gICAgICAgICAgICBzZXRJbmRpY2F0b3JTdHlsZSh7XG4gICAgICAgICAgICAgICAgb3BhY2l0eTogMSxcbiAgICAgICAgICAgICAgICB3aWR0aDogY3VycmVudFRhYi5vZmZzZXRXaWR0aCxcbiAgICAgICAgICAgICAgICBsZWZ0OiBjdXJyZW50VGFiLm9mZnNldExlZnRcbiAgICAgICAgICAgIH0pXG4gICAgfSwgW2N1cnJlbnRUYWIsIHdpZHRoXSlcbiAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgICAgIGZsZXgtd3JhcDogbm93cmFwO1xuICAgICAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogJHtwb3NpdGlvbnNbcG9zaXRpb25dfTtcbiAgICAgICAgICAgICAgICAke3VuZGVybGluZVN0eWxlc1t1bmRlcmxpbmVdfVxuICAgICAgICAgICAgYH1cbiAgICAgICAgPlxuICAgICAgICAgICAge1JlYWN0LkNoaWxkcmVuLm1hcChjaGlsZHJlbiBhcyBSZWFjdC5SZWFjdEVsZW1lbnRbXSwgKGNoaWxkLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgICAgIHJldHVybiBSZWFjdC5jbG9uZUVsZW1lbnQoY2hpbGQsIHsgaW5kZXggfSlcbiAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAge2N1cnJlbnRUYWIgJiYgKFxuICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgY3NzPXtjc3Moe1xuICAgICAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJvdHRvbTogdW5kZXJsaW5lID09PSBcIm5vbmVcIiA/IDAgOiAtMyxcbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiAyMDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IDMsXG4gICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnBhbGV0dGUuaW50ZW50aW9ucy5wcmltYXJ5Lm1haW4sXG4gICAgICAgICAgICAgICAgICAgICAgICB0cmFuc2l0aW9uOiBgb3BhY2l0eSAke3RoZW1lLnRyYW5zaXRpb25zLmR1cmF0aW9uLnN0YW5kYXJkfSAke3RoZW1lLnRyYW5zaXRpb25zLmVhc2luZy5zaGFycH0sXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbGVmdCAke3RoZW1lLnRyYW5zaXRpb25zLmR1cmF0aW9uLnNob3J0ZXN0fSAke3RoZW1lLnRyYW5zaXRpb25zLmVhc2luZy5lYXNlSW5PdXR9LFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoICR7dGhlbWUudHJhbnNpdGlvbnMuZHVyYXRpb24uc2hvcnRlc3R9ICR7dGhlbWUudHJhbnNpdGlvbnMuZWFzaW5nLmVhc2VJbk91dH1gXG4gICAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgICAgICBzdHlsZT17aW5kaWNhdG9yU3R5bGV9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICl9XG4gICAgICAgIDwvZGl2PlxuICAgIClcbn1cbiJdfQ== */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  hover: process.env.NODE_ENV === "production" ? {
+    name: "175mt4f",
+    styles: "border-bottom:3px solid transparent;transition:0.2s;&:hover{border-bottom:3px solid #e0e0e0;}"
+  } : {
+    name: "19n0r3i-hover",
+    styles: "border-bottom:3px solid transparent;transition:0.2s;&:hover{border-bottom:3px solid #e0e0e0;};label:hover;",
+    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9UYWJzL1RhYkdyb3VwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQmMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1RhYnMvVGFiR3JvdXAudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCJcbmltcG9ydCB7IHVzZVRhYiB9IGZyb20gXCIuL3VzZVRhYlwiXG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCIuLi90aGVtZVwiXG5pbXBvcnQgeyB1c2VXaW5kb3dSZXNpemUgfSBmcm9tIFwiLi4vaG9va3MvdXNlV2luZG93UmVzaXplXCJcbmltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCJcblxuZXhwb3J0IGludGVyZmFjZSBUYWJHcm91cFByb3BzIGV4dGVuZHMgUmVhY3QuSFRNTFByb3BzPEhUTUxEaXZFbGVtZW50PiB7XG4gICAgcG9zaXRpb24/OiBcInN0YXJ0XCIgfCBcImNlbnRlclwiIHwgXCJlbmRcIlxuICAgIHVuZGVybGluZT86IFwibm9uZVwiIHwgXCJob3ZlclwiIHwgXCJhbHdheXNcIlxufVxuXG5jb25zdCBwb3NpdGlvbnMgPSB7XG4gICAgc3RhcnQ6IFwiZmxleC1zdGFydFwiLFxuICAgIGNlbnRlcjogXCJjZW50ZXJcIixcbiAgICBlbmQ6IFwiZmxleC1lbmRcIlxufVxuXG5jb25zdCB1bmRlcmxpbmVTdHlsZXMgPSB7XG4gICAgbm9uZTogdW5kZWZpbmVkLFxuICAgIGFsd2F5czogY3NzYFxuICAgICAgICBib3JkZXItYm90dG9tOiAzcHggc29saWQgI2UwZTBlMDtcbiAgICBgLFxuICAgIGhvdmVyOiBjc3NgXG4gICAgICAgIGJvcmRlci1ib3R0b206IDNweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICAgICAgdHJhbnNpdGlvbjogMC4ycztcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICBib3JkZXItYm90dG9tOiAzcHggc29saWQgI2UwZTBlMDtcbiAgICAgICAgfVxuICAgIGBcbn1cblxuZXhwb3J0IGNvbnN0IFRhYkdyb3VwOiBSZWFjdC5GQzxUYWJHcm91cFByb3BzPiA9ICh7IHBvc2l0aW9uID0gXCJzdGFydFwiLCB1bmRlcmxpbmUgPSBcIm5vbmVcIiwgY2hpbGRyZW4gfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKVxuICAgIGNvbnN0IHsgY3VycmVudFRhYiB9ID0gdXNlVGFiKClcbiAgICBjb25zdCB7IHdpZHRoIH0gPSB1c2VXaW5kb3dSZXNpemUoKVxuICAgIGNvbnN0IFtpbmRpY2F0b3JTdHlsZSwgc2V0SW5kaWNhdG9yU3R5bGVdID0gdXNlU3RhdGUoe1xuICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICB3aWR0aDogMCxcbiAgICAgICAgbGVmdDogMFxuICAgIH0pXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgICAgaWYgKGN1cnJlbnRUYWIpXG4gICAgICAgICAgICBzZXRJbmRpY2F0b3JTdHlsZSh7XG4gICAgICAgICAgICAgICAgb3BhY2l0eTogMSxcbiAgICAgICAgICAgICAgICB3aWR0aDogY3VycmVudFRhYi5vZmZzZXRXaWR0aCxcbiAgICAgICAgICAgICAgICBsZWZ0OiBjdXJyZW50VGFiLm9mZnNldExlZnRcbiAgICAgICAgICAgIH0pXG4gICAgfSwgW2N1cnJlbnRUYWIsIHdpZHRoXSlcbiAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgICAgIGZsZXgtd3JhcDogbm93cmFwO1xuICAgICAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogJHtwb3NpdGlvbnNbcG9zaXRpb25dfTtcbiAgICAgICAgICAgICAgICAke3VuZGVybGluZVN0eWxlc1t1bmRlcmxpbmVdfVxuICAgICAgICAgICAgYH1cbiAgICAgICAgPlxuICAgICAgICAgICAge1JlYWN0LkNoaWxkcmVuLm1hcChjaGlsZHJlbiBhcyBSZWFjdC5SZWFjdEVsZW1lbnRbXSwgKGNoaWxkLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgICAgIHJldHVybiBSZWFjdC5jbG9uZUVsZW1lbnQoY2hpbGQsIHsgaW5kZXggfSlcbiAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAge2N1cnJlbnRUYWIgJiYgKFxuICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgY3NzPXtjc3Moe1xuICAgICAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgICAgICAgICAgICAgIGJvdHRvbTogdW5kZXJsaW5lID09PSBcIm5vbmVcIiA/IDAgOiAtMyxcbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiAyMDAsXG4gICAgICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IDMsXG4gICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnBhbGV0dGUuaW50ZW50aW9ucy5wcmltYXJ5Lm1haW4sXG4gICAgICAgICAgICAgICAgICAgICAgICB0cmFuc2l0aW9uOiBgb3BhY2l0eSAke3RoZW1lLnRyYW5zaXRpb25zLmR1cmF0aW9uLnN0YW5kYXJkfSAke3RoZW1lLnRyYW5zaXRpb25zLmVhc2luZy5zaGFycH0sXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbGVmdCAke3RoZW1lLnRyYW5zaXRpb25zLmR1cmF0aW9uLnNob3J0ZXN0fSAke3RoZW1lLnRyYW5zaXRpb25zLmVhc2luZy5lYXNlSW5PdXR9LFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoICR7dGhlbWUudHJhbnNpdGlvbnMuZHVyYXRpb24uc2hvcnRlc3R9ICR7dGhlbWUudHJhbnNpdGlvbnMuZWFzaW5nLmVhc2VJbk91dH1gXG4gICAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgICAgICBzdHlsZT17aW5kaWNhdG9yU3R5bGV9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICl9XG4gICAgICAgIDwvZGl2PlxuICAgIClcbn1cbiJdfQ== */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
+};
+export var TabGroup = _ref => {
+  var {
+    position = "start",
+    underline = "none",
+    children
+  } = _ref;
+  var theme = useTheme();
+  var {
+    currentTab
+  } = useTab();
+  var {
+    width
+  } = useWindowResize();
+  var [indicatorStyle, setIndicatorStyle] = useState({
+    opacity: 0,
+    width: 0,
+    left: 0
+  });
+  useEffect(() => {
+    if (currentTab) setIndicatorStyle({
+      opacity: 1,
+      width: currentTab.offsetWidth,
+      left: currentTab.offsetLeft
+    });
+  }, [currentTab, width]);
+  return ___EmotionJSX("div", {
+    css: /*#__PURE__*/css("position:relative;box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:", positions[position], ";", underlineStyles[underline], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:TabGroup;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9UYWJzL1RhYkdyb3VwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRG9CIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9UYWJzL1RhYkdyb3VwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiXG5pbXBvcnQgeyB1c2VUYWIgfSBmcm9tIFwiLi91c2VUYWJcIlxuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiLi4vdGhlbWVcIlxuaW1wb3J0IHsgdXNlV2luZG93UmVzaXplIH0gZnJvbSBcIi4uL2hvb2tzL3VzZVdpbmRvd1Jlc2l6ZVwiXG5pbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiXG5cbmV4cG9ydCBpbnRlcmZhY2UgVGFiR3JvdXBQcm9wcyBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxIVE1MRGl2RWxlbWVudD4ge1xuICAgIHBvc2l0aW9uPzogXCJzdGFydFwiIHwgXCJjZW50ZXJcIiB8IFwiZW5kXCJcbiAgICB1bmRlcmxpbmU/OiBcIm5vbmVcIiB8IFwiaG92ZXJcIiB8IFwiYWx3YXlzXCJcbn1cblxuY29uc3QgcG9zaXRpb25zID0ge1xuICAgIHN0YXJ0OiBcImZsZXgtc3RhcnRcIixcbiAgICBjZW50ZXI6IFwiY2VudGVyXCIsXG4gICAgZW5kOiBcImZsZXgtZW5kXCJcbn1cblxuY29uc3QgdW5kZXJsaW5lU3R5bGVzID0ge1xuICAgIG5vbmU6IHVuZGVmaW5lZCxcbiAgICBhbHdheXM6IGNzc2BcbiAgICAgICAgYm9yZGVyLWJvdHRvbTogM3B4IHNvbGlkICNlMGUwZTA7XG4gICAgYCxcbiAgICBob3ZlcjogY3NzYFxuICAgICAgICBib3JkZXItYm90dG9tOiAzcHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgICAgIHRyYW5zaXRpb246IDAuMnM7XG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgICAgYm9yZGVyLWJvdHRvbTogM3B4IHNvbGlkICNlMGUwZTA7XG4gICAgICAgIH1cbiAgICBgXG59XG5cbmV4cG9ydCBjb25zdCBUYWJHcm91cDogUmVhY3QuRkM8VGFiR3JvdXBQcm9wcz4gPSAoeyBwb3NpdGlvbiA9IFwic3RhcnRcIiwgdW5kZXJsaW5lID0gXCJub25lXCIsIGNoaWxkcmVuIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKClcbiAgICBjb25zdCB7IGN1cnJlbnRUYWIgfSA9IHVzZVRhYigpXG4gICAgY29uc3QgeyB3aWR0aCB9ID0gdXNlV2luZG93UmVzaXplKClcbiAgICBjb25zdCBbaW5kaWNhdG9yU3R5bGUsIHNldEluZGljYXRvclN0eWxlXSA9IHVzZVN0YXRlKHtcbiAgICAgICAgb3BhY2l0eTogMCxcbiAgICAgICAgd2lkdGg6IDAsXG4gICAgICAgIGxlZnQ6IDBcbiAgICB9KVxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGlmIChjdXJyZW50VGFiKVxuICAgICAgICAgICAgc2V0SW5kaWNhdG9yU3R5bGUoe1xuICAgICAgICAgICAgICAgIG9wYWNpdHk6IDEsXG4gICAgICAgICAgICAgICAgd2lkdGg6IGN1cnJlbnRUYWIub2Zmc2V0V2lkdGgsXG4gICAgICAgICAgICAgICAgbGVmdDogY3VycmVudFRhYi5vZmZzZXRMZWZ0XG4gICAgICAgICAgICB9KVxuICAgIH0sIFtjdXJyZW50VGFiLCB3aWR0aF0pXG4gICAgcmV0dXJuIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBmbGV4LXdyYXA6IG5vd3JhcDtcbiAgICAgICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6ICR7cG9zaXRpb25zW3Bvc2l0aW9uXX07XG4gICAgICAgICAgICAgICAgJHt1bmRlcmxpbmVTdHlsZXNbdW5kZXJsaW5lXX1cbiAgICAgICAgICAgIGB9XG4gICAgICAgID5cbiAgICAgICAgICAgIHtSZWFjdC5DaGlsZHJlbi5tYXAoY2hpbGRyZW4gYXMgUmVhY3QuUmVhY3RFbGVtZW50W10sIChjaGlsZCwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgICAgICByZXR1cm4gUmVhY3QuY2xvbmVFbGVtZW50KGNoaWxkLCB7IGluZGV4IH0pXG4gICAgICAgICAgICB9KX1cbiAgICAgICAgICAgIHtjdXJyZW50VGFiICYmIChcbiAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgIGNzcz17Y3NzKHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBib3R0b206IHVuZGVybGluZSA9PT0gXCJub25lXCIgPyAwIDogLTMsXG4gICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogMjAwLFxuICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiAzLFxuICAgICAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5wYWxldHRlLmludGVudGlvbnMucHJpbWFyeS5tYWluLFxuICAgICAgICAgICAgICAgICAgICAgICAgdHJhbnNpdGlvbjogYG9wYWNpdHkgJHt0aGVtZS50cmFuc2l0aW9ucy5kdXJhdGlvbi5zdGFuZGFyZH0gJHt0aGVtZS50cmFuc2l0aW9ucy5lYXNpbmcuc2hhcnB9LFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGxlZnQgJHt0aGVtZS50cmFuc2l0aW9ucy5kdXJhdGlvbi5zaG9ydGVzdH0gJHt0aGVtZS50cmFuc2l0aW9ucy5lYXNpbmcuZWFzZUluT3V0fSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB3aWR0aCAke3RoZW1lLnRyYW5zaXRpb25zLmR1cmF0aW9uLnNob3J0ZXN0fSAke3RoZW1lLnRyYW5zaXRpb25zLmVhc2luZy5lYXNlSW5PdXR9YFxuICAgICAgICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgICAgICAgICAgc3R5bGU9e2luZGljYXRvclN0eWxlfVxuICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICApXG59XG4iXX0= */")
+  }, React.Children.map(children, (child, index) => {
+    return /*#__PURE__*/React.cloneElement(child, {
+      index
+    });
+  }), currentTab && ___EmotionJSX("div", {
+    css: /*#__PURE__*/css({
+      position: "absolute",
+      bottom: underline === "none" ? 0 : -3,
+      width: 200,
+      height: 3,
+      backgroundColor: theme.palette.intentions.primary.main,
+      transition: "opacity ".concat(theme.transitions.duration.standard, " ").concat(theme.transitions.easing.sharp, ",\n                            left ").concat(theme.transitions.duration.shortest, " ").concat(theme.transitions.easing.easeInOut, ",\n                            width ").concat(theme.transitions.duration.shortest, " ").concat(theme.transitions.easing.easeInOut)
+    }, process.env.NODE_ENV === "production" ? "" : ";label:TabGroup;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9UYWJzL1RhYkdyb3VwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnRXlCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9UYWJzL1RhYkdyb3VwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiXG5pbXBvcnQgeyB1c2VUYWIgfSBmcm9tIFwiLi91c2VUYWJcIlxuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiLi4vdGhlbWVcIlxuaW1wb3J0IHsgdXNlV2luZG93UmVzaXplIH0gZnJvbSBcIi4uL2hvb2tzL3VzZVdpbmRvd1Jlc2l6ZVwiXG5pbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiXG5cbmV4cG9ydCBpbnRlcmZhY2UgVGFiR3JvdXBQcm9wcyBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxIVE1MRGl2RWxlbWVudD4ge1xuICAgIHBvc2l0aW9uPzogXCJzdGFydFwiIHwgXCJjZW50ZXJcIiB8IFwiZW5kXCJcbiAgICB1bmRlcmxpbmU/OiBcIm5vbmVcIiB8IFwiaG92ZXJcIiB8IFwiYWx3YXlzXCJcbn1cblxuY29uc3QgcG9zaXRpb25zID0ge1xuICAgIHN0YXJ0OiBcImZsZXgtc3RhcnRcIixcbiAgICBjZW50ZXI6IFwiY2VudGVyXCIsXG4gICAgZW5kOiBcImZsZXgtZW5kXCJcbn1cblxuY29uc3QgdW5kZXJsaW5lU3R5bGVzID0ge1xuICAgIG5vbmU6IHVuZGVmaW5lZCxcbiAgICBhbHdheXM6IGNzc2BcbiAgICAgICAgYm9yZGVyLWJvdHRvbTogM3B4IHNvbGlkICNlMGUwZTA7XG4gICAgYCxcbiAgICBob3ZlcjogY3NzYFxuICAgICAgICBib3JkZXItYm90dG9tOiAzcHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgICAgIHRyYW5zaXRpb246IDAuMnM7XG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgICAgYm9yZGVyLWJvdHRvbTogM3B4IHNvbGlkICNlMGUwZTA7XG4gICAgICAgIH1cbiAgICBgXG59XG5cbmV4cG9ydCBjb25zdCBUYWJHcm91cDogUmVhY3QuRkM8VGFiR3JvdXBQcm9wcz4gPSAoeyBwb3NpdGlvbiA9IFwic3RhcnRcIiwgdW5kZXJsaW5lID0gXCJub25lXCIsIGNoaWxkcmVuIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKClcbiAgICBjb25zdCB7IGN1cnJlbnRUYWIgfSA9IHVzZVRhYigpXG4gICAgY29uc3QgeyB3aWR0aCB9ID0gdXNlV2luZG93UmVzaXplKClcbiAgICBjb25zdCBbaW5kaWNhdG9yU3R5bGUsIHNldEluZGljYXRvclN0eWxlXSA9IHVzZVN0YXRlKHtcbiAgICAgICAgb3BhY2l0eTogMCxcbiAgICAgICAgd2lkdGg6IDAsXG4gICAgICAgIGxlZnQ6IDBcbiAgICB9KVxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGlmIChjdXJyZW50VGFiKVxuICAgICAgICAgICAgc2V0SW5kaWNhdG9yU3R5bGUoe1xuICAgICAgICAgICAgICAgIG9wYWNpdHk6IDEsXG4gICAgICAgICAgICAgICAgd2lkdGg6IGN1cnJlbnRUYWIub2Zmc2V0V2lkdGgsXG4gICAgICAgICAgICAgICAgbGVmdDogY3VycmVudFRhYi5vZmZzZXRMZWZ0XG4gICAgICAgICAgICB9KVxuICAgIH0sIFtjdXJyZW50VGFiLCB3aWR0aF0pXG4gICAgcmV0dXJuIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBmbGV4LXdyYXA6IG5vd3JhcDtcbiAgICAgICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6ICR7cG9zaXRpb25zW3Bvc2l0aW9uXX07XG4gICAgICAgICAgICAgICAgJHt1bmRlcmxpbmVTdHlsZXNbdW5kZXJsaW5lXX1cbiAgICAgICAgICAgIGB9XG4gICAgICAgID5cbiAgICAgICAgICAgIHtSZWFjdC5DaGlsZHJlbi5tYXAoY2hpbGRyZW4gYXMgUmVhY3QuUmVhY3RFbGVtZW50W10sIChjaGlsZCwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgICAgICByZXR1cm4gUmVhY3QuY2xvbmVFbGVtZW50KGNoaWxkLCB7IGluZGV4IH0pXG4gICAgICAgICAgICB9KX1cbiAgICAgICAgICAgIHtjdXJyZW50VGFiICYmIChcbiAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgIGNzcz17Y3NzKHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICBib3R0b206IHVuZGVybGluZSA9PT0gXCJub25lXCIgPyAwIDogLTMsXG4gICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogMjAwLFxuICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiAzLFxuICAgICAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5wYWxldHRlLmludGVudGlvbnMucHJpbWFyeS5tYWluLFxuICAgICAgICAgICAgICAgICAgICAgICAgdHJhbnNpdGlvbjogYG9wYWNpdHkgJHt0aGVtZS50cmFuc2l0aW9ucy5kdXJhdGlvbi5zdGFuZGFyZH0gJHt0aGVtZS50cmFuc2l0aW9ucy5lYXNpbmcuc2hhcnB9LFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGxlZnQgJHt0aGVtZS50cmFuc2l0aW9ucy5kdXJhdGlvbi5zaG9ydGVzdH0gJHt0aGVtZS50cmFuc2l0aW9ucy5lYXNpbmcuZWFzZUluT3V0fSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB3aWR0aCAke3RoZW1lLnRyYW5zaXRpb25zLmR1cmF0aW9uLnNob3J0ZXN0fSAke3RoZW1lLnRyYW5zaXRpb25zLmVhc2luZy5lYXNlSW5PdXR9YFxuICAgICAgICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgICAgICAgICAgc3R5bGU9e2luZGljYXRvclN0eWxlfVxuICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICApXG59XG4iXX0= */"),
+    style: indicatorStyle
+  }));
+};
+//# sourceMappingURL=TabGroup.js.map

package/dist/esm/Tabs/TabGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tabs/TabGroup.tsx"],"names":["css","useTab","useTheme","useWindowResize","React","useEffect","useState","positions","start","center","end","underlineStyles","none","undefined","always","hover","TabGroup","position","underline","children","theme","currentTab","width","indicatorStyle","setIndicatorStyle","opacity","left","offsetWidth","offsetLeft","Children","map","child","index","cloneElement","bottom","height","backgroundColor","palette","intentions","primary","main","transition","transitions","duration","standard","easing","sharp","shortest","easeInOut"],"mappings":"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","sourcesContent":["import { css } from \"@emotion/react\"\nimport { useTab } from \"./useTab\"\nimport { useTheme } from \"../theme\"\nimport { useWindowResize } from \"../hooks/useWindowResize\"\nimport React, { useEffect, useState } from \"react\"\n\nexport interface TabGroupProps extends React.HTMLProps<HTMLDivElement> {\n    position?: \"start\" | \"center\" | \"end\"\n    underline?: \"none\" | \"hover\" | \"always\"\n}\n\nconst positions = {\n    start: \"flex-start\",\n    center: \"center\",\n    end: \"flex-end\"\n}\n\nconst underlineStyles = {\n    none: undefined,\n    always: css`\n        border-bottom: 3px solid #e0e0e0;\n    `,\n    hover: css`\n        border-bottom: 3px solid transparent;\n        transition: 0.2s;\n        &:hover {\n            border-bottom: 3px solid #e0e0e0;\n        }\n    `\n}\n\nexport const TabGroup: React.FC<TabGroupProps> = ({ position = \"start\", underline = \"none\", children }) => {\n    const theme = useTheme()\n    const { currentTab } = useTab()\n    const { width } = useWindowResize()\n    const [indicatorStyle, setIndicatorStyle] = useState({\n        opacity: 0,\n        width: 0,\n        left: 0\n    })\n    useEffect(() => {\n        if (currentTab)\n            setIndicatorStyle({\n                opacity: 1,\n                width: currentTab.offsetWidth,\n                left: currentTab.offsetLeft\n            })\n    }, [currentTab, width])\n    return (\n        <div\n            css={css`\n                position: relative;\n                box-sizing: border-box;\n                display: flex;\n                flex-wrap: nowrap;\n                justify-content: ${positions[position]};\n                ${underlineStyles[underline]}\n            `}\n        >\n            {React.Children.map(children as React.ReactElement[], (child, index) => {\n                return React.cloneElement(child, { index })\n            })}\n            {currentTab && (\n                <div\n                    css={css({\n                        position: \"absolute\",\n                        bottom: underline === \"none\" ? 0 : -3,\n                        width: 200,\n                        height: 3,\n                        backgroundColor: theme.palette.intentions.primary.main,\n                        transition: `opacity ${theme.transitions.duration.standard} ${theme.transitions.easing.sharp},\n                            left ${theme.transitions.duration.shortest} ${theme.transitions.easing.easeInOut},\n                            width ${theme.transitions.duration.shortest} ${theme.transitions.easing.easeInOut}`\n                    })}\n                    style={indicatorStyle}\n                />\n            )}\n        </div>\n    )\n}\n"],"file":"TabGroup.js"}