@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.stories.js

@@ -0,0 +1,118 @@
+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 });
+  }
+  return target;
+};
+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, {
+  Default: () => Default,
+  default: () => SideBar_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_client_api = __toModule(require("@storybook/client-api"));
+var import_SideBar = __toModule(require("./SideBar"));
+var import_addon_actions = __toModule(require("@storybook/addon-actions"));
+var import_PortfolioMedium = __toModule(require("@ledgerhq/icons-ui/react/PortfolioMedium"));
+var import_WalletMedium = __toModule(require("@ledgerhq/icons-ui/react/WalletMedium"));
+var import_ManagerMedium = __toModule(require("@ledgerhq/icons-ui/react/ManagerMedium"));
+var import_ArrowTopMedium = __toModule(require("@ledgerhq/icons-ui/react/ArrowTopMedium"));
+var import_ArrowBottomMedium = __toModule(require("@ledgerhq/icons-ui/react/ArrowBottomMedium"));
+var import_BuyCryptoAltMedium = __toModule(require("@ledgerhq/icons-ui/react/BuyCryptoAltMedium"));
+var import_BuyCryptoMedium = __toModule(require("@ledgerhq/icons-ui/react/BuyCryptoMedium"));
+var import_LendMedium = __toModule(require("@ledgerhq/icons-ui/react/LendMedium"));
+var import_NanoFoldedMedium = __toModule(require("@ledgerhq/icons-ui/react/NanoFoldedMedium"));
+var SideBar_stories_default = {
+  title: "Navigation/SideBar/SideBar",
+  component: import_SideBar.default,
+  argTypes: {
+    children: {
+      type: "text",
+      description: "A list a SideBar.Item",
+      required: true,
+      control: false
+    },
+    isExpanded: { control: false },
+    onToggle: { control: false }
+  }
+};
+const Template = (args) => {
+  const [currentArgs, updateArgs] = (0, import_client_api.useArgs)();
+  const handleToggle = () => updateArgs({ isExpanded: !currentArgs.isExpanded });
+  const sidebarIconSize = 20;
+  return /* @__PURE__ */ import_react.default.createElement(import_SideBar.default, {
+    ...args,
+    onToggle: handleToggle
+  }, /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, {
+    onClick: (0, import_addon_actions.action)("go to portfolio"),
+    label: "portfolio"
+  }, /* @__PURE__ */ import_react.default.createElement(import_PortfolioMedium.default, {
+    size: sidebarIconSize
+  })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, {
+    onClick: (0, import_addon_actions.action)("go to accounts"),
+    label: "accounts",
+    isActive: true
+  }, /* @__PURE__ */ import_react.default.createElement(import_WalletMedium.default, {
+    size: sidebarIconSize
+  })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, {
+    onClick: (0, import_addon_actions.action)("go to discover"),
+    label: "discover",
+    isDisabled: true
+  }, /* @__PURE__ */ import_react.default.createElement(import_ManagerMedium.default, {
+    size: sidebarIconSize
+  })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, {
+    onClick: (0, import_addon_actions.action)("go to send"),
+    label: "send",
+    isDisabled: true
+  }, /* @__PURE__ */ import_react.default.createElement(import_ArrowTopMedium.default, {
+    size: sidebarIconSize
+  })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, {
+    onClick: (0, import_addon_actions.action)("go to receive"),
+    label: "receive"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ArrowBottomMedium.default, {
+    size: sidebarIconSize
+  })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, {
+    onClick: (0, import_addon_actions.action)("go to buy / Sell"),
+    label: "buy / Sell"
+  }, /* @__PURE__ */ import_react.default.createElement(import_BuyCryptoAltMedium.default, {
+    size: sidebarIconSize
+  })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, {
+    onClick: (0, import_addon_actions.action)("go to exchange"),
+    label: "exchange"
+  }, /* @__PURE__ */ import_react.default.createElement(import_BuyCryptoMedium.default, {
+    size: sidebarIconSize
+  })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, {
+    onClick: (0, import_addon_actions.action)("go to lend"),
+    label: "lend"
+  }, /* @__PURE__ */ import_react.default.createElement(import_LendMedium.default, {
+    size: sidebarIconSize
+  })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, {
+    onClick: (0, import_addon_actions.action)("go to manager"),
+    label: "manager",
+    displayNotificationBadge: true
+  }, /* @__PURE__ */ import_react.default.createElement(import_NanoFoldedMedium.default, {
+    size: sidebarIconSize
+  })));
+};
+const Default = Template.bind({});
+Default.args = {
+  onToggle: (0, import_addon_actions.action)("toggle sidebar"),
+  isExpanded: true
+};
+//# sourceMappingURL=SideBar.stories.js.map

package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/sideBar/SideBar/SideBar.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\n\nimport SideBar from \"./SideBar\";\nimport type { SideBarProps } from \"./SideBar\";\nimport { action } from \"@storybook/addon-actions\";\nimport PortfolioIcon from \"@ledgerhq/icons-ui/react/PortfolioMedium\";\nimport WalletIcon from \"@ledgerhq/icons-ui/react/WalletMedium\";\nimport ManagerIcon from \"@ledgerhq/icons-ui/react/ManagerMedium\";\nimport ArrowTopIcon from \"@ledgerhq/icons-ui/react/ArrowTopMedium\";\nimport ArrowBottomIcon from \"@ledgerhq/icons-ui/react/ArrowBottomMedium\";\nimport BuyCryptoAltIcon from \"@ledgerhq/icons-ui/react/BuyCryptoAltMedium\";\nimport BuyCryptoIcon from \"@ledgerhq/icons-ui/react/BuyCryptoMedium\";\nimport LendIcon from \"@ledgerhq/icons-ui/react/LendMedium\";\nimport NanoFoldedIcon from \"@ledgerhq/icons-ui/react/NanoFoldedMedium\";\nimport { StoryTemplate } from \"../../../helpers\";\n\nexport default {\n  title: \"Navigation/SideBar/SideBar\",\n  component: SideBar,\n  argTypes: {\n    children: {\n      type: \"text\",\n      description: \"A list a SideBar.Item\",\n      required: true,\n      control: false,\n    },\n    isExpanded: { control: false },\n    onToggle: { control: false },\n  },\n};\n\nconst Template = (args: SideBarProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n\n  const handleToggle = () => updateArgs({ isExpanded: !currentArgs.isExpanded });\n\n  const sidebarIconSize = 20;\n  return (\n    <SideBar {...args} onToggle={handleToggle}>\n      <SideBar.Item onClick={action(\"go to portfolio\")} label=\"portfolio\">\n        <PortfolioIcon size={sidebarIconSize} />\n      </SideBar.Item>\n      <SideBar.Item onClick={action(\"go to accounts\")} label=\"accounts\" isActive>\n        <WalletIcon size={sidebarIconSize} />\n      </SideBar.Item>\n      <SideBar.Item onClick={action(\"go to discover\")} label=\"discover\" isDisabled>\n        <ManagerIcon size={sidebarIconSize} />\n      </SideBar.Item>\n      <SideBar.Item onClick={action(\"go to send\")} label=\"send\" isDisabled>\n        <ArrowTopIcon size={sidebarIconSize} />\n      </SideBar.Item>\n      <SideBar.Item onClick={action(\"go to receive\")} label=\"receive\">\n        <ArrowBottomIcon size={sidebarIconSize} />\n      </SideBar.Item>\n      <SideBar.Item onClick={action(\"go to buy / Sell\")} label=\"buy / Sell\">\n        <BuyCryptoAltIcon size={sidebarIconSize} />\n      </SideBar.Item>\n      <SideBar.Item onClick={action(\"go to exchange\")} label=\"exchange\">\n        <BuyCryptoIcon size={sidebarIconSize} />\n      </SideBar.Item>\n      <SideBar.Item onClick={action(\"go to lend\")} label=\"lend\">\n        <LendIcon size={sidebarIconSize} />\n      </SideBar.Item>\n      <SideBar.Item onClick={action(\"go to manager\")} label=\"manager\" displayNotificationBadge>\n        <NanoFoldedIcon size={sidebarIconSize} />\n      </SideBar.Item>\n    </SideBar>\n  );\n};\n\nexport const Default: StoryTemplate<SideBarProps> = Template.bind({});\nDefault.args = {\n  onToggle: action(\"toggle sidebar\"),\n  isExpanded: true,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAAwB;AAExB,qBAAoB;AAEpB,2BAAuB;AACvB,6BAA0B;AAC1B,0BAAuB;AACvB,2BAAwB;AACxB,4BAAyB;AACzB,+BAA4B;AAC5B,gCAA6B;AAC7B,6BAA0B;AAC1B,wBAAqB;AACrB,8BAA2B;AAG3B,IAAO,0BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA;AAAA,IAEX,YAAY,EAAE,SAAS;AAAA,IACvB,UAAU,EAAE,SAAS;AAAA;AAAA;AAIzB,MAAM,WAAW,CAAC,SAAuB;AACvC,QAAM,CAAC,aAAa,cAAc;AAElC,QAAM,eAAe,MAAM,WAAW,EAAE,YAAY,CAAC,YAAY;AAEjE,QAAM,kBAAkB;AACxB,SACE,mDAAC,wBAAD;AAAA,OAAa;AAAA,IAAM,UAAU;AAAA,KAC3B,mDAAC,uBAAQ,MAAT;AAAA,IAAc,SAAS,iCAAO;AAAA,IAAoB,OAAM;AAAA,KACtD,mDAAC,gCAAD;AAAA,IAAe,MAAM;AAAA,OAEvB,mDAAC,uBAAQ,MAAT;AAAA,IAAc,SAAS,iCAAO;AAAA,IAAmB,OAAM;AAAA,IAAW,UAAQ;AAAA,KACxE,mDAAC,6BAAD;AAAA,IAAY,MAAM;AAAA,OAEpB,mDAAC,uBAAQ,MAAT;AAAA,IAAc,SAAS,iCAAO;AAAA,IAAmB,OAAM;AAAA,IAAW,YAAU;AAAA,KAC1E,mDAAC,8BAAD;AAAA,IAAa,MAAM;AAAA,OAErB,mDAAC,uBAAQ,MAAT;AAAA,IAAc,SAAS,iCAAO;AAAA,IAAe,OAAM;AAAA,IAAO,YAAU;AAAA,KAClE,mDAAC,+BAAD;AAAA,IAAc,MAAM;AAAA,OAEtB,mDAAC,uBAAQ,MAAT;AAAA,IAAc,SAAS,iCAAO;AAAA,IAAkB,OAAM;AAAA,KACpD,mDAAC,kCAAD;AAAA,IAAiB,MAAM;AAAA,OAEzB,mDAAC,uBAAQ,MAAT;AAAA,IAAc,SAAS,iCAAO;AAAA,IAAqB,OAAM;AAAA,KACvD,mDAAC,mCAAD;AAAA,IAAkB,MAAM;AAAA,OAE1B,mDAAC,uBAAQ,MAAT;AAAA,IAAc,SAAS,iCAAO;AAAA,IAAmB,OAAM;AAAA,KACrD,mDAAC,gCAAD;AAAA,IAAe,MAAM;AAAA,OAEvB,mDAAC,uBAAQ,MAAT;AAAA,IAAc,SAAS,iCAAO;AAAA,IAAe,OAAM;AAAA,KACjD,mDAAC,2BAAD;AAAA,IAAU,MAAM;AAAA,OAElB,mDAAC,uBAAQ,MAAT;AAAA,IAAc,SAAS,iCAAO;AAAA,IAAkB,OAAM;AAAA,IAAU,0BAAwB;AAAA,KACtF,mDAAC,iCAAD;AAAA,IAAgB,MAAM;AAAA;AAAA;AAMvB,MAAM,UAAuC,SAAS,KAAK;AAClE,QAAQ,OAAO;AAAA,EACb,UAAU,iCAAO;AAAA,EACjB,YAAY;AAAA;",
+  "names": []
+}

package/lib/cjs/components/navigation/sideBar/SideBar/index.js

@@ -0,0 +1,28 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => import_SideBar.default
+});
+var import_SideBar = __toModule(require("./SideBar"));
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/navigation/sideBar/SideBar/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/sideBar/SideBar/index.ts"],
+  "sourcesContent": ["export { default } from \"./SideBar\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,qBAAwB;",
+  "names": []
+}

package/lib/cjs/components/navigation/sideBar/Toggle/Toggle.js

@@ -0,0 +1,62 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => Toggle_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_ArrowLeftMedium = __toModule(require("@ledgerhq/icons-ui/react/ArrowLeftMedium"));
+var import_ArrowRightMedium = __toModule(require("@ledgerhq/icons-ui/react/ArrowRightMedium"));
+var import_TransitionInOut = __toModule(require("../../../transitions/TransitionInOut"));
+var import_sideBar = __toModule(require("../../../navigation/sideBar"));
+const ToggleButtonContainer = (0, import_styled_components.default)(import_TransitionInOut.default)`
+  --ll-side-bar-toggle-button-size: ${(p) => p.theme.space[10]}px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: var(--ll-side-bar-toggle-button-size);
+  right: calc(var(--ll-side-bar-toggle-button-size) / -2);
+  cursor: pointer;
+
+  background: ${(p) => p.theme.colors.neutral.c20};
+  border: 1px solid ${(p) => p.theme.colors.neutral.c100};
+  border-radius: 50%;
+  width: var(--ll-side-bar-toggle-button-size);
+  height: var(--ll-side-bar-toggle-button-size);
+`;
+const ToggleButton = ({ isDisplayed }) => {
+  const { isExpanded, onToggle } = (0, import_react.useContext)(import_sideBar.default);
+  return /* @__PURE__ */ import_react.default.createElement(ToggleButtonContainer, {
+    timeout: 200,
+    in: isDisplayed,
+    appear: true,
+    unmountOnExit: true,
+    onClick: onToggle,
+    role: "button"
+  }, isExpanded ? /* @__PURE__ */ import_react.default.createElement(import_ArrowLeftMedium.default, null) : /* @__PURE__ */ import_react.default.createElement(import_ArrowRightMedium.default, null));
+};
+var Toggle_default = ToggleButton;
+//# sourceMappingURL=Toggle.js.map

package/lib/cjs/components/navigation/sideBar/Toggle/Toggle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/sideBar/Toggle/Toggle.tsx"],
+  "sourcesContent": ["import React, { useContext } from \"react\";\nimport styled from \"styled-components\";\n\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\nimport ArrowRightIcon from \"@ledgerhq/icons-ui/react/ArrowRightMedium\";\nimport TransitionInOut from \"../../../transitions/TransitionInOut\";\nimport SideBarContext from \"../../../navigation/sideBar\";\n\nconst ToggleButtonContainer = styled(TransitionInOut)`\n  --ll-side-bar-toggle-button-size: ${(p) => p.theme.space[10]}px;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  top: var(--ll-side-bar-toggle-button-size);\n  right: calc(var(--ll-side-bar-toggle-button-size) / -2);\n  cursor: pointer;\n\n  background: ${(p) => p.theme.colors.neutral.c20};\n  border: 1px solid ${(p) => p.theme.colors.neutral.c100};\n  border-radius: 50%;\n  width: var(--ll-side-bar-toggle-button-size);\n  height: var(--ll-side-bar-toggle-button-size);\n`;\n\ntype ToggleButtonProps = { isDisplayed: boolean };\nconst ToggleButton = ({ isDisplayed }: ToggleButtonProps): JSX.Element => {\n  const { isExpanded, onToggle } = useContext(SideBarContext);\n\n  return (\n    <ToggleButtonContainer\n      timeout={200}\n      in={isDisplayed}\n      appear\n      unmountOnExit\n      onClick={onToggle}\n      role=\"button\"\n    >\n      {isExpanded ? <ArrowLeftIcon /> : <ArrowRightIcon />}\n    </ToggleButtonContainer>\n  );\n};\n\nexport default ToggleButton;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,+BAAmB;AAEnB,6BAA0B;AAC1B,8BAA2B;AAC3B,6BAA4B;AAC5B,qBAA2B;AAE3B,MAAM,wBAAwB,sCAAO;AAAA,sCACC,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAU3C,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBACxB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAOpD,MAAM,eAAe,CAAC,EAAE,kBAAkD;AACxE,QAAM,EAAE,YAAY,aAAa,6BAAW;AAE5C,SACE,mDAAC,uBAAD;AAAA,IACE,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,QAAM;AAAA,IACN,eAAa;AAAA,IACb,SAAS;AAAA,IACT,MAAK;AAAA,KAEJ,aAAa,mDAAC,gCAAD,QAAoB,mDAAC,iCAAD;AAAA;AAKxC,IAAO,iBAAQ;",
+  "names": []
+}

package/lib/cjs/components/navigation/sideBar/Toggle/index.js

@@ -0,0 +1,28 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => import_Toggle.default
+});
+var import_Toggle = __toModule(require("./Toggle"));
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/navigation/sideBar/Toggle/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/sideBar/Toggle/index.ts"],
+  "sourcesContent": ["export { default } from \"./Toggle\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,oBAAwB;",
+  "names": []
+}

package/lib/cjs/components/navigation/sideBar/index.js

@@ -0,0 +1,29 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => sideBar_default
+});
+var import_react = __toModule(require("react"));
+var sideBar_default = (0, import_react.createContext)({});
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/navigation/sideBar/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/navigation/sideBar/index.tsx"],
+  "sourcesContent": ["import { createContext } from \"react\";\n\ntype SideBarContextType = { isExpanded: boolean; onToggle: () => void };\nexport default createContext<Partial<SideBarContextType>>({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAG9B,IAAO,kBAAQ,gCAA2C;",
+  "names": []
+}

package/lib/cjs/components/styled.js

@@ -0,0 +1,44 @@
+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 });
+  }
+  return target;
+};
+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, {
+  baseStyles: () => baseStyles,
+  default: () => styled_default
+});
+var import_gaps = __toModule(require("../styles/system/gaps"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_styled_system = __toModule(require("styled-system"));
+const baseStyles = (0, import_styled_system.compose)(import_styled_system.flexbox, import_styled_system.space, import_styled_system.position, import_styled_system.color, import_styled_system.layout, import_styled_system.overflow, import_gaps.default, import_styled_system.border);
+const proxyStyled = new Proxy(import_styled_components.default, {
+  apply(target, thisArg, argumentsList) {
+    return (0, import_styled_components.default)(target.apply(thisArg, argumentsList)(baseStyles));
+  },
+  get(target, property) {
+    if (typeof target[property] === "function") {
+      return (0, import_styled_components.default)(target[property].apply(import_styled_components.default, [baseStyles]));
+    }
+    return target[property];
+  }
+});
+var styled_default = proxyStyled;
+//# sourceMappingURL=styled.js.map

package/lib/cjs/components/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/styled.ts"],
+  "sourcesContent": ["import gaps from \"../styles/system/gaps\";\nimport styled, { StyledInterface, InterpolationFunction } from \"styled-components\";\nimport {\n  compose,\n  flexbox,\n  FlexboxProps,\n  space,\n  SpaceProps,\n  position,\n  PositionProps,\n  color,\n  ColorProps,\n  layout,\n  LayoutProps,\n  overflow,\n  OverflowProps,\n  border,\n  BorderProps,\n} from \"styled-system\";\n\nexport type BaseStyledProps = SpaceProps &\n  FlexboxProps &\n  PositionProps &\n  ColorProps &\n  LayoutProps &\n  BorderProps &\n  OverflowProps & {\n    /**\n     * The columnGap CSS property sets the size of the gap (gutter) between an element's grid columns.\n     */\n    columnGap?: string | number;\n    /**\n     * The rowGap CSS property sets the size of the gap (gutter) between an element's grid rows.\n     */\n    rowGap?: string | number;\n    color?: string;\n  };\n\nexport const baseStyles: InterpolationFunction<unknown> = compose(\n  flexbox,\n  space,\n  position,\n  color,\n  layout,\n  overflow,\n  gaps,\n  border,\n);\n\nconst proxyStyled = new Proxy(styled, {\n  apply(target: typeof styled, thisArg, argumentsList: Parameters<typeof styled>) {\n    return styled(target.apply(thisArg, argumentsList)(baseStyles));\n  },\n  get(target, property: keyof typeof styled) {\n    if (typeof target[property] === \"function\") {\n      return styled(target[property].apply(styled, [baseStyles]));\n    }\n    return target[property];\n  },\n});\n\nexport default <StyledInterface>proxyStyled;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,+BAA+D;AAC/D,2BAgBO;AAoBA,MAAM,aAA6C,kCACxD,8BACA,4BACA,+BACA,4BACA,6BACA,+BACA,qBACA;AAGF,MAAM,cAAc,IAAI,MAAM,kCAAQ;AAAA,EACpC,MAAM,QAAuB,SAAS,eAA0C;AAC9E,WAAO,sCAAO,OAAO,MAAM,SAAS,eAAe;AAAA;AAAA,EAErD,IAAI,QAAQ,UAA+B;AACzC,QAAI,OAAO,OAAO,cAAc,YAAY;AAC1C,aAAO,sCAAO,OAAO,UAAU,MAAM,kCAAQ,CAAC;AAAA;AAEhD,WAAO,OAAO;AAAA;AAAA;AAIlB,IAAO,iBAAyB;",
+  "names": []
+}

package/lib/cjs/components/styled.stories.js

@@ -0,0 +1,71 @@
+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 });
+  }
+  return target;
+};
+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, {
+  Styled: () => Styled,
+  default: () => styled_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_styled = __toModule(require("./styled"));
+var styled_stories_default = {
+  title: "Styled/BaseStyled",
+  argTypes: {
+    backgroundColor: {
+      type: "text",
+      control: "color",
+      defaultValue: "#0EBDCD",
+      description: "This property defines the backgroundColor of the box. This property any color format."
+    },
+    width: {
+      type: "text",
+      defaultValue: "200px",
+      description: "Width of the box."
+    },
+    py: {
+      type: "text",
+      defaultValue: "20px",
+      description: "Padding top and bottom."
+    },
+    mx: {
+      type: "text",
+      defaultValue: "20px",
+      description: "Margin left and right."
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `The baseStyled function is a wrapper to "styled" from [styled-components](https://styled-components.com/) that lets you write these common css properties to your component more succinctly and inline.
+        
+It acts like a drop-in remplacement of styled. In your styled component, just replace styled with baseStyled, and the component will includes all the style props exported by the color, layout, position, shadow and flexbox utilities from the [styled-system](https://styled-system.com) library.
+      
+[See more about styled-system utilities](https://styled-system.com/api)`
+      }
+    }
+  }
+};
+const Block = import_styled.default.div``;
+const Styled = (args) => /* @__PURE__ */ import_react.default.createElement(Block, {
+  ...args
+}, "A plain good ol'block with fixed width, backgroundColor, padding and margin, all by using inline props");
+//# sourceMappingURL=styled.stories.js.map

package/lib/cjs/components/styled.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/styled.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport baseStyled, { BaseStyledProps } from \"./styled\";\n\nexport default {\n  title: \"Styled/BaseStyled\",\n  argTypes: {\n    backgroundColor: {\n      type: \"text\",\n      control: \"color\",\n      defaultValue: \"#0EBDCD\",\n      description:\n        \"This property defines the backgroundColor of the box. This property any color format.\",\n    },\n    width: {\n      type: \"text\",\n      defaultValue: \"200px\",\n      description: \"Width of the box.\",\n    },\n    py: {\n      type: \"text\",\n      defaultValue: \"20px\",\n      description: \"Padding top and bottom.\",\n    },\n    mx: {\n      type: \"text\",\n      defaultValue: \"20px\",\n      description: \"Margin left and right.\",\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `The baseStyled function is a wrapper to \"styled\" from [styled-components](https://styled-components.com/) that lets you write these common css properties to your component more succinctly and inline.\n        \nIt acts like a drop-in remplacement of styled. In your styled component, just replace styled with baseStyled, and the component will includes all the style props exported by the color, layout, position, shadow and flexbox utilities from the [styled-system](https://styled-system.com) library.\n      \n[See more about styled-system utilities](https://styled-system.com/api)`,\n      },\n    },\n  },\n};\n\nconst Block = baseStyled.div``;\n\nexport const Styled = (args: BaseStyledProps) => (\n  <Block {...args}>\n    A plain good ol'block with fixed width, backgroundColor, padding and margin, all by using inline\n    props\n  </Block>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,oBAA4C;AAE5C,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,cAAc;AAAA,MACd,aACE;AAAA;AAAA,IAEJ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA;AAAA,IAEf,IAAI;AAAA,MACF,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA;AAAA,IAEf,IAAI;AAAA,MACF,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA;AAAA;AAAA,EAGjB,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUnB,MAAM,QAAQ,sBAAW;AAElB,MAAM,SAAS,CAAC,SACrB,mDAAC,OAAD;AAAA,KAAW;AAAA,GAAM;",
+  "names": []
+}

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

@@ -0,0 +1,72 @@
+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 });
+  }
+  return target;
+};
+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, {
+  Graph: () => Graph,
+  default: () => Bar_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var Bar_stories_default = {
+  title: "Tabs/Graph",
+  component: import_index.default,
+  argTypes: {
+    initialActiveIndex: {
+      control: { type: "number" }
+    }
+  }
+};
+const navItems = ["One", "Two", "Three", "Four", "Five"];
+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));
+}
+const Graph = (args) => navItems.reduce((acc, _, index) => {
+  const labels = [
+    navItems.slice(0, index + 1).map((label) => /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+      color: "inherit",
+      variant: "small"
+    }, label))
+  ];
+  return [
+    ...acc,
+    /* @__PURE__ */ import_react.default.createElement(Sample, {
+      ...args,
+      key: index
+    }, labels)
+  ];
+}, []);
+Graph.args = {
+  initialActiveIndex: 1
+};
+//# sourceMappingURL=Bar.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/tabs/Bar/Bar.stories.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\n\nimport BarTabs, { Props } from \"./index\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n  title: \"Tabs/Graph\",\n  component: BarTabs,\n  argTypes: {\n    initialActiveIndex: {\n      control: { type: \"number\" },\n    },\n  },\n};\n\nconst navItems = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\"];\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        <BarTabs {...args} onTabChange={setActiveIndex}>\n          {children}\n        </BarTabs>\n      </div>\n      <Text variant=\"subtitle\">Active index: {activeIndex}</Text>\n      <hr />\n    </div>\n  );\n}\n\nexport const Graph = (args: Props): React.ReactNode[] =>\n  navItems.reduce<React.ReactNode[]>((acc, _, index) => {\n    const labels = [\n      navItems.slice(0, index + 1).map((label) => (\n        <Text color=\"inherit\" variant=\"small\">\n          {label}\n        </Text>\n      )),\n    ];\n    return [\n      ...acc,\n      <Sample {...args} key={index}>\n        {labels}\n      </Sample>,\n    ];\n  }, []);\n\nGraph.args = {\n  initialActiveIndex: 1,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAA+B;AAC/B,kBAAiB;AAEjB,IAAO,sBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,oBAAoB;AAAA,MAClB,SAAS,EAAE,MAAM;AAAA;AAAA;AAAA;AAKvB,MAAM,WAAW,CAAC,OAAO,OAAO,SAAS,QAAQ;AAEjD,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,OAAa;AAAA,IAAM,aAAa;AAAA,KAC7B,YAGL,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,KAAW,kBAAe,cACxC,mDAAC,MAAD;AAAA;AAKC,MAAM,QAAQ,CAAC,SACpB,SAAS,OAA0B,CAAC,KAAK,GAAG,UAAU;AACpD,QAAM,SAAS;AAAA,IACb,SAAS,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,UAChC,mDAAC,qBAAD;AAAA,MAAM,OAAM;AAAA,MAAU,SAAQ;AAAA,OAC3B;AAAA;AAIP,SAAO;AAAA,IACL,GAAG;AAAA,IACH,mDAAC,QAAD;AAAA,SAAY;AAAA,MAAM,KAAK;AAAA,OACpB;AAAA;AAAA,GAGJ;AAEL,MAAM,OAAO;AAAA,EACX,oBAAoB;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,58 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => BarTabs
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+const Bar = import_styled_components.default.div`
+  display: inline-flex;
+  border: 1px solid ${(p) => p.theme.colors.neutral.c40};
+  border-radius: 33px;
+  padding: 2px;
+`;
+const Item = (0, import_styled_components.default)(import_Flex.default).attrs({
+  flex: 1,
+  justifyContent: "center",
+  alignItems: "center"
+})`
+  cursor: pointer;
+  padding: 8px 12px 8px 12px;
+  border-radius: 33px;
+  color: ${(p) => p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c80};
+  background-color: ${(p) => p.active ? p.theme.colors.neutral.c100 : "unset"};
+`;
+function BarTabs({ children, onTabChange, initialActiveIndex }) {
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(initialActiveIndex);
+  return /* @__PURE__ */ import_react.default.createElement(Bar, null, import_react.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react.default.createElement(Item, {
+    key: index,
+    active: index === activeIndex,
+    onClick: () => {
+      setActiveIndex(index);
+      onTabChange && onTabChange(index);
+    }
+  }, child)));
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/tabs/Bar/index.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\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}>;\ntype ItemProps = {\n  active: boolean;\n};\n\nconst Bar = styled.div`\n  display: inline-flex;\n  border: 1px solid ${(p) => p.theme.colors.neutral.c40};\n  border-radius: 33px;\n  padding: 2px;\n`;\n\nconst Item = styled(Flex).attrs({\n  flex: 1,\n  justifyContent: \"center\",\n  alignItems: \"center\",\n})<ItemProps>`\n  cursor: pointer;\n  padding: 8px 12px 8px 12px;\n  border-radius: 33px;\n  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c80)};\n  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n  const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n  return (\n    <Bar>\n      {React.Children.toArray(children).map((child, index) => (\n        <Item\n          key={index}\n          active={index === activeIndex}\n          onClick={() => {\n            setActiveIndex(index);\n            onTabChange && onTabChange(index);\n          }}\n        >\n          {child}\n        </Item>\n      ))}\n    </Bar>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,MAAM,iCAAO;AAAA;AAAA,sBAEG,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKpD,MAAM,OAAO,sCAAO,qBAAM,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,WAKH,CAAC,MAAO,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,sBAC5D,CAAC,MAAO,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO;AAAA;AAGxD,iBAAiB,EAAE,UAAU,aAAa,sBAA0C;AACjG,QAAM,CAAC,aAAa,kBAAkB,2BAAS;AAC/C,SACE,mDAAC,KAAD,MACG,qBAAM,SAAS,QAAQ,UAAU,IAAI,CAAC,OAAO,UAC5C,mDAAC,MAAD;AAAA,IACE,KAAK;AAAA,IACL,QAAQ,UAAU;AAAA,IAClB,SAAS,MAAM;AACb,qBAAe;AACf,qBAAe,YAAY;AAAA;AAAA,KAG5B;AAAA;",
+  "names": []
+}