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

package/lib/cjs/components/layout/Drawer/Drawer.stories.js

@@ -1,35 +1,42 @@
+"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 Drawer_stories_exports = {};
+__export(Drawer_stories_exports, {
   Default: () => Default,
   default: () => Drawer_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_client_api = __toModule(require("@storybook/client-api"));
-var import_Button = __toModule(require("../../cta/Button"));
-var import_index = __toModule(require("./index"));
-var import__ = __toModule(require("../index"));
+module.exports = __toCommonJS(Drawer_stories_exports);
+var import_react = __toESM(require("react"));
+var import_client_api = require("@storybook/client-api");
+var import_Button = __toESM(require("../../cta/Button"));
+var import_index = __toESM(require("./index"));
+var import__ = require("../index");
 var Drawer_stories_default = {
   title: "Layout/Drawer",
   component: import_index.default,
@@ -80,32 +87,28 @@ var Drawer_stories_default = {
 };
 const Template = ({ title, big, ignoreBackdropClick, backgroundColor, direction }) => {
   const [{ isOpen }, updateArgs] = (0, import_client_api.useArgs)();
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
-    variant: "main",
-    onClick: () => updateArgs({ isOpen: true }),
-    style: { flex: 1 }
-  }, "Open"), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    isOpen,
-    onClose: () => updateArgs({ isOpen: false }),
-    title,
-    big,
-    footer: /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
-      flex: 1,
-      justifyContent: "flex-end"
-    }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
-      variant: "main",
-      onClick: () => updateArgs({ isOpen: false })
-    }, "Close")),
-    ignoreBackdropClick,
-    backgroundColor,
-    direction
-  }, /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
-    flexDirection: "column"
-  }, /* @__PURE__ */ import_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, tempus sed justo et, viverra mattis lorem. Praesent odio ligula, facilisis id porttitor tempor, cursus at metus. Etiam consequat ante efficitur sodales iaculis. Aliquam at justo vel erat eleifend semper eu non lorem. Cras porta, dolor a porttitor varius, augue lectus congue lorem, nec lobortis urna ipsum quis lorem. Nam quis auctor lacus. Aenean sit amet dictum purus, at convallis neque. Etiam ac augue non risus luctus laoreet eget a est. Curabitur magna purus, fermentum at eros a, faucibus sollicitudin erat. Proin purus sem, lacinia tincidunt ornare et, sollicitudin nec libero. Quisque lobortis dui ac lacus mollis posuere. Morbi vitae ligula commodo, scelerisque sapien quis, vulputate justo. Cras sagittis, ligula quis mollis porttitor, massa neque faucibus mauris, quis consectetur eros nibh a ante. Quisque ac porttitor ante. Curabitur in neque a nisl aliquet finibus. Mauris in sapien nec odio molestie vulputate. Suspendisse vitae lorem non quam dapibus cursus sit amet a mauris."), /* @__PURE__ */ import_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, tempus sed justo et, viverra mattis lorem. Praesent odio ligula, facilisis id porttitor tempor, cursus at metus. Etiam consequat ante efficitur sodales iaculis. Aliquam at justo vel erat eleifend semper eu non lorem. Cras porta, dolor a porttitor varius, augue lectus congue lorem, nec lobortis urna ipsum quis lorem. Nam quis auctor lacus. Aenean sit amet dictum purus, at convallis neque. Etiam ac augue non risus luctus laoreet eget a est. Curabitur magna purus, fermentum at eros a, faucibus sollicitudin erat. Proin purus sem, lacinia tincidunt ornare et, sollicitudin nec libero. Quisque lobortis dui ac lacus mollis posuere. Morbi vitae ligula commodo, scelerisque sapien quis, vulputate justo. Cras sagittis, ligula quis mollis porttitor, massa neque faucibus mauris, quis consectetur eros nibh a ante. Quisque ac porttitor ante. Curabitur in neque a nisl aliquet finibus. Mauris in sapien nec odio molestie vulputate. Suspendisse vitae lorem non quam dapibus cursus sit amet a mauris."), /* @__PURE__ */ import_react.default.createElement(import__.Flex, null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
-    variant: "main",
-    onClick: () => updateArgs({ isOpen: false }),
-    style: { flex: 1 }
-  }, "Fermer")))));
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "main", onClick: () => updateArgs({ isOpen: true }), style: { flex: 1 } }, "Open"), /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      isOpen,
+      onClose: () => updateArgs({ isOpen: false }),
+      title,
+      big,
+      footer: /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flex: 1, justifyContent: "flex-end" }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "main", onClick: () => updateArgs({ isOpen: false }) }, "Close")),
+      ignoreBackdropClick,
+      backgroundColor,
+      direction
+    },
+    /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flexDirection: "column" }, /* @__PURE__ */ import_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, tempus sed justo et, viverra mattis lorem. Praesent odio ligula, facilisis id porttitor tempor, cursus at metus. Etiam consequat ante efficitur sodales iaculis. Aliquam at justo vel erat eleifend semper eu non lorem. Cras porta, dolor a porttitor varius, augue lectus congue lorem, nec lobortis urna ipsum quis lorem. Nam quis auctor lacus. Aenean sit amet dictum purus, at convallis neque. Etiam ac augue non risus luctus laoreet eget a est. Curabitur magna purus, fermentum at eros a, faucibus sollicitudin erat. Proin purus sem, lacinia tincidunt ornare et, sollicitudin nec libero. Quisque lobortis dui ac lacus mollis posuere. Morbi vitae ligula commodo, scelerisque sapien quis, vulputate justo. Cras sagittis, ligula quis mollis porttitor, massa neque faucibus mauris, quis consectetur eros nibh a ante. Quisque ac porttitor ante. Curabitur in neque a nisl aliquet finibus. Mauris in sapien nec odio molestie vulputate. Suspendisse vitae lorem non quam dapibus cursus sit amet a mauris."), /* @__PURE__ */ import_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, tempus sed justo et, viverra mattis lorem. Praesent odio ligula, facilisis id porttitor tempor, cursus at metus. Etiam consequat ante efficitur sodales iaculis. Aliquam at justo vel erat eleifend semper eu non lorem. Cras porta, dolor a porttitor varius, augue lectus congue lorem, nec lobortis urna ipsum quis lorem. Nam quis auctor lacus. Aenean sit amet dictum purus, at convallis neque. Etiam ac augue non risus luctus laoreet eget a est. Curabitur magna purus, fermentum at eros a, faucibus sollicitudin erat. Proin purus sem, lacinia tincidunt ornare et, sollicitudin nec libero. Quisque lobortis dui ac lacus mollis posuere. Morbi vitae ligula commodo, scelerisque sapien quis, vulputate justo. Cras sagittis, ligula quis mollis porttitor, massa neque faucibus mauris, quis consectetur eros nibh a ante. Quisque ac porttitor ante. Curabitur in neque a nisl aliquet finibus. Mauris in sapien nec odio molestie vulputate. Suspendisse vitae lorem non quam dapibus cursus sit amet a mauris."), /* @__PURE__ */ import_react.default.createElement(import__.Flex, null, /* @__PURE__ */ import_react.default.createElement(
+      import_Button.default,
+      {
+        variant: "main",
+        onClick: () => updateArgs({ isOpen: false }),
+        style: { flex: 1 }
+      },
+      "Fermer"
+    )))
+  ));
 };
 const Default = Template.bind({});
 //# sourceMappingURL=Drawer.stories.js.map

package/lib/cjs/components/layout/Drawer/Drawer.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/layout/Drawer/Drawer.stories.tsx"],
   "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\n\nimport Button from \"../../cta/Button\";\nimport Drawer, { DrawerProps } from \"./index\";\nimport { Flex } from \"../index\";\n\nexport default {\n  title: \"Layout/Drawer\",\n  component: Drawer,\n  argTypes: {\n    isOpen: {\n      type: \"boolean\",\n      value: true,\n      description: \"Is open\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n    title: {\n      type: \"text\",\n      description: \"Side default title\",\n      defaultValue: \"Default title\",\n      control: {\n        type: \"text\",\n      },\n      required: false,\n    },\n    backgroundColor: {\n      control: {\n        type: \"color\",\n        presetColors: [\"coral\", \"tomato\", \"orange\", \"blue\", \"purple\"],\n      },\n    },\n    big: {\n      type: \"boolean\",\n      value: true,\n      description: \"Larger width side drawer.\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n    ignoreBackdropClick: {\n      type: \"boolean\",\n      value: true,\n      description: \"Prevent drawer from calling onClose when clicking on the backdrop.\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n  },\n};\n\nconst Template = ({ title, big, ignoreBackdropClick, backgroundColor, direction }: DrawerProps) => {\n  const [{ isOpen }, updateArgs] = useArgs();\n\n  return (\n    <div>\n      <Button variant={\"main\"} onClick={() => updateArgs({ isOpen: true })} style={{ flex: 1 }}>\n        Open\n      </Button>\n      <Drawer\n        isOpen={isOpen}\n        onClose={() => updateArgs({ isOpen: false })}\n        title={title}\n        big={big}\n        footer={\n          <Flex flex={1} justifyContent=\"flex-end\">\n            <Button variant={\"main\"} onClick={() => updateArgs({ isOpen: false })}>\n              Close\n            </Button>\n          </Flex>\n        }\n        ignoreBackdropClick={ignoreBackdropClick}\n        backgroundColor={backgroundColor}\n        direction={direction}\n      >\n        <Flex flexDirection={\"column\"}>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, tempus sed justo\n            et, viverra mattis lorem. Praesent odio ligula, facilisis id porttitor tempor, cursus at\n            metus. Etiam consequat ante efficitur sodales iaculis. Aliquam at justo vel erat\n            eleifend semper eu non lorem. Cras porta, dolor a porttitor varius, augue lectus congue\n            lorem, nec lobortis urna ipsum quis lorem. Nam quis auctor lacus. Aenean sit amet dictum\n            purus, at convallis neque. Etiam ac augue non risus luctus laoreet eget a est. Curabitur\n            magna purus, fermentum at eros a, faucibus sollicitudin erat. Proin purus sem, lacinia\n            tincidunt ornare et, sollicitudin nec libero. Quisque lobortis dui ac lacus mollis\n            posuere. Morbi vitae ligula commodo, scelerisque sapien quis, vulputate justo. Cras\n            sagittis, ligula quis mollis porttitor, massa neque faucibus mauris, quis consectetur\n            eros nibh a ante. Quisque ac porttitor ante. Curabitur in neque a nisl aliquet finibus.\n            Mauris in sapien nec odio molestie vulputate. Suspendisse vitae lorem non quam dapibus\n            cursus sit amet a mauris.\n          </p>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, tempus sed justo\n            et, viverra mattis lorem. Praesent odio ligula, facilisis id porttitor tempor, cursus at\n            metus. Etiam consequat ante efficitur sodales iaculis. Aliquam at justo vel erat\n            eleifend semper eu non lorem. Cras porta, dolor a porttitor varius, augue lectus congue\n            lorem, nec lobortis urna ipsum quis lorem. Nam quis auctor lacus. Aenean sit amet dictum\n            purus, at convallis neque. Etiam ac augue non risus luctus laoreet eget a est. Curabitur\n            magna purus, fermentum at eros a, faucibus sollicitudin erat. Proin purus sem, lacinia\n            tincidunt ornare et, sollicitudin nec libero. Quisque lobortis dui ac lacus mollis\n            posuere. Morbi vitae ligula commodo, scelerisque sapien quis, vulputate justo. Cras\n            sagittis, ligula quis mollis porttitor, massa neque faucibus mauris, quis consectetur\n            eros nibh a ante. Quisque ac porttitor ante. Curabitur in neque a nisl aliquet finibus.\n            Mauris in sapien nec odio molestie vulputate. Suspendisse vitae lorem non quam dapibus\n            cursus sit amet a mauris.\n          </p>\n\n          <Flex>\n            <Button\n              variant={\"main\"}\n              onClick={() => updateArgs({ isOpen: false })}\n              style={{ flex: 1 }}\n            >\n              {\"Fermer\"}\n            </Button>\n          </Flex>\n        </Flex>\n      </Drawer>\n    </div>\n  );\n};\n\nexport const Default = Template.bind({});\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAAwB;AAExB,oBAAmB;AACnB,mBAAoC;AACpC,eAAqB;AAErB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA;AAAA,MAER,UAAU;AAAA;AAAA,IAEZ,iBAAiB;AAAA,MACf,SAAS;AAAA,QACP,MAAM;AAAA,QACN,cAAc,CAAC,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA,IAGxD,KAAK;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAMd,MAAM,WAAW,CAAC,EAAE,OAAO,KAAK,qBAAqB,iBAAiB,gBAA6B;AACjG,QAAM,CAAC,EAAE,UAAU,cAAc;AAEjC,SACE,mDAAC,OAAD,MACE,mDAAC,uBAAD;AAAA,IAAQ,SAAS;AAAA,IAAQ,SAAS,MAAM,WAAW,EAAE,QAAQ;AAAA,IAAS,OAAO,EAAE,MAAM;AAAA,KAAK,SAG1F,mDAAC,sBAAD;AAAA,IACE;AAAA,IACA,SAAS,MAAM,WAAW,EAAE,QAAQ;AAAA,IACpC;AAAA,IACA;AAAA,IACA,QACE,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,OAC5B,mDAAC,uBAAD;AAAA,MAAQ,SAAS;AAAA,MAAQ,SAAS,MAAM,WAAW,EAAE,QAAQ;AAAA,OAAU;AAAA,IAK3E;AAAA,IACA;AAAA,IACA;AAAA,KAEA,mDAAC,eAAD;AAAA,IAAM,eAAe;AAAA,KACnB,mDAAC,KAAD,MAAG,4iCAeH,mDAAC,KAAD,MAAG,4iCAgBH,mDAAC,eAAD,MACE,mDAAC,uBAAD;AAAA,IACE,SAAS;AAAA,IACT,SAAS,MAAM,WAAW,EAAE,QAAQ;AAAA,IACpC,OAAO,EAAE,MAAM;AAAA,KAEd;AAAA;AASR,MAAM,UAAU,SAAS,KAAK;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAAwB;AAExB,oBAAmB;AACnB,mBAAoC;AACpC,eAAqB;AAErB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,QACP,MAAM;AAAA,QACN,cAAc,CAAC,SAAS,UAAU,UAAU,QAAQ,QAAQ;AAAA,MAC9D;AAAA,IACF;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,EAAE,OAAO,KAAK,qBAAqB,iBAAiB,UAAU,MAAmB;AACjG,QAAM,CAAC,EAAE,OAAO,GAAG,UAAU,QAAI,2BAAQ;AAEzC,SACE,6BAAAC,QAAA,cAAC,aACC,6BAAAA,QAAA,cAAC,cAAAC,SAAA,EAAO,SAAS,QAAQ,SAAS,MAAM,WAAW,EAAE,QAAQ,KAAK,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,KAAG,MAE1F,GACA,6BAAAD,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,MAAM,WAAW,EAAE,QAAQ,MAAM,CAAC;AAAA,MAC3C;AAAA,MACA;AAAA,MACA,QACE,6BAAAC,QAAA,cAAC,iBAAK,MAAM,GAAG,gBAAe,cAC5B,6BAAAA,QAAA,cAAC,cAAAC,SAAA,EAAO,SAAS,QAAQ,SAAS,MAAM,WAAW,EAAE,QAAQ,MAAM,CAAC,KAAG,OAEvE,CACF;AAAA,MAEF;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,6BAAAD,QAAA,cAAC,iBAAK,eAAe,YACnB,6BAAAA,QAAA,cAAC,WAAE,yiCAcH,GACA,6BAAAA,QAAA,cAAC,WAAE,yiCAcH,GAEA,6BAAAA,QAAA,cAAC,qBACC,6BAAAA,QAAA;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAS,MAAM,WAAW,EAAE,QAAQ,MAAM,CAAC;AAAA,QAC3C,OAAO,EAAE,MAAM,EAAE;AAAA;AAAA,MAEhB;AAAA,IACH,CACF,CACF;AAAA,EACF,CACF;AAEJ;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;",
+  "names": ["Drawer", "React", "Button"]
 }

package/lib/cjs/components/layout/Drawer/index.js

@@ -1,46 +1,53 @@
+"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 Drawer_exports = {};
+__export(Drawer_exports, {
   Direction: () => Direction,
   default: () => Drawer_default
 });
-var import_react = __toModule(require("react"));
-var import_react_dom = __toModule(require("react-dom"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_Flex = __toModule(require("../Flex"));
-var import_Divider = __toModule(require("../../asorted/Divider"));
-var import_CloseMedium = __toModule(require("@ledgerhq/icons-ui/react/CloseMedium"));
-var import_ArrowLeftRegular = __toModule(require("@ledgerhq/icons-ui/react/ArrowLeftRegular"));
-var import_TransitionSlide = __toModule(require("../../transitions/TransitionSlide"));
-var import_TransitionInOut = __toModule(require("../../transitions/TransitionInOut"));
-var import_Text = __toModule(require("../../asorted/Text"));
-var import_Button = __toModule(require("../../cta/Button"));
-var Direction;
-(function(Direction2) {
+module.exports = __toCommonJS(Drawer_exports);
+var import_react = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Flex = __toESM(require("../Flex"));
+var import_Divider = __toESM(require("../../asorted/Divider"));
+var import_CloseMedium = __toESM(require("@ledgerhq/icons-ui/react/CloseMedium"));
+var import_ArrowLeftMedium = __toESM(require("@ledgerhq/icons-ui/react/ArrowLeftMedium"));
+var import_TransitionSlide = __toESM(require("../../transitions/TransitionSlide"));
+var import_TransitionInOut = __toESM(require("../../transitions/TransitionInOut"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_Button = __toESM(require("../../cta/Button"));
+var Direction = /* @__PURE__ */ ((Direction2) => {
   Direction2["Left"] = "left";
   Direction2["Right"] = "right";
-})(Direction || (Direction = {}));
+  return Direction2;
+})(Direction || {});
 const Container = (0, import_styled_components.default)(import_Flex.default)`
   width: 100%;
   height: 100%;
@@ -57,7 +64,7 @@ const Wrapper = (0, import_styled_components.default)(import_Flex.default)`
 const Overlay = import_styled_components.default.div`
   display: flex;
   position: fixed;
-  justify-content: ${(p) => p.direction === Direction.Left ? "flex-end" : "flex-start"};
+  justify-content: ${(p) => p.direction === "left" /* Left */ ? "flex-end" : "flex-start"};
   top: 0;
   left: 0;
   width: 100vw;
@@ -73,109 +80,113 @@ const ScrollWrapper = (0, import_styled_components.default)(import_Flex.default)
 const ButtonPlaceholder = import_styled_components.default.div`
   min-width: ${(p) => p.theme.space[12]}px;
 `;
-const DrawerContent = import_react.default.forwardRef(({
-  isOpen,
-  title,
-  children,
-  footer,
-  big,
-  onClose,
-  backgroundColor,
-  setTransitionsEnabled = () => 0,
-  onBack,
-  extraContainerProps,
-  extraHeaderProps,
-  extraFooterProps,
-  extraFooterDividerProps,
-  ignoreBackdropClick = false,
-  hideNavigation = true,
-  direction = Direction.Left
-}, ref) => {
-  const disableChildAnimations = (0, import_react.useCallback)(() => setTransitionsEnabled(false), [setTransitionsEnabled]);
-  const enableChildAnimations = (0, import_react.useCallback)(() => setTransitionsEnabled(true), [setTransitionsEnabled]);
-  const handleBackdropClick = (0, import_react.useCallback)(() => {
-    if (!ignoreBackdropClick) {
-      onClose();
-    }
-  }, [onClose, ignoreBackdropClick]);
-  const stopClickPropagation = (0, import_react.useCallback)((e) => {
-    e.stopPropagation();
-  }, []);
-  return /* @__PURE__ */ import_react.default.createElement(import_TransitionInOut.default, {
-    in: isOpen,
-    appear: true,
-    mountOnEnter: true,
-    unmountOnExit: true,
-    onEntering: disableChildAnimations,
-    onEntered: enableChildAnimations,
-    onExiting: disableChildAnimations
-  }, /* @__PURE__ */ import_react.default.createElement(Overlay, {
-    direction,
-    onClick: handleBackdropClick,
-    ref
-  }, /* @__PURE__ */ import_react.default.createElement(import_TransitionSlide.default, {
-    in: isOpen,
-    direction,
-    fixed: true,
-    reverseExit: true,
-    appear: true,
-    mountOnEnter: true,
-    unmountOnExit: true
-  }, /* @__PURE__ */ import_react.default.createElement(Wrapper, {
+const DrawerContent = import_react.default.forwardRef(
+  ({
+    isOpen,
+    title,
+    children,
+    footer,
     big,
-    onClick: stopClickPropagation,
-    backgroundColor: backgroundColor ?? "background.main"
-  }, /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    justifyContent: "space-between",
-    alignItems: "center",
-    p: 12,
-    pb: 10,
-    ...extraHeaderProps
-  }, !hideNavigation && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, onBack != null ? /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
-    variant: "neutral",
-    onClick: onBack,
-    Icon: import_ArrowLeftRegular.default
-  }) : /* @__PURE__ */ import_react.default.createElement(ButtonPlaceholder, null)), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "h3",
-    flex: 1,
-    textAlign: "center"
-  }, title) || /* @__PURE__ */ import_react.default.createElement("div", null), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    alignSelf: "flex-start"
-  }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
-    variant: "neutral",
-    onClick: onClose,
-    Icon: import_CloseMedium.default
-  }))), /* @__PURE__ */ import_react.default.createElement(ScrollWrapper, {
-    flexDirection: "column",
-    alignItems: "stretch",
-    overflow: "scroll",
-    position: "relative",
-    p: 12,
-    pt: 0,
-    flex: 1,
-    ...extraContainerProps
-  }, children), footer && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Divider.default, {
-    variant: "light",
-    ...extraFooterDividerProps
-  }), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    alignItems: "center",
-    py: 8,
-    px: 12,
-    ...extraFooterProps
-  }, footer)))))));
-});
+    onClose,
+    backgroundColor,
+    setTransitionsEnabled = () => 0,
+    onBack,
+    extraContainerProps,
+    extraHeaderProps,
+    extraFooterProps,
+    extraFooterDividerProps,
+    ignoreBackdropClick = false,
+    hideNavigation = true,
+    direction = "left" /* Left */
+  }, ref) => {
+    const disableChildAnimations = (0, import_react.useCallback)(
+      () => setTransitionsEnabled(false),
+      [setTransitionsEnabled]
+    );
+    const enableChildAnimations = (0, import_react.useCallback)(
+      () => setTransitionsEnabled(true),
+      [setTransitionsEnabled]
+    );
+    const handleBackdropClick = (0, import_react.useCallback)(() => {
+      if (!ignoreBackdropClick) {
+        onClose();
+      }
+    }, [onClose, ignoreBackdropClick]);
+    const stopClickPropagation = (0, import_react.useCallback)((e) => {
+      e.stopPropagation();
+    }, []);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_TransitionInOut.default,
+      {
+        in: isOpen,
+        appear: true,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        onEntering: disableChildAnimations,
+        onEntered: enableChildAnimations,
+        onExiting: disableChildAnimations
+      },
+      /* @__PURE__ */ import_react.default.createElement(Overlay, { direction, onClick: handleBackdropClick, ref }, /* @__PURE__ */ import_react.default.createElement(
+        import_TransitionSlide.default,
+        {
+          in: isOpen,
+          direction,
+          fixed: true,
+          reverseExit: true,
+          appear: true,
+          mountOnEnter: true,
+          unmountOnExit: true
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          Wrapper,
+          {
+            big,
+            onClick: stopClickPropagation,
+            backgroundColor: backgroundColor ?? "background.main"
+          },
+          /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(
+            import_Flex.default,
+            {
+              justifyContent: "space-between",
+              alignItems: "center",
+              p: 12,
+              pb: 10,
+              ...extraHeaderProps
+            },
+            !hideNavigation && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, onBack != null ? /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "neutral", onClick: onBack, Icon: import_ArrowLeftMedium.default }) : /* @__PURE__ */ import_react.default.createElement(ButtonPlaceholder, null)),
+            /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h3", flex: 1, textAlign: "center" }, title) || /* @__PURE__ */ import_react.default.createElement("div", null),
+            /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignSelf: "flex-start" }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "neutral", onClick: onClose, Icon: import_CloseMedium.default }))
+          ), /* @__PURE__ */ import_react.default.createElement(
+            ScrollWrapper,
+            {
+              flexDirection: "column",
+              alignItems: "stretch",
+              overflow: "scroll",
+              position: "relative",
+              p: 12,
+              pt: 0,
+              flex: 1,
+              ...extraContainerProps
+            },
+            children
+          ), footer && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Divider.default, { variant: "light", ...extraFooterDividerProps }), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", py: 8, px: 12, ...extraFooterProps }, footer)))
+        )
+      ))
+    );
+  }
+);
 const Drawer = ({ children, menuPortalTarget, ...sideProps }, ref) => {
-  const $root = import_react.default.useMemo(() => menuPortalTarget === void 0 && typeof document !== void 0 ? document.querySelector("body") : menuPortalTarget, [menuPortalTarget]);
+  const $root = import_react.default.useMemo(
+    () => menuPortalTarget === void 0 && typeof document !== void 0 ? document.querySelector("body") : menuPortalTarget,
+    [menuPortalTarget]
+  );
   if (!$root) {
-    return /* @__PURE__ */ import_react.default.createElement(DrawerContent, {
-      ref,
-      ...sideProps
-    }, children);
+    return /* @__PURE__ */ import_react.default.createElement(DrawerContent, { ref, ...sideProps }, children);
   } else {
-    return import_react_dom.default.createPortal(/* @__PURE__ */ import_react.default.createElement(DrawerContent, {
-      ref,
-      ...sideProps
-    }, children), $root);
+    return import_react_dom.default.createPortal(
+      /* @__PURE__ */ import_react.default.createElement(DrawerContent, { ref, ...sideProps }, children),
+      $root
+    );
   }
 };
 var Drawer_default = import_react.default.forwardRef(Drawer);

package/lib/cjs/components/layout/Drawer/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Drawer/index.tsx"],
-  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftRegular\";\n\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\n\nexport enum Direction {\n  Left = \"left\",\n  Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n  big?: boolean;\n}>`\n  height: 100%;\n  width: ${(p) =>\n    p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: space-between;\n  z-index: ${(p) => p.theme.zIndexes[8]};\n`;\n\nconst Overlay = styled.div<{ direction: Direction }>`\n  display: flex;\n  position: fixed;\n  justify-content: ${(p) => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 999;\n  background-color: ${(p) => p.theme.colors.constant.overlay};\n`;\n\nconst ScrollWrapper = styled(FlexBox)`\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst ButtonPlaceholder = styled.div`\n  min-width: ${(p) => p.theme.space[12]}px;\n`;\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  big?: boolean;\n  ignoreBackdropClick?: boolean;\n  backgroundColor?: string;\n  onClose: () => void;\n  onBack?: () => void;\n  setTransitionsEnabled?: (arg0: boolean) => void;\n  hideNavigation?: boolean;\n  menuPortalTarget?: Element | null;\n  direction?: Direction;\n  extraContainerProps?: Partial<FlexBoxProps>;\n  extraHeaderProps?: Partial<FlexBoxProps>;\n  extraFooterProps?: Partial<FlexBoxProps>;\n  extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n  (\n    {\n      isOpen,\n      title,\n      children,\n      footer,\n      big,\n      onClose,\n      backgroundColor,\n      setTransitionsEnabled = () => 0,\n      onBack,\n      extraContainerProps,\n      extraHeaderProps,\n      extraFooterProps,\n      extraFooterDividerProps,\n      ignoreBackdropClick = false,\n      hideNavigation = true,\n      direction = Direction.Left,\n    }: DrawerProps,\n    ref?: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const disableChildAnimations = useCallback(\n      () => setTransitionsEnabled(false),\n      [setTransitionsEnabled],\n    );\n    const enableChildAnimations = useCallback(\n      () => setTransitionsEnabled(true),\n      [setTransitionsEnabled],\n    );\n\n    const handleBackdropClick = useCallback(() => {\n      if (!ignoreBackdropClick) {\n        onClose();\n      }\n    }, [onClose, ignoreBackdropClick]);\n\n    const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <TransitionInOut\n        in={isOpen}\n        appear\n        mountOnEnter\n        unmountOnExit\n        onEntering={disableChildAnimations}\n        onEntered={enableChildAnimations}\n        onExiting={disableChildAnimations}\n      >\n        <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n          <TransitionSlide\n            in={isOpen}\n            direction={direction}\n            fixed\n            reverseExit\n            appear\n            mountOnEnter\n            unmountOnExit\n          >\n            <Wrapper\n              big={big}\n              onClick={stopClickPropagation}\n              backgroundColor={backgroundColor ?? \"background.main\"}\n            >\n              <Container>\n                <FlexBox\n                  justifyContent=\"space-between\"\n                  alignItems=\"center\"\n                  p={12}\n                  pb={10}\n                  {...extraHeaderProps}\n                >\n                  {!hideNavigation && (\n                    <>\n                      {onBack != null ? (\n                        <Button variant=\"neutral\" onClick={onBack} Icon={ArrowLeft} />\n                      ) : (\n                        <ButtonPlaceholder />\n                      )}\n                    </>\n                  )}\n                  {(\n                    <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n                      {title}\n                    </Text>\n                  ) || <div />}\n                  <FlexBox alignSelf=\"flex-start\">\n                    <Button variant=\"neutral\" onClick={onClose} Icon={Close} />\n                  </FlexBox>\n                </FlexBox>\n                <ScrollWrapper\n                  flexDirection=\"column\"\n                  alignItems=\"stretch\"\n                  overflow=\"scroll\"\n                  position=\"relative\"\n                  p={12}\n                  pt={0}\n                  flex={1}\n                  {...extraContainerProps}\n                >\n                  {children}\n                </ScrollWrapper>\n                {footer && (\n                  <>\n                    <Divider variant=\"light\" {...extraFooterDividerProps} />\n                    <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n                      {footer}\n                    </FlexBox>\n                  </>\n                )}\n              </Container>\n            </Wrapper>\n          </TransitionSlide>\n        </Overlay>\n      </TransitionInOut>\n    );\n  },\n);\n\nconst Drawer = (\n  { children, menuPortalTarget, ...sideProps }: DrawerProps,\n  ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return (\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>\n    );\n  } else {\n    return ReactDOM.createPortal(\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>,\n      $root,\n    );\n  }\n};\n\nexport default React.forwardRef(Drawer);\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\n\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\n\nexport enum Direction {\n  Left = \"left\",\n  Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n  big?: boolean;\n}>`\n  height: 100%;\n  width: ${(p) =>\n    p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: space-between;\n  z-index: ${(p) => p.theme.zIndexes[8]};\n`;\n\nconst Overlay = styled.div<{ direction: Direction }>`\n  display: flex;\n  position: fixed;\n  justify-content: ${(p) => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 999;\n  background-color: ${(p) => p.theme.colors.constant.overlay};\n`;\n\nconst ScrollWrapper = styled(FlexBox)`\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst ButtonPlaceholder = styled.div`\n  min-width: ${(p) => p.theme.space[12]}px;\n`;\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  big?: boolean;\n  ignoreBackdropClick?: boolean;\n  backgroundColor?: string;\n  onClose: () => void;\n  onBack?: () => void;\n  setTransitionsEnabled?: (arg0: boolean) => void;\n  hideNavigation?: boolean;\n  menuPortalTarget?: Element | null;\n  direction?: Direction;\n  extraContainerProps?: Partial<FlexBoxProps>;\n  extraHeaderProps?: Partial<FlexBoxProps>;\n  extraFooterProps?: Partial<FlexBoxProps>;\n  extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n  (\n    {\n      isOpen,\n      title,\n      children,\n      footer,\n      big,\n      onClose,\n      backgroundColor,\n      setTransitionsEnabled = () => 0,\n      onBack,\n      extraContainerProps,\n      extraHeaderProps,\n      extraFooterProps,\n      extraFooterDividerProps,\n      ignoreBackdropClick = false,\n      hideNavigation = true,\n      direction = Direction.Left,\n    }: DrawerProps,\n    ref?: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const disableChildAnimations = useCallback(\n      () => setTransitionsEnabled(false),\n      [setTransitionsEnabled],\n    );\n    const enableChildAnimations = useCallback(\n      () => setTransitionsEnabled(true),\n      [setTransitionsEnabled],\n    );\n\n    const handleBackdropClick = useCallback(() => {\n      if (!ignoreBackdropClick) {\n        onClose();\n      }\n    }, [onClose, ignoreBackdropClick]);\n\n    const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <TransitionInOut\n        in={isOpen}\n        appear\n        mountOnEnter\n        unmountOnExit\n        onEntering={disableChildAnimations}\n        onEntered={enableChildAnimations}\n        onExiting={disableChildAnimations}\n      >\n        <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n          <TransitionSlide\n            in={isOpen}\n            direction={direction}\n            fixed\n            reverseExit\n            appear\n            mountOnEnter\n            unmountOnExit\n          >\n            <Wrapper\n              big={big}\n              onClick={stopClickPropagation}\n              backgroundColor={backgroundColor ?? \"background.main\"}\n            >\n              <Container>\n                <FlexBox\n                  justifyContent=\"space-between\"\n                  alignItems=\"center\"\n                  p={12}\n                  pb={10}\n                  {...extraHeaderProps}\n                >\n                  {!hideNavigation && (\n                    <>\n                      {onBack != null ? (\n                        <Button variant=\"neutral\" onClick={onBack} Icon={ArrowLeft} />\n                      ) : (\n                        <ButtonPlaceholder />\n                      )}\n                    </>\n                  )}\n                  {(\n                    <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n                      {title}\n                    </Text>\n                  ) || <div />}\n                  <FlexBox alignSelf=\"flex-start\">\n                    <Button variant=\"neutral\" onClick={onClose} Icon={Close} />\n                  </FlexBox>\n                </FlexBox>\n                <ScrollWrapper\n                  flexDirection=\"column\"\n                  alignItems=\"stretch\"\n                  overflow=\"scroll\"\n                  position=\"relative\"\n                  p={12}\n                  pt={0}\n                  flex={1}\n                  {...extraContainerProps}\n                >\n                  {children}\n                </ScrollWrapper>\n                {footer && (\n                  <>\n                    <Divider variant=\"light\" {...extraFooterDividerProps} />\n                    <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n                      {footer}\n                    </FlexBox>\n                  </>\n                )}\n              </Container>\n            </Wrapper>\n          </TransitionSlide>\n        </Overlay>\n      </TransitionInOut>\n    );\n  },\n);\n\nconst Drawer = (\n  { children, menuPortalTarget, ...sideProps }: DrawerProps,\n  ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return (\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>\n    );\n  } else {\n    return ReactDOM.createPortal(\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>,\n      $root,\n    );\n  }\n};\n\nexport default React.forwardRef(Drawer);\n"],
+  "mappings": "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",
+  "names": ["Direction", "styled", "FlexBox", "React", "TransitionInOut", "TransitionSlide", "Button", "ArrowLeft", "Text", "Close", "Divider", "ReactDOM"]
 }

package/lib/cjs/components/layout/Flex/Flex.stories.js

@@ -1,32 +1,39 @@
+"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 Flex_stories_exports = {};
+__export(Flex_stories_exports, {
   Default: () => Default,
   default: () => Flex_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_index = __toModule(require("./index"));
+module.exports = __toCommonJS(Flex_stories_exports);
+var import_react = __toESM(require("react"));
+var import_index = __toESM(require("./index"));
 var Flex_stories_default = {
   title: "Layout/Flex",
   component: import_index.default,
@@ -307,22 +314,6 @@ Like the Box component, it includes all the style props exported by the color, l
     }
   }
 };
-const Template = (args) => /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-  ...args
-}, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-  ...args,
-  width: "25vw",
-  height: "25vw",
-  color: "white",
-  backgroundColor: "darkslategray"
-}, "Control me with flex children props"), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-  width: "25vw",
-  height: "25vw",
-  backgroundColor: "lightslategray"
-}), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-  width: "25vw",
-  height: "25vw",
-  backgroundColor: "darkgray"
-}));
+const Template = (args) => /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, width: "25vw", height: "25vw", color: "white", backgroundColor: "darkslategray" }, "Control me with flex children props"), /* @__PURE__ */ import_react.default.createElement(import_index.default, { width: "25vw", height: "25vw", backgroundColor: "lightslategray" }), /* @__PURE__ */ import_react.default.createElement(import_index.default, { width: "25vw", height: "25vw", backgroundColor: "darkgray" }));
 const Default = Template.bind({});
 //# sourceMappingURL=Flex.stories.js.map