@ledgerhq/react-ui 0.12.1 → 0.13.0-next.0

package/lib/cjs/components/tabs/Pill/Pill.stories.js

@@ -1,34 +1,41 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Pill_stories_exports = {};
+__export(Pill_stories_exports, {
   View: () => View,
   default: () => Pill_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_index = __toModule(require("./index"));
-var import_Text = __toModule(require("../../asorted/Text"));
-var import_Icon = __toModule(require("../../asorted/Icon"));
+module.exports = __toCommonJS(Pill_stories_exports);
+var import_react = __toESM(require("react"));
+var import_index = __toESM(require("./index"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_Icon = __toESM(require("../../asorted/Icon"));
 var Pill_stories_default = {
   title: "Tabs/View",
   component: import_index.default,
@@ -41,27 +48,13 @@ var Pill_stories_default = {
 const navItems = ["Manager", "MenuBurger", "Apple", "Crown", "Settings"];
 function Sample({ children, ...args }) {
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(args.initialActiveIndex);
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    style: { marginBottom: "10px" }
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    style: { width: "100px" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...args,
-    onTabChange: setActiveIndex
-  }, children)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "subtitle"
-  }, "Active index: ", activeIndex), /* @__PURE__ */ import_react.default.createElement("hr", null));
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: "10px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100px" } }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, onTabChange: setActiveIndex }, children)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "subtitle" }, "Active index: ", activeIndex), /* @__PURE__ */ import_react.default.createElement("hr", null));
 }
 const View = (args) => navItems.reduce((acc, _, index) => {
-  const labels = navItems.slice(0, index + 1).map((label) => /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-    name: label
-  }));
+  const labels = navItems.slice(0, index + 1).map((label) => /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: label }));
   return [
     ...acc,
-    /* @__PURE__ */ import_react.default.createElement(Sample, {
-      ...args,
-      key: index
-    }, labels)
+    /* @__PURE__ */ import_react.default.createElement(Sample, { ...args, key: index }, labels)
   ];
 }, []);
 View.args = {

package/lib/cjs/components/tabs/Pill/Pill.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Pill/Pill.stories.tsx"],
   "sourcesContent": ["import React, { useState } from \"react\";\n\nimport PillTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Icon from \"../../asorted/Icon\";\n\nexport default {\n  title: \"Tabs/View\",\n  component: PillTabs,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst navItems = [\"Manager\", \"MenuBurger\", \"Apple\", \"Crown\", \"Settings\"];\n\nfunction Sample({ children, ...args }: Props) {\n  const [activeIndex, setActiveIndex] = useState(args.initialActiveIndex);\n  return (\n    <div style={{ marginBottom: \"10px\" }}>\n      <div style={{ width: \"100px\" }}>\n        <PillTabs {...args} onTabChange={setActiveIndex}>\n          {children}\n        </PillTabs>\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const View = (args: Props): JSX.Element[] =>\n  navItems.reduce<JSX.Element[]>((acc, _, index) => {\n    const labels = navItems.slice(0, index + 1).map((label) => <Icon name={label} />);\n    return [\n      ...acc,\n      <Sample {...args} key={index}>\n        {labels}\n      </Sample>,\n    ];\n  }, []);\n\nView.args = {\n  initialActiveIndex: 1,\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AACjB,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM;AAAA;AAAA;AAAA;AAKvB,MAAM,WAAW,CAAC,WAAW,cAAc,SAAS,SAAS;AAE7D,gBAAgB,EAAE,aAAa,QAAe;AAC5C,QAAM,CAAC,aAAa,kBAAkB,2BAAS,KAAK;AACpD,SACE,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,cAAc;AAAA,KAC1B,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA,KACnB,mDAAC,sBAAD;AAAA,OAAc;AAAA,IAAM,aAAa;AAAA,KAC9B,YAGL,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,KAAW,kBAAe,cACxC,mDAAC,MAAD;AAAA;AAKC,MAAM,OAAO,CAAC,SACnB,SAAS,OAAsB,CAAC,KAAK,GAAG,UAAU;AAChD,QAAM,SAAS,SAAS,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,UAAU,mDAAC,qBAAD;AAAA,IAAM,MAAM;AAAA;AACvE,SAAO;AAAA,IACL,GAAG;AAAA,IACH,mDAAC,QAAD;AAAA,SAAY;AAAA,MAAM,KAAK;AAAA,OACpB;AAAA;AAAA,GAGJ;AAEL,KAAK,OAAO;AAAA,EACV,oBAAoB;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAgC;AAChC,kBAAiB;AACjB,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,WAAW,cAAc,SAAS,SAAS,UAAU;AAEvE,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAU;AAC5C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK,kBAAkB;AACtE,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,OAAO,KACjC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,KAC3B,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,aAAa,kBAC9B,QACH,CACF,GACA,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,cAAW,kBAAe,WAAY,GACpD,6BAAAD,QAAA,cAAC,UAAG,CACN;AAEJ;AAEO,MAAM,OAAO,CAAC,SACnB,SAAS,OAAsB,CAAC,KAAK,GAAG,UAAU;AAChD,QAAM,SAAS,SAAS,MAAM,GAAG,QAAQ,CAAC,EAAE,IAAI,CAAC,UAAU,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAM,OAAO,CAAE;AAChF,SAAO;AAAA,IACL,GAAG;AAAA,IACH,6BAAAF,QAAA,cAAC,UAAQ,GAAG,MAAM,KAAK,SACpB,MACH;AAAA,EACF;AACF,GAAG,CAAC,CAAC;AAEP,KAAK,OAAO;AAAA,EACV,oBAAoB;AACtB;",
+  "names": ["PillTabs", "React", "Text", "Icon"]
 }

package/lib/cjs/components/tabs/Pill/index.js

@@ -1,33 +1,40 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Pill_exports = {};
+__export(Pill_exports, {
   default: () => PillTabs
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_styled_system = __toModule(require("styled-system"));
-var import_Flex = __toModule(require("../../layout/Flex"));
+module.exports = __toCommonJS(Pill_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_styled_system = require("styled-system");
+var import_Flex = __toESM(require("../../layout/Flex"));
 const Pill = import_styled_components.default.div`
   display: inline-flex;
   & > :first-child {
@@ -73,13 +80,17 @@ function PillTabs({
   initialActiveIndex
 }) {
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(initialActiveIndex);
-  return /* @__PURE__ */ import_react.default.createElement(Pill, null, import_react.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react.default.createElement(Item, {
-    key: index,
-    "data-active": index === activeIndex,
-    onClick: () => {
-      setActiveIndex(index);
-      onTabChange && onTabChange(index);
-    }
-  }, child)));
+  return /* @__PURE__ */ import_react.default.createElement(Pill, null, import_react.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react.default.createElement(
+    Item,
+    {
+      key: index,
+      "data-active": index === activeIndex,
+      onClick: () => {
+        setActiveIndex(index);
+        onTabChange && onTabChange(index);
+      }
+    },
+    child
+  )));
 }
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/tabs/Pill/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Pill/index.tsx"],
   "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps } from \"styled-system\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (activeIndex: number) => void;\n  /**\n   * The tab index to mark as active when rendering for the first time.\n   * If omitted, then initially no tabs will be selected.\n   */\n  initialActiveIndex?: number;\n}>;\n\nconst Pill = styled.div<BorderProps>`\n  display: inline-flex;\n  & > :first-child {\n    border-top-left-radius: 20px;\n    border-bottom-left-radius: 20px;\n    padding-left: 12px;\n  }\n  & > :last-child {\n    border-top-right-radius: 20px;\n    border-bottom-right-radius: 20px;\n    padding-right: 12px;\n  }\n  & > :not(:first-child) {\n    border-left-width: 0;\n  }\n  ${border};\n`;\nconst Item = styled(Flex).attrs({ flex: 1, justifyContent: \"center\", alignItems: \"center\" })`\n  cursor: pointer;\n  padding: 8px 10px 8px 10px;\n  border: 1px solid;\n  &[data-active=\"false\"] {\n    color: ${(p) => p.theme.colors.neutral.c80};\n    background-color: ${(p) => p.theme.colors.neutral.c00};\n    border-color: ${(p) => p.theme.colors.neutral.c40};\n  }\n  &[data-active=\"true\"] {\n    color: ${(p) => p.theme.colors.neutral.c00};\n    background-color: ${(p) => p.theme.colors.neutral.c100};\n    border-color: ${(p) => p.theme.colors.neutral.c100};\n\n    &:not(:last-child) {\n      border-right-width: 0;\n    }\n  }\n  &[data-active=\"true\"] + div {\n    border-left-width: 1px;\n  }\n`;\n\nexport default function PillTabs({\n  children,\n  onTabChange,\n  initialActiveIndex,\n}: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Pill>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          data-active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Pill>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,2BAAoC;AACpC,kBAAiB;AAcjB,MAAM,OAAO,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAehB;AAAA;AAEJ,MAAM,OAAO,sCAAO,qBAAM,MAAM,EAAE,MAAM,GAAG,gBAAgB,UAAU,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,aAKpE,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGrC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWnC,kBAAkB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,GACqB;AACrB,QAAM,CAAC,aAAa,kBAAkB,2BAAS;AAC/C,SACE,mDAAC,MAAD,MACG,qBAAM,SAAS,QAAQ,UAAU,IAAI,CAAC,OAAO,UAC5C,mDAAC,MAAD;AAAA,IACE,KAAK;AAAA,IACL,eAAa,UAAU;AAAA,IACvB,SAAS,MAAM;AACb,qBAAe;AACf,qBAAe,YAAY;AAAA;AAAA,KAG5B;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,2BAAoC;AACpC,kBAAiB;AAcjB,MAAM,OAAO,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAehB;AAAA;AAEJ,MAAM,WAAO,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM,EAAE,MAAM,GAAG,gBAAgB,UAAU,YAAY,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAK9E,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,aAGrC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACnB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClC,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWnC,SAAR,SAA0B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,YACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa,UAAU;AAAA,MACvB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
+  "names": ["styled", "Flex", "React"]
 }

package/lib/cjs/components/tabs/Tabs/Tabs.stories.js

@@ -1,34 +1,41 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Tabs_stories_exports = {};
+__export(Tabs_stories_exports, {
   Tabs: () => Tabs,
   default: () => Tabs_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_Tabs = __toModule(require("../../tabs/Tabs"));
-var import_Text = __toModule(require("../../asorted/Text"));
+module.exports = __toCommonJS(Tabs_stories_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Tabs = __toESM(require("../../tabs/Tabs"));
+var import_Text = __toESM(require("../../asorted/Text"));
 var Tabs_stories_default = {
   title: "Tabs/Tabs",
   component: import_Tabs.default,
@@ -100,22 +107,9 @@ const myTabs = [
 ];
 function Sample(args) {
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    style: { marginBottom: "40px" }
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    style: { width: "100%" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_Tabs.default, {
-    ...args,
-    onTabChange: setActiveIndex,
-    tabs: args.tabs
-  })), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "subtitle"
-  }, "Active index: ", activeIndex), /* @__PURE__ */ import_react.default.createElement("hr", null));
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: "40px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_Tabs.default, { ...args, onTabChange: setActiveIndex, tabs: args.tabs })), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "subtitle" }, "Active index: ", activeIndex), /* @__PURE__ */ import_react.default.createElement("hr", null));
 }
 const Tabs = () => myTabs.reduce((acc, tabs, index) => {
-  return [...acc, /* @__PURE__ */ import_react.default.createElement(Sample, {
-    key: index,
-    tabs
-  })];
+  return [...acc, /* @__PURE__ */ import_react.default.createElement(Sample, { key: index, tabs })];
 }, []);
 //# sourceMappingURL=Tabs.stories.js.map

package/lib/cjs/components/tabs/Tabs/Tabs.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Tabs/Tabs.stories.tsx"],
   "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport TabsComponent, { Props, TabContent } from \"../../tabs/Tabs\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n  title: \"Tabs/Tabs\",\n  component: TabsComponent,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst Content = styled.div`\n  padding: 10px;\n`;\n\nconst myTabs: TabContent[][] = [\n  [\n    {\n      index: 0,\n      title: \"Title 1\",\n      badge: 2,\n      Component: <Content>Have a break, have a KitKat !</Content>,\n    },\n    {\n      index: 1,\n      title: \"Title 2\",\n      Component: (\n        <Content>I'm disabled below, you will never see me... So stay here pls ^^</Content>\n      ),\n    },\n    {\n      index: 2,\n      title: \"Title 3\",\n      badge: \"banana\",\n      Component: <Content>Look mom i'm on tv !</Content>,\n    },\n  ],\n  [\n    {\n      index: 0,\n      title: \"Title 1\",\n      disabled: false,\n      badge: 2,\n      Component: <Content>Pst ! Title 2 is disabled. You can't see it ...</Content>,\n    },\n    {\n      index: 1,\n      title: \"Title 2\",\n      disabled: true,\n      Component: <Content>I'm disabled, you will never see me...</Content>,\n    },\n    {\n      index: 2,\n      title: \"Title 3 a little bit longer\",\n      disabled: false,\n      badge: \"banana\",\n      Component: <Content>Pst ! Title 2 is disabled. You can't see it ...</Content>,\n    },\n  ],\n  [\n    {\n      index: 0,\n      title: \"One\",\n      badge: 1,\n      Component: <Content>One is the first</Content>,\n    },\n    {\n      index: 1,\n      title: \"Two\",\n      badge: 2,\n      Component: <Content>Two is the second</Content>,\n    },\n  ],\n];\n\nfunction Sample(args: Props) {\n  const [activeIndex, setActiveIndex] = useState(0);\n  return (\n    <div style={{ marginBottom: \"40px\" }}>\n      <div style={{ width: \"100%\" }}>\n        <TabsComponent {...args} onTabChange={setActiveIndex} tabs={args.tabs} />\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const Tabs = (): React.ReactNode[] =>\n  myTabs.reduce<React.ReactNode[]>((acc, tabs, index) => {\n    return [...acc, <Sample key={index} tabs={tabs} />];\n  }, []);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiD;AACjD,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM;AAAA;AAAA;AAAA;AAKvB,MAAM,UAAU,iCAAO;AAAA;AAAA;AAIvB,MAAM,SAAyB;AAAA,EAC7B;AAAA,IACE;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA,IAEtB;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WACE,mDAAC,SAAD,MAAS;AAAA;AAAA,IAGb;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA;AAAA,EAGxB;AAAA,IACE;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA,IAEtB;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA,IAEtB;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA;AAAA,EAGxB;AAAA,IACE;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA,IAEtB;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,mDAAC,SAAD,MAAS;AAAA;AAAA;AAAA;AAK1B,gBAAgB,MAAa;AAC3B,QAAM,CAAC,aAAa,kBAAkB,2BAAS;AAC/C,SACE,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,cAAc;AAAA,KAC1B,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA,KACnB,mDAAC,qBAAD;AAAA,OAAmB;AAAA,IAAM,aAAa;AAAA,IAAgB,MAAM,KAAK;AAAA,OAEnE,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,KAAW,kBAAe,cACxC,mDAAC,MAAD;AAAA;AAKC,MAAM,OAAO,MAClB,OAAO,OAA0B,CAAC,KAAK,MAAM,UAAU;AACrD,SAAO,CAAC,GAAG,KAAK,mDAAC,QAAD;AAAA,IAAQ,KAAK;AAAA,IAAO;AAAA;AAAA,GACnC;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiD;AACjD,kBAAiB;AAEjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,YAAAA;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,UAAU,yBAAAC,QAAO;AAAA;AAAA;AAIvB,MAAM,SAAyB;AAAA,EAC7B;AAAA,IACE;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,6BAAAC,QAAA,cAAC,eAAQ,+BAA6B;AAAA,IACnD;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WACE,6BAAAA,QAAA,cAAC,eAAQ,kEAAgE;AAAA,IAE7E;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,6BAAAA,QAAA,cAAC,eAAQ,sBAAoB;AAAA,IAC1C;AAAA,EACF;AAAA,EACA;AAAA,IACE;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,6BAAAA,QAAA,cAAC,eAAQ,iDAA+C;AAAA,IACrE;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,6BAAAA,QAAA,cAAC,eAAQ,wCAAsC;AAAA,IAC5D;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,6BAAAA,QAAA,cAAC,eAAQ,iDAA+C;AAAA,IACrE;AAAA,EACF;AAAA,EACA;AAAA,IACE;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,6BAAAA,QAAA,cAAC,eAAQ,kBAAgB;AAAA,IACtC;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,WAAW,6BAAAA,QAAA,cAAC,eAAQ,mBAAiB;AAAA,IACvC;AAAA,EACF;AACF;AAEA,SAAS,OAAO,MAAa;AAC3B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,CAAC;AAChD,SACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,cAAc,OAAO,KACjC,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,OAAO,KAC1B,6BAAAA,QAAA,cAAC,YAAAF,SAAA,EAAe,GAAG,MAAM,aAAa,gBAAgB,MAAM,KAAK,MAAM,CACzE,GACA,6BAAAE,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,cAAW,kBAAe,WAAY,GACpD,6BAAAD,QAAA,cAAC,UAAG,CACN;AAEJ;AAEO,MAAM,OAAO,MAClB,OAAO,OAA0B,CAAC,KAAK,MAAM,UAAU;AACrD,SAAO,CAAC,GAAG,KAAK,6BAAAA,QAAA,cAAC,UAAO,KAAK,OAAO,MAAY,CAAE;AACpD,GAAG,CAAC,CAAC;",
+  "names": ["TabsComponent", "styled", "React", "Text"]
 }

package/lib/cjs/components/tabs/Tabs/index.js

@@ -1,34 +1,41 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Tabs_exports = {};
+__export(Tabs_exports, {
   default: () => Tabs
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_Flex = __toModule(require("../../layout/Flex"));
-var import_Tag = __toModule(require("../../Tag"));
-var import_Text = __toModule(require("../../asorted/Text"));
+module.exports = __toCommonJS(Tabs_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_Tag = __toESM(require("../../Tag"));
+var import_Text = __toESM(require("../../asorted/Text"));
 const Container = (0, import_styled_components.default)(import_Flex.default).attrs({
   flexDirection: "column",
   justifyContent: "center",
@@ -86,20 +93,11 @@ const Badge = (0, import_styled_components.default)(import_Tag.default).attrs((p
 `;
 const MyBottomBar = (props) => {
   const { width, left } = props;
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(HeaderBottomBarFixed, null), /* @__PURE__ */ import_react.default.createElement(HeaderBottomBarMoving, {
-    width,
-    left
-  }));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(HeaderBottomBarFixed, null), /* @__PURE__ */ import_react.default.createElement(HeaderBottomBarMoving, { width, left }));
 };
 const HeaderElement = (0, import_react.forwardRef)((props, ref) => {
   const { onClick, badge, disabled, selected, title } = props;
-  return /* @__PURE__ */ import_react.default.createElement(TabHeaderBox, {
-    ref,
-    disabled,
-    onClick
-  }, /* @__PURE__ */ import_react.default.createElement(HeaderTitle, {
-    selected
-  }, title), (badge || badge === 0) && /* @__PURE__ */ import_react.default.createElement(Badge, null, badge));
+  return /* @__PURE__ */ import_react.default.createElement(TabHeaderBox, { ref, disabled, onClick }, /* @__PURE__ */ import_react.default.createElement(HeaderTitle, { selected }, title), (badge || badge === 0) && /* @__PURE__ */ import_react.default.createElement(Badge, null, badge));
 });
 const MainContent = (0, import_styled_components.default)(import_Flex.default).attrs({
   flex: 1
@@ -115,13 +113,17 @@ function Tabs(props) {
   const mainTab = activeIndex >= 0 ? tabs[activeIndex] : null;
   const refs = tabs.map(() => (0, import_react.createRef)());
   (0, import_react.useEffect)(() => {
+    var _a;
     const newIndex = props.activeIndex || activeIndex;
     setActiveIndex(newIndex);
     if (refs[0].current) {
       const refIndex = tabs.findIndex((t) => t.index === newIndex);
       const refsToHandle = refs.slice(0, refIndex);
-      const width = refs[refIndex].current?.offsetWidth || 0;
-      const left = refsToHandle.reduce((total, ref) => total + (ref.current?.offsetWidth || 0), 0);
+      const width = ((_a = refs[refIndex].current) == null ? void 0 : _a.offsetWidth) || 0;
+      const left = refsToHandle.reduce((total, ref) => {
+        var _a2;
+        return total + (((_a2 = ref.current) == null ? void 0 : _a2.offsetWidth) || 0);
+      }, 0);
       updateBottomBar({
         width,
         left
@@ -135,16 +137,16 @@ function Tabs(props) {
       onTabChange && onTabChange(index);
     }
   };
-  return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(TabHeader, null, /* @__PURE__ */ import_react.default.createElement(TabHeaderContent, null, tabs.map((tab, i) => /* @__PURE__ */ import_react.default.createElement(HeaderElement, {
-    ref: refs[i],
-    title: tab.title,
-    selected: activeIndex === tab.index,
-    badge: tab.badge,
-    disabled: !!tab.disabled,
-    onClick: () => onTabClick(tab.index)
-  }))), /* @__PURE__ */ import_react.default.createElement(MyBottomBar, {
-    width: bottomBar.width,
-    left: bottomBar.left
-  })), /* @__PURE__ */ import_react.default.createElement(MainContent, null, mainTab && mainTab.Component));
+  return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(TabHeader, null, /* @__PURE__ */ import_react.default.createElement(TabHeaderContent, null, tabs.map((tab, i) => /* @__PURE__ */ import_react.default.createElement(
+    HeaderElement,
+    {
+      ref: refs[i],
+      title: tab.title,
+      selected: activeIndex === tab.index,
+      badge: tab.badge,
+      disabled: !!tab.disabled,
+      onClick: () => onTabClick(tab.index)
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement(MyBottomBar, { width: bottomBar.width, left: bottomBar.left })), /* @__PURE__ */ import_react.default.createElement(MainContent, null, mainTab && mainTab.Component));
 }
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/tabs/Tabs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/tabs/Tabs/index.tsx"],
   "sourcesContent": ["import React, { useState, useEffect, createRef, forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\nimport Tag from \"../../Tag\";\nimport Text from \"../../asorted/Text\";\n\nexport interface TabContent {\n  index: number;\n  title: string;\n  disabled?: boolean;\n  badge?: string | number;\n  Component: React.ReactFragment;\n}\n\nexport type Props = React.PropsWithChildren<{\n  /**\n   * An optional callback that will be called when the active tab changes.\n   */\n  onTabChange?: (index: number) => void;\n  /**\n   * The tab index to mark as active when rendering for the first time.\n   * If omitted, then initially no tabs will be selected.\n   */\n  activeIndex?: number;\n  tabs: TabContent[];\n}>;\n\nconst Container = styled(Flex).attrs({\n  flexDirection: \"column\",\n  justifyContent: \"center\",\n  alignItems: \"center\",\n})``;\n\nconst TabHeader = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n`;\n\nconst TabHeaderContent = styled(Flex).attrs({\n  flex: 1,\n  alignItems: \"center\",\n})`\n  width: 100%;\n`;\n\nconst TabHeaderBox = styled.div<{ disabled: boolean }>`\n  display: flex;\n  flex-grow: inherit;\n  justify-content: center;\n  text-align: center;\n  cursor: ${(p) => (p.disabled ? \"default\" : \"pointer\")};\n  padding: 8px 12px;\n`;\n\nconst HeaderTitle = styled(Text).attrs({\n  fontWeight: \"600\",\n})<{ selected: boolean }>`\n  margin-inline: 12px;\n  color: ${(p) => (p.selected ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c80)};\n`;\n\nconst HeaderBottomBarFixed = styled(Flex).attrs({\n  flex: 1,\n})`\n  width: 100%;\n  position: relative;\n  top: 3px;\n  border-bottom: 1px solid ${(p) => p.theme.colors.neutral.c40};\n`;\n\nconst HeaderBottomBarMoving = styled.div<HeaderBottomBarProps>`\n  position: relative;\n  left: ${(p) => p.left}px;\n  width: ${(p) => p.width}px;\n  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  border-bottom: solid 3px;\n  border-bottom-color: ${(p) => p.theme.colors.primary.c70};\n`;\n\nconst Badge = styled(Tag).attrs((p) => ({\n  borderRadius: p.theme.radii[3],\n  backgroundColor: p.theme.colors.primary.c70,\n  color: p.theme.colors.neutral.c00,\n}))`\n  padding: 5px;\n  min-width: 24px;\n`;\n\ninterface HeaderBottomBarProps {\n  left: number;\n  width: number;\n}\n\nconst MyBottomBar = (props: HeaderBottomBarProps) => {\n  const { width, left } = props;\n  return (\n    <>\n      <HeaderBottomBarFixed />\n      <HeaderBottomBarMoving width={width} left={left} />\n    </>\n  );\n};\n\ninterface HeaderElementProps {\n  title: string;\n  selected: boolean;\n  disabled: boolean;\n  badge?: string | number;\n  onClick: () => void;\n}\n\nconst HeaderElement = forwardRef<HTMLDivElement, HeaderElementProps>((props, ref) => {\n  const { onClick, badge, disabled, selected, title } = props;\n\n  return (\n    <TabHeaderBox ref={ref} disabled={disabled} onClick={onClick}>\n      <HeaderTitle selected={selected}>{title}</HeaderTitle>\n      {(badge || badge === 0) && <Badge>{badge}</Badge>}\n    </TabHeaderBox>\n  );\n});\n\nconst MainContent = styled(Flex).attrs({\n  flex: 1,\n})<{ active?: boolean }>`\n  width: 100%;\n  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};\n  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};\n`;\n\nexport default function Tabs(props: Props): JSX.Element {\n  const { tabs, onTabChange } = props;\n  const [activeIndex, setActiveIndex] = useState(tabs[0].index);\n  const [bottomBar, updateBottomBar] = useState<HeaderBottomBarProps>({ left: 0, width: 0 });\n  const mainTab = activeIndex >= 0 ? tabs[activeIndex] : null;\n  const refs = tabs.map(() => createRef<HTMLDivElement>());\n\n  useEffect(() => {\n    const newIndex = props.activeIndex || activeIndex;\n    setActiveIndex(newIndex);\n\n    if (refs[0].current) {\n      const refIndex = tabs.findIndex((t) => t.index === newIndex);\n      const refsToHandle = refs.slice(0, refIndex);\n      const width = refs[refIndex].current?.offsetWidth || 0;\n      const left = refsToHandle.reduce((total, ref) => total + (ref.current?.offsetWidth || 0), 0);\n      updateBottomBar({\n        width,\n        left,\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeIndex]);\n\n  const onTabClick = (index: number) => {\n    const tab = tabs.find((t) => t.index === index);\n    if (tab && !tab.disabled) {\n      setActiveIndex(index);\n      onTabChange && onTabChange(index);\n    }\n  };\n\n  return (\n    <Container>\n      <TabHeader>\n        <TabHeaderContent>\n          {tabs.map((tab, i) => (\n            <HeaderElement\n              ref={refs[i]}\n              title={tab.title}\n              selected={activeIndex === tab.index}\n              badge={tab.badge}\n              disabled={!!tab.disabled}\n              onClick={() => onTabClick(tab.index)}\n            />\n          ))}\n        </TabHeaderContent>\n        <MyBottomBar width={bottomBar.width} left={bottomBar.left} />\n      </TabHeader>\n      <MainContent>{mainTab && mainTab.Component}</MainContent>\n    </Container>\n  );\n}\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["styled", "Flex", "Text", "Tag", "React", "_a"]
 }

package/lib/cjs/components/tabs/index.js

@@ -1,34 +1,41 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tabs_exports = {};
+__export(tabs_exports, {
   Bar: () => import_Bar.default,
   Chip: () => import_Chip.default,
   Pill: () => import_Pill.default,
   Tabs: () => import_Tabs.default
 });
-var import_Bar = __toModule(require("./Bar"));
-var import_Pill = __toModule(require("./Pill"));
-var import_Tabs = __toModule(require("./Tabs"));
-var import_Chip = __toModule(require("./Chip"));
+module.exports = __toCommonJS(tabs_exports);
+var import_Bar = __toESM(require("./Bar"));
+var import_Pill = __toESM(require("./Pill"));
+var import_Tabs = __toESM(require("./Tabs"));
+var import_Chip = __toESM(require("./Chip"));
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/tabs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/tabs/index.ts"],
   "sourcesContent": ["export { default as Bar } from \"./Bar\";\nexport { default as Pill } from \"./Pill\";\nexport { default as Tabs } from \"./Tabs\";\nexport { default as Chip } from \"./Chip\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAA+B;AAC/B,kBAAgC;AAChC,kBAAgC;AAChC,kBAAgC;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAA+B;AAC/B,kBAAgC;AAChC,kBAAgC;AAChC,kBAAgC;",
   "names": []
 }