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

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

@@ -0,0 +1,119 @@
+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: () => Side_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Button = __toModule(require("../../cta/Button"));
+var import_helpers = __toModule(require("../../helpers"));
+var import_index = __toModule(require("./index"));
+var import_Provider = __toModule(require("./Provider"));
+const DummyContentWrapper = import_styled_components.default.div`
+  width: 100%;
+  background-color: ${(p) => p.color};
+  align-items: center;
+  padding: ${(p) => p.theme.space[4]}px;
+`;
+const onBackLvl1 = () => (0, import_Provider.setSide)(DummyContent, {
+  left: true
+});
+const onBackLvl2 = () => (0, import_Provider.setSide)(DummySubContentLvl1, {
+  onBack: onBackLvl1,
+  left: true
+});
+const DummyContent = () => /* @__PURE__ */ import_react.default.createElement(DummyContentWrapper, {
+  color: "#957DAD"
+}, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+  onClick: () => (0, import_Provider.setSide)(DummySubContentLvl1, {
+    onBack: onBackLvl1,
+    left: true
+  })
+}, "Go to level 2"));
+const DummySubContentLvl1 = () => /* @__PURE__ */ import_react.default.createElement(DummyContentWrapper, {
+  color: "#E0BBE4"
+}, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+  onClick: () => (0, import_Provider.setSide)(DummySubContentLvl2, {
+    onBack: onBackLvl2,
+    left: true
+  })
+}, "Go to level 3"), /* @__PURE__ */ import_react.default.createElement("div", null, import_helpers.lipsum));
+const DummySubContentLvl2 = () => /* @__PURE__ */ import_react.default.createElement(DummyContentWrapper, {
+  color: "#FEC8D8"
+}, /* @__PURE__ */ import_react.default.createElement("div", null, import_helpers.lipsum));
+const components = {
+  DummyContent,
+  DummySubContentLvl1,
+  DummySubContentLvl2
+};
+var Side_stories_default = {
+  title: "Layout/Drawer/Side",
+  component: import_index.default,
+  argTypes: {
+    isOpen: {
+      type: "boolean",
+      value: true,
+      description: "Is open",
+      required: false,
+      control: {
+        type: "boolean"
+      }
+    },
+    title: {
+      type: "text",
+      description: "Side default title",
+      defaultValue: "Default title",
+      control: {
+        type: "text"
+      },
+      required: false
+    },
+    big: {
+      type: "boolean",
+      value: true,
+      description: "Larger width side drawer.",
+      required: false,
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+const Template = (args) => {
+  const onClose = (0, import_react.useCallback)(() => (0, import_Provider.setSide)(null), []);
+  const onOpen = (0, import_react.useCallback)(() => (0, import_Provider.setSide)(components.DummyContent), []);
+  (0, import_react.useEffect)(() => {
+    if (args.isOpen)
+      onOpen();
+    if (!args.isOpen)
+      onClose();
+  }, [args.isOpen, onClose, onOpen]);
+  return /* @__PURE__ */ import_react.default.createElement(import_Provider.default, null, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args
+  }));
+};
+const Default = Template.bind({});
+Default.args = {};
+//# sourceMappingURL=Side.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Side/Side.stories.tsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport Button from \"../../cta/Button\";\nimport { lipsum } from \"../../helpers\";\nimport Side, { SideProps } from \"./index\";\nimport SideProvider, { setSide } from \"./Provider\";\n\nconst DummyContentWrapper = styled.div`\n  width: 100%;\n  background-color: ${(p) => p.color};\n  align-items: center;\n  padding: ${(p) => p.theme.space[4]}px;\n`;\n\nconst onBackLvl1 = () =>\n  setSide<SideProps & { left: boolean }>(DummyContent, {\n    left: true,\n  });\n\nconst onBackLvl2 = () =>\n  setSide(DummySubContentLvl1, {\n    onBack: onBackLvl1,\n    left: true,\n  });\n\nconst DummyContent = () => (\n  <DummyContentWrapper color={\"#957DAD\"}>\n    <Button\n      onClick={() =>\n        setSide(DummySubContentLvl1, {\n          onBack: onBackLvl1,\n          left: true,\n        })\n      }\n    >\n      {\"Go to level 2\"}\n    </Button>\n  </DummyContentWrapper>\n);\n\nconst DummySubContentLvl1 = () => (\n  <DummyContentWrapper color={\"#E0BBE4\"}>\n    <Button\n      onClick={() =>\n        setSide(DummySubContentLvl2, {\n          onBack: onBackLvl2,\n          left: true,\n        })\n      }\n    >\n      {\"Go to level 3\"}\n    </Button>\n    <div>{lipsum}</div>\n  </DummyContentWrapper>\n);\n\nconst DummySubContentLvl2 = () => (\n  <DummyContentWrapper color={\"#FEC8D8\"}>\n    <div>{lipsum}</div>\n  </DummyContentWrapper>\n);\n\nconst components = {\n  DummyContent,\n  DummySubContentLvl1,\n  DummySubContentLvl2,\n};\n\nexport default {\n  title: \"Layout/Drawer/Side\",\n  component: Side,\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    big: {\n      type: \"boolean\",\n      value: true,\n      description: \"Larger width side drawer.\",\n      required: false,\n      control: {\n        type: \"boolean\",\n      },\n    },\n  },\n};\n\nconst Template = (args: SideProps & { isOpen: boolean }) => {\n  const onClose = useCallback(() => setSide(null), []);\n  const onOpen = useCallback(() => setSide(components.DummyContent), []);\n\n  useEffect(() => {\n    if (args.isOpen) onOpen();\n    if (!args.isOpen) onClose();\n  }, [args.isOpen, onClose, onOpen]);\n\n  return (\n    <SideProvider>\n      <Side {...args} />\n    </SideProvider>\n  );\n};\n\nexport const Default = Template.bind({});\n// @ts-expect-error FIXME\nDefault.args = {};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AAC9C,+BAAmB;AAEnB,oBAAmB;AACnB,qBAAuB;AACvB,mBAAgC;AAChC,sBAAsC;AAEtC,MAAM,sBAAsB,iCAAO;AAAA;AAAA,sBAEb,CAAC,MAAM,EAAE;AAAA;AAAA,aAElB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAGlC,MAAM,aAAa,MACjB,6BAAuC,cAAc;AAAA,EACnD,MAAM;AAAA;AAGV,MAAM,aAAa,MACjB,6BAAQ,qBAAqB;AAAA,EAC3B,QAAQ;AAAA,EACR,MAAM;AAAA;AAGV,MAAM,eAAe,MACnB,mDAAC,qBAAD;AAAA,EAAqB,OAAO;AAAA,GAC1B,mDAAC,uBAAD;AAAA,EACE,SAAS,MACP,6BAAQ,qBAAqB;AAAA,IAC3B,QAAQ;AAAA,IACR,MAAM;AAAA;AAAA,GAIT;AAKP,MAAM,sBAAsB,MAC1B,mDAAC,qBAAD;AAAA,EAAqB,OAAO;AAAA,GAC1B,mDAAC,uBAAD;AAAA,EACE,SAAS,MACP,6BAAQ,qBAAqB;AAAA,IAC3B,QAAQ;AAAA,IACR,MAAM;AAAA;AAAA,GAIT,kBAEH,mDAAC,OAAD,MAAM;AAIV,MAAM,sBAAsB,MAC1B,mDAAC,qBAAD;AAAA,EAAqB,OAAO;AAAA,GAC1B,mDAAC,OAAD,MAAM;AAIV,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA;AAGF,IAAO,uBAAQ;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,KAAK;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAMd,MAAM,WAAW,CAAC,SAA0C;AAC1D,QAAM,UAAU,8BAAY,MAAM,6BAAQ,OAAO;AACjD,QAAM,SAAS,8BAAY,MAAM,6BAAQ,WAAW,eAAe;AAEnE,8BAAU,MAAM;AACd,QAAI,KAAK;AAAQ;AACjB,QAAI,CAAC,KAAK;AAAQ;AAAA,KACjB,CAAC,KAAK,QAAQ,SAAS;AAE1B,SACE,mDAAC,yBAAD,MACE,mDAAC,sBAAD;AAAA,OAAU;AAAA;AAAA;AAKT,MAAM,UAAU,SAAS,KAAK;AAErC,QAAQ,OAAO;",
+  "names": []
+}

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

@@ -0,0 +1,85 @@
+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, {
+  SideWrapper: () => SideWrapper,
+  default: () => Side_default
+});
+var import_react = __toModule(require("react"));
+var import_react_transition_group = __toModule(require("react-transition-group"));
+var import_Drawer = __toModule(require("../Drawer"));
+var import_TransitionSlide = __toModule(require("../../transitions/TransitionSlide"));
+var import_Provider = __toModule(require("./Provider"));
+const SideWrapper = (props) => {
+  const { state, setSide } = (0, import_Provider.useSide)();
+  const [queue, setQueue] = (0, import_react.useState)([]);
+  const [direction, setDirection] = (0, import_react.useState)("left");
+  const [transitionsEnabled, setTransitionsEnabled] = (0, import_react.useState)(false);
+  const nonce = (0, import_react.useRef)(0);
+  const onClose = (0, import_react.useCallback)(() => setSide(), [setSide]);
+  (0, import_react.useEffect)(() => {
+    setQueue((q) => {
+      if (!state.open || !state.Component)
+        return [];
+      return q.concat([{ ...state, key: nonce.current++ }]);
+    });
+  }, [state]);
+  (0, import_react.useEffect)(() => {
+    let timeout;
+    if (queue.length > 1) {
+      const [, ...rest] = queue;
+      timeout = setTimeout(() => {
+        setQueue(rest);
+        setDirection("left");
+      }, 0);
+    }
+    return () => {
+      if (timeout)
+        clearTimeout(timeout);
+    };
+  }, [queue]);
+  const wrappedOnBack = (0, import_react.useCallback)(() => {
+    setDirection("right");
+    const onBack = state?.props?.onBack;
+    onBack && onBack();
+  }, [state?.props]);
+  return /* @__PURE__ */ import_react.default.createElement(import_Drawer.default, {
+    ...props,
+    isOpen: !!state.open,
+    onClose,
+    onBack: state?.props?.onBack ? wrappedOnBack : void 0,
+    setTransitionsEnabled,
+    hideNavigation: false
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_transition_group.TransitionGroup, {
+    enter: transitionsEnabled,
+    exit: transitionsEnabled,
+    component: null
+  }, queue.map(({ Component, props: props2, key }) => /* @__PURE__ */ import_react.default.createElement(import_TransitionSlide.default, {
+    key,
+    direction
+  }, Component && /* @__PURE__ */ import_react.default.createElement(Component, {
+    ...props2
+  })))));
+};
+var Side_default = SideWrapper;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Side/index.tsx"],
+  "sourcesContent": ["import React, { useRef, useCallback, useEffect, useState } from \"react\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport Drawer from \"../Drawer\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport { useSide } from \"./Provider\";\n\nexport interface SideProps {\n  onBack?: () => void;\n}\n\nexport const SideWrapper = (props: SideProps): JSX.Element => {\n  // Nb Note that it's not a real queue and we need to handle where we go from each _slide_\n  const { state, setSide } = useSide();\n  const [queue, setQueue] = useState<\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    Array<{ Component: React.ComponentType | null | undefined; props?: any; key: number }>\n  >([]);\n  const [direction, setDirection] = useState(\"left\");\n  const [transitionsEnabled, setTransitionsEnabled] = useState(false);\n  const nonce = useRef(0);\n  const onClose = useCallback(() => setSide(), [setSide]);\n\n  useEffect(() => {\n    setQueue((q) => {\n      if (!state.open || !state.Component) return [];\n      return q.concat([{ ...state, key: nonce.current++ }]);\n    });\n  }, [state]);\n\n  useEffect(() => {\n    let timeout: NodeJS.Timeout;\n\n    if (queue.length > 1) {\n      const [, ...rest] = queue;\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore mismatch between nodejs and dom types\n      timeout = setTimeout(() => {\n        setQueue(rest);\n        setDirection(\"left\");\n      }, 0);\n    }\n\n    return () => {\n      if (timeout) clearTimeout(timeout);\n    };\n  }, [queue]);\n\n  const wrappedOnBack = useCallback(() => {\n    setDirection(\"right\");\n    const onBack = state?.props?.onBack;\n    onBack && onBack();\n  }, [state?.props]);\n\n  return (\n    <Drawer\n      {...props}\n      isOpen={!!state.open}\n      onClose={onClose}\n      onBack={state?.props?.onBack ? wrappedOnBack : undefined}\n      setTransitionsEnabled={setTransitionsEnabled}\n      hideNavigation={false}\n    >\n      <TransitionGroup enter={transitionsEnabled} exit={transitionsEnabled} component={null}>\n        {queue.map(({ Component, props, key }) => (\n          <TransitionSlide key={key} direction={direction}>\n            {Component && <Component {...props} />}\n          </TransitionSlide>\n        ))}\n      </TransitionGroup>\n    </Drawer>\n  );\n};\n\nexport default SideWrapper;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgE;AAChE,oCAAgC;AAChC,oBAAmB;AACnB,6BAA4B;AAC5B,sBAAwB;AAMjB,MAAM,cAAc,CAAC,UAAkC;AAE5D,QAAM,EAAE,OAAO,YAAY;AAC3B,QAAM,CAAC,OAAO,YAAY,2BAGxB;AACF,QAAM,CAAC,WAAW,gBAAgB,2BAAS;AAC3C,QAAM,CAAC,oBAAoB,yBAAyB,2BAAS;AAC7D,QAAM,QAAQ,yBAAO;AACrB,QAAM,UAAU,8BAAY,MAAM,WAAW,CAAC;AAE9C,8BAAU,MAAM;AACd,aAAS,CAAC,MAAM;AACd,UAAI,CAAC,MAAM,QAAQ,CAAC,MAAM;AAAW,eAAO;AAC5C,aAAO,EAAE,OAAO,CAAC,KAAK,OAAO,KAAK,MAAM;AAAA;AAAA,KAEzC,CAAC;AAEJ,8BAAU,MAAM;AACd,QAAI;AAEJ,QAAI,MAAM,SAAS,GAAG;AACpB,YAAM,CAAC,KAAK,QAAQ;AAGpB,gBAAU,WAAW,MAAM;AACzB,iBAAS;AACT,qBAAa;AAAA,SACZ;AAAA;AAGL,WAAO,MAAM;AACX,UAAI;AAAS,qBAAa;AAAA;AAAA,KAE3B,CAAC;AAEJ,QAAM,gBAAgB,8BAAY,MAAM;AACtC,iBAAa;AACb,UAAM,SAAS,OAAO,OAAO;AAC7B,cAAU;AAAA,KACT,CAAC,OAAO;AAEX,SACE,mDAAC,uBAAD;AAAA,OACM;AAAA,IACJ,QAAQ,CAAC,CAAC,MAAM;AAAA,IAChB;AAAA,IACA,QAAQ,OAAO,OAAO,SAAS,gBAAgB;AAAA,IAC/C;AAAA,IACA,gBAAgB;AAAA,KAEhB,mDAAC,+CAAD;AAAA,IAAiB,OAAO;AAAA,IAAoB,MAAM;AAAA,IAAoB,WAAW;AAAA,KAC9E,MAAM,IAAI,CAAC,EAAE,WAAW,eAAO,UAC9B,mDAAC,gCAAD;AAAA,IAAiB;AAAA,IAAU;AAAA,KACxB,aAAa,mDAAC,WAAD;AAAA,OAAe;AAAA;AAAA;AAQzC,IAAO,eAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,38 @@
+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, {
+  Box: () => import_Box.default,
+  Drawer: () => import_Drawer.default,
+  Flex: () => import_Flex.default,
+  Grid: () => import_Grid.default,
+  Popin: () => import_Popin.default,
+  Side: () => import_Side.default
+});
+var import_Flex = __toModule(require("./Flex"));
+var import_Box = __toModule(require("./Box"));
+var import_Grid = __toModule(require("./Grid"));
+var import_Popin = __toModule(require("./Popin"));
+var import_Side = __toModule(require("./Side"));
+var import_Drawer = __toModule(require("./Drawer"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/layout/index.ts"],
+  "sourcesContent": ["export { default as Flex } from \"./Flex\";\nexport { default as Box } from \"./Box\";\nexport { default as Grid } from \"./Grid\";\nexport { default as Popin } from \"./Popin\";\nexport { default as Side } from \"./Side\";\nexport { default as Drawer } from \"./Drawer\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,iBAA+B;AAC/B,kBAAgC;AAChC,mBAAiC;AACjC,kBAAgC;AAChC,oBAAkC;",
+  "names": []
+}

package/lib/cjs/components/loaders/InfiniteLoader/InfiniteLoader.stories.js

@@ -0,0 +1,86 @@
+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: () => InfiniteLoader_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+const description = `
+### Spinner Component
+
+A simple spinner component with customizable size and color \u{1F3A1}.
+
+## Usage
+
+\`\`\`js
+
+import { InfiniteLoader } from "@ledgerhq/react-ui"
+\`\`\`
+
+\`\`\`js
+/*
+  Both color and size are optional.
+  Extra props are passed to the child <svg> tag.
+*/
+<InfiniteLoader size={40} color="warning.c50" />
+\`\`\`
+`;
+var InfiniteLoader_stories_default = {
+  title: "Loaders/InfiniteLoader",
+  component: import_index.default,
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  },
+  argTypes: {
+    size: {
+      type: "number"
+    },
+    color: {
+      control: {
+        type: "color",
+        presetColors: ["coral", "tomato", "orange", "blue", "purple"]
+      }
+    },
+    theme: {
+      table: { disable: true }
+    },
+    as: {
+      table: { disable: true }
+    },
+    forwardedAs: {
+      table: { disable: true }
+    }
+  }
+};
+const Default = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args
+  });
+};
+//# sourceMappingURL=InfiniteLoader.stories.js.map

package/lib/cjs/components/loaders/InfiniteLoader/InfiniteLoader.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/loaders/InfiniteLoader/InfiniteLoader.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport InfiniteLoader, { Props } from \"./index\";\n\nconst description = `\n### Spinner Component\n\nA simple spinner component with customizable size and color \uD83C\uDFA1.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { InfiniteLoader } from \"@ledgerhq/react-ui\"\n\\`\\`\\`\n\n\\`\\`\\`js\n/*\n  Both color and size are optional.\n  Extra props are passed to the child <svg> tag.\n*/\n<InfiniteLoader size={40} color=\"warning.c50\" />\n\\`\\`\\`\n`;\n\nexport default {\n  title: \"Loaders/InfiniteLoader\",\n  component: InfiniteLoader,\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n  argTypes: {\n    size: {\n      type: \"number\",\n    },\n    color: {\n      control: {\n        type: \"color\",\n        presetColors: [\"coral\", \"tomato\", \"orange\", \"blue\", \"purple\"],\n      },\n    },\n    theme: {\n      table: { disable: true },\n    },\n    as: {\n      table: { disable: true },\n    },\n    forwardedAs: {\n      table: { disable: true },\n    },\n  },\n};\n\nexport const Default = (args: Props): JSX.Element => {\n  return <InfiniteLoader {...args} />;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAsC;AAEtC,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBpB,IAAO,iCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA,EAIjB,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA;AAAA,IAER,OAAO;AAAA,MACL,SAAS;AAAA,QACP,MAAM;AAAA,QACN,cAAc,CAAC,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA;AAAA,IAGxD,OAAO;AAAA,MACL,OAAO,EAAE,SAAS;AAAA;AAAA,IAEpB,IAAI;AAAA,MACF,OAAO,EAAE,SAAS;AAAA;AAAA,IAEpB,aAAa;AAAA,MACX,OAAO,EAAE,SAAS;AAAA;AAAA;AAAA;AAKjB,MAAM,UAAU,CAAC,SAA6B;AACnD,SAAO,mDAAC,sBAAD;AAAA,OAAoB;AAAA;AAAA;",
+  "names": []
+}

package/lib/cjs/components/loaders/InfiniteLoader/index.js

@@ -0,0 +1,111 @@
+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: () => InfiniteLoader
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_styled_system = __toModule(require("styled-system"));
+const rotate = import_styled_components.keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const Loader = import_styled_components.default.svg`
+  animation: ${rotate} 1s linear infinite;
+  ${import_styled_system.size}
+  ${(0, import_styled_system.system)({
+  stroke: {
+    property: "stroke",
+    scale: "colors"
+  }
+})}
+`;
+function InfiniteLoader({
+  size: size2 = 38,
+  color = "primary.c50",
+  ...extraProps
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(Loader, {
+    size: size2,
+    stroke: color,
+    viewBox: "0 0 38 38",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...extraProps
+  }, /* @__PURE__ */ import_react.default.createElement("linearGradient", {
+    id: "gradient-start",
+    gradientUnits: "userSpaceOnUse",
+    gradientTransform: "rotate(-20)"
+  }, /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "0",
+    stopColor: "white",
+    stopOpacity: "0.5"
+  }), /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "1",
+    stopColor: "white",
+    stopOpacity: "1"
+  })), /* @__PURE__ */ import_react.default.createElement("linearGradient", {
+    id: "gradient-end",
+    gradientUnits: "userSpaceOnUse",
+    gradientTransform: "rotate(-20)"
+  }, /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "0",
+    stopColor: "white",
+    stopOpacity: "0.5"
+  }), /* @__PURE__ */ import_react.default.createElement("stop", {
+    offset: "1",
+    stopColor: "white",
+    stopOpacity: "0"
+  })), /* @__PURE__ */ import_react.default.createElement("mask", {
+    id: "gradient-mask",
+    maskUnits: "userSpaceOnUse"
+  }, /* @__PURE__ */ import_react.default.createElement("rect", {
+    x: "-0",
+    y: "-4",
+    width: "44",
+    height: "22",
+    strokeWidth: "0",
+    fill: "url(#gradient-start)",
+    transform: "rotate(10)"
+  }), /* @__PURE__ */ import_react.default.createElement("rect", {
+    x: "0",
+    y: "18",
+    width: "44",
+    height: "21",
+    strokeWidth: "0",
+    fill: "url(#gradient-end)",
+    transform: "rotate(10)"
+  })), /* @__PURE__ */ import_react.default.createElement("path", {
+    d: "M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526",
+    strokeWidth: "6",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    mask: "url(#gradient-mask)"
+  }));
+}
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/loaders/InfiniteLoader/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/loaders/InfiniteLoader/index.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport { system, size, SizeProps } from \"styled-system\";\n\nconst rotate = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst Loader = styled.svg<SizeProps>`\n  animation: ${rotate} 1s linear infinite;\n  ${size}\n  ${system({\n    stroke: {\n      property: \"stroke\",\n      scale: \"colors\",\n    },\n  })}\n`;\nexport type Props = React.ComponentProps<typeof Loader> & {\n  color?: string;\n};\n\nexport default function InfiniteLoader({\n  size = 38,\n  color = \"primary.c50\",\n  ...extraProps\n}: Props): JSX.Element {\n  return (\n    <Loader\n      size={size}\n      stroke={color}\n      viewBox=\"0 0 38 38\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...extraProps}\n    >\n      <linearGradient\n        id=\"gradient-start\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"rotate(-20)\"\n      >\n        <stop offset=\"0\" stopColor=\"white\" stopOpacity=\"0.5\" />\n        <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"1\" />\n      </linearGradient>\n      <linearGradient\n        id=\"gradient-end\"\n        gradientUnits=\"userSpaceOnUse\"\n        gradientTransform=\"rotate(-20)\"\n      >\n        <stop offset=\"0\" stopColor=\"white\" stopOpacity=\"0.5\" />\n        <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n      </linearGradient>\n\n      <mask id=\"gradient-mask\" maskUnits=\"userSpaceOnUse\">\n        <rect\n          x=\"-0\"\n          y=\"-4\"\n          width=\"44\"\n          height=\"22\"\n          strokeWidth=\"0\"\n          fill=\"url(#gradient-start)\"\n          transform=\"rotate(10)\"\n        />\n        <rect\n          x=\"0\"\n          y=\"18\"\n          width=\"44\"\n          height=\"21\"\n          strokeWidth=\"0\"\n          fill=\"url(#gradient-end)\"\n          transform=\"rotate(10)\"\n        />\n      </mask>\n      <path\n        d=\"M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526\"\n        strokeWidth=\"6\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        mask=\"url(#gradient-mask)\"\n      />\n    </Loader>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAkC;AAClC,2BAAwC;AAExC,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASf,MAAM,SAAS,iCAAO;AAAA,eACP;AAAA,IACX;AAAA,IACA,iCAAO;AAAA,EACP,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA;AAAA;AAAA;AAQE,wBAAwB;AAAA,EACrC,cAAO;AAAA,EACP,QAAQ;AAAA,KACL;AAAA,GACkB;AACrB,SACE,mDAAC,QAAD;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,OACF;AAAA,KAEJ,mDAAC,kBAAD;AAAA,IACE,IAAG;AAAA,IACH,eAAc;AAAA,IACd,mBAAkB;AAAA,KAElB,mDAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAI,WAAU;AAAA,IAAQ,aAAY;AAAA,MAC/C,mDAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAI,WAAU;AAAA,IAAQ,aAAY;AAAA,OAEjD,mDAAC,kBAAD;AAAA,IACE,IAAG;AAAA,IACH,eAAc;AAAA,IACd,mBAAkB;AAAA,KAElB,mDAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAI,WAAU;AAAA,IAAQ,aAAY;AAAA,MAC/C,mDAAC,QAAD;AAAA,IAAM,QAAO;AAAA,IAAI,WAAU;AAAA,IAAQ,aAAY;AAAA,OAGjD,mDAAC,QAAD;AAAA,IAAM,IAAG;AAAA,IAAgB,WAAU;AAAA,KACjC,mDAAC,QAAD;AAAA,IACE,GAAE;AAAA,IACF,GAAE;AAAA,IACF,OAAM;AAAA,IACN,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,MAAK;AAAA,IACL,WAAU;AAAA,MAEZ,mDAAC,QAAD;AAAA,IACE,GAAE;AAAA,IACF,GAAE;AAAA,IACF,OAAM;AAAA,IACN,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,MAAK;AAAA,IACL,WAAU;AAAA,OAGd,mDAAC,QAAD;AAAA,IACE,GAAE;AAAA,IACF,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,MAAK;AAAA;AAAA;",
+  "names": []
+}

package/lib/cjs/components/loaders/ProgressLoader/ProgressLoader.stories.js

@@ -0,0 +1,90 @@
+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: () => ProgressLoader_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var ProgressLoader_stories_default = {
+  title: "Loaders/ProgressLoader",
+  component: import_index.default,
+  argTypes: {
+    radius: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 32
+    },
+    progress: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 20
+    },
+    stroke: {
+      control: {
+        type: "number"
+      },
+      defaultValue: 6
+    },
+    showPercentage: {
+      defaultValue: true,
+      control: {
+        type: "boolean"
+      }
+    },
+    frontStrokeColor: {
+      type: "string",
+      control: {
+        control: "color"
+      }
+    },
+    backgroundStrokeColor: {
+      type: "string",
+      control: {
+        control: "color"
+      }
+    },
+    textColor: {
+      type: "string",
+      control: {
+        control: "color"
+      }
+    }
+  }
+};
+const Default = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    radius: args.radius,
+    progress: args.progress,
+    stroke: args.stroke,
+    showPercentage: args.showPercentage,
+    frontStrokeColor: args.frontStrokeColor,
+    backgroundStrokeColor: args.backgroundStrokeColor,
+    frontStrokeLinecap: args.frontStrokeLinecap,
+    textColor: args.textColor
+  });
+};
+//# sourceMappingURL=ProgressLoader.stories.js.map

package/lib/cjs/components/loaders/ProgressLoader/ProgressLoader.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/loaders/ProgressLoader/ProgressLoader.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport ProgressLoader, { Props } from \"./index\";\n\nexport default {\n  title: \"Loaders/ProgressLoader\",\n  component: ProgressLoader,\n  argTypes: {\n    radius: {\n      control: {\n        type: \"number\",\n      },\n      defaultValue: 32,\n    },\n    progress: {\n      control: {\n        type: \"number\",\n      },\n      defaultValue: 20,\n    },\n    stroke: {\n      control: {\n        type: \"number\",\n      },\n      defaultValue: 6,\n    },\n    showPercentage: {\n      defaultValue: true,\n      control: {\n        type: \"boolean\",\n      },\n    },\n    frontStrokeColor: {\n      type: \"string\",\n      control: {\n        control: \"color\",\n      },\n    },\n    backgroundStrokeColor: {\n      type: \"string\",\n      control: {\n        control: \"color\",\n      },\n    },\n    textColor: {\n      type: \"string\",\n      control: {\n        control: \"color\",\n      },\n    },\n  },\n};\n\nexport const Default = (args: Props): JSX.Element => {\n  return (\n    <ProgressLoader\n      radius={args.radius}\n      progress={args.progress}\n      stroke={args.stroke}\n      showPercentage={args.showPercentage}\n      frontStrokeColor={args.frontStrokeColor}\n      backgroundStrokeColor={args.backgroundStrokeColor}\n      frontStrokeLinecap={args.frontStrokeLinecap}\n      textColor={args.textColor}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAsC;AAEtC,IAAO,iCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA;AAAA,MAER,cAAc;AAAA;AAAA,IAEhB,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA;AAAA,MAER,cAAc;AAAA;AAAA,IAEhB,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA;AAAA,MAER,cAAc;AAAA;AAAA,IAEhB,gBAAgB;AAAA,MACd,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA;AAAA;AAAA,IAGb,uBAAuB;AAAA,MACrB,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA;AAAA;AAAA,IAGb,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA;AAAA;AAAA;AAAA;AAMV,MAAM,UAAU,CAAC,SAA6B;AACnD,SACE,mDAAC,sBAAD;AAAA,IACE,QAAQ,KAAK;AAAA,IACb,UAAU,KAAK;AAAA,IACf,QAAQ,KAAK;AAAA,IACb,gBAAgB,KAAK;AAAA,IACrB,kBAAkB,KAAK;AAAA,IACvB,uBAAuB,KAAK;AAAA,IAC5B,oBAAoB,KAAK;AAAA,IACzB,WAAW,KAAK;AAAA;AAAA;",
+  "names": []
+}