@ledgerhq/react-ui 0.15.4-nightly.1 → 0.16.0-next.0

package/lib/cjs/components/form/TabSelector/TabSelector.stories.js

@@ -0,0 +1,57 @@
+"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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+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 TabSelector_stories_exports = {};
+__export(TabSelector_stories_exports, {
+  Default: () => Default,
+  default: () => TabSelector_stories_default
+});
+module.exports = __toCommonJS(TabSelector_stories_exports);
+var import_react = __toESM(require("react"));
+var import_index = __toESM(require("./index"));
+var TabSelector_stories_default = {
+  title: "Form/SelectionControls/TabSelector",
+  component: import_index.default
+};
+const Template = () => {
+  const [currentOption, setCurrentOption] = (0, import_react.useState)("mobile");
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      options: ["mobile", "desktop"],
+      selectedOption: currentOption,
+      handleSelectOption: setCurrentOption,
+      labels: {
+        ["mobile"]: "Mobile",
+        ["desktop"]: "Desktop"
+      }
+    }
+  );
+};
+const Default = Template.bind({});
+//# sourceMappingURL=TabSelector.stories.js.map

package/lib/cjs/components/form/TabSelector/TabSelector.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/TabSelector/TabSelector.stories.tsx"],
+  "sourcesContent": ["import React, { useState } from \"react\";\n\nimport TabSelector from \"./index\";\n\nexport default {\n  title: \"Form/SelectionControls/TabSelector\",\n  component: TabSelector,\n};\n\nconst Template = () => {\n  const [currentOption, setCurrentOption] = useState(\"mobile\");\n  return (\n    <TabSelector\n      options={[\"mobile\", \"desktop\"]}\n      selectedOption={currentOption}\n      handleSelectOption={setCurrentOption}\n      labels={{\n        [\"mobile\"]: \"Mobile\",\n        [\"desktop\"]: \"Desktop\",\n      }}\n    />\n  );\n};\n\nexport const Default = Template.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,mBAAwB;AAExB,IAAO,8BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AACb;AAEA,MAAM,WAAW,MAAM;AACrB,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,QAAQ;AAC3D,SACE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACC,SAAS,CAAC,UAAU,SAAS;AAAA,MAC7B,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,MACpB,QAAQ;AAAA,QACN,CAAC,QAAQ,GAAG;AAAA,QACZ,CAAC,SAAS,GAAG;AAAA,MACf;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;",
+  "names": ["TabSelector", "React"]
+}

package/lib/cjs/components/form/TabSelector/index.js

@@ -0,0 +1,124 @@
+"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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 to;
+};
+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 TabSelector_exports = {};
+__export(TabSelector_exports, {
+  default: () => TabSelector
+});
+module.exports = __toCommonJS(TabSelector_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_framer_motion = require("framer-motion");
+const StyledButton = (0, import_styled_components.default)(import_Flex.default)`
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledFlex = (0, import_styled_components.default)(import_Flex.default)`
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledText = (0, import_styled_components.default)(import_Text.default)`
+  line-height: 14.52px;
+  overflow: visible;
+  text-align: center;
+  font-size: 12px;
+  color: ${(p) => p.isSelected ? p.theme.colors.constant.black : p.theme.colors.opacityDefault.c50};
+  z-index: 10;
+`;
+const OptionButton = ({
+  option,
+  selectedOption,
+  handleSelectOption,
+  label,
+  width
+}) => {
+  const isSelected = selectedOption === option;
+  return /* @__PURE__ */ import_react.default.createElement(StyledButton, { width, onClick: () => handleSelectOption(option) }, /* @__PURE__ */ import_react.default.createElement(StyledFlex, { isSelected }, /* @__PURE__ */ import_react.default.createElement(StyledText, { fontWeight: "semiBold", isSelected }, label)));
+};
+function TabSelector({
+  options,
+  selectedOption,
+  handleSelectOption,
+  labels
+}) {
+  const { colors } = (0, import_styled_components.useTheme)();
+  const longuestLabel = labels[options[0]].length > labels[options[1]].length ? options[0] : options[1];
+  const widthFactor = 8;
+  const margin = 20;
+  const width = labels[longuestLabel].length * widthFactor + margin;
+  const semiWidth = width / 2;
+  const controls = (0, import_framer_motion.useAnimation)();
+  (0, import_react.useEffect)(() => {
+    controls.start({
+      x: selectedOption === options[0] ? -semiWidth : semiWidth,
+      transition: { type: "spring", damping: 30, stiffness: 130 }
+    });
+  }, [selectedOption, controls, options, semiWidth]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Flex.default,
+    {
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+      width: width * 2 + 4,
+      height: "35px",
+      borderRadius: "40px",
+      bg: colors.opacityDefault.c05,
+      position: "relative"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_framer_motion.motion.div,
+      {
+        style: {
+          position: "absolute",
+          width,
+          height: "90%",
+          backgroundColor: colors.primary.c80,
+          borderRadius: 40
+        },
+        animate: controls
+      }
+    ),
+    options.map((option) => /* @__PURE__ */ import_react.default.createElement(
+      OptionButton,
+      {
+        width,
+        key: option,
+        option,
+        selectedOption,
+        handleSelectOption,
+        label: labels[option]
+      }
+    ))
+  );
+}
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/form/TabSelector/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/TabSelector/index.tsx"],
+  "sourcesContent": ["import React, { useEffect } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { motion, useAnimation } from \"framer-motion\";\n\nconst StyledButton = styled(Flex)`\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n`;\nconst StyledFlex = styled(Flex)<{ isSelected: boolean }>`\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst StyledText = styled(Text)<{ isSelected: boolean }>`\n  line-height: 14.52px;\n  overflow: visible;\n  text-align: center;\n  font-size: 12px;\n  color: ${p => (p.isSelected ? p.theme.colors.constant.black : p.theme.colors.opacityDefault.c50)};\n  z-index: 10;\n`;\n\ninterface OptionButtonProps<T> {\n  option: T;\n  selectedOption: T;\n  handleSelectOption: (option: T) => void;\n  label: string;\n  width: number;\n}\n\nconst OptionButton = <T,>({\n  option,\n  selectedOption,\n  handleSelectOption,\n  label,\n  width,\n}: OptionButtonProps<T>) => {\n  const isSelected = selectedOption === option;\n\n  return (\n    <StyledButton width={width} onClick={() => handleSelectOption(option)}>\n      <StyledFlex isSelected={isSelected}>\n        <StyledText fontWeight=\"semiBold\" isSelected={isSelected}>\n          {label}\n        </StyledText>\n      </StyledFlex>\n    </StyledButton>\n  );\n};\n\nexport interface TabSelectorProps<T extends string | number> {\n  options: T[];\n  selectedOption: T;\n  handleSelectOption: (option: T) => void;\n  labels: { [key in T]: string };\n}\n\nexport default function TabSelector<T extends string | number>({\n  options,\n  selectedOption,\n  handleSelectOption,\n  labels,\n}: TabSelectorProps<T>): JSX.Element {\n  const { colors } = useTheme();\n\n  const longuestLabel =\n    labels[options[0]].length > labels[options[1]].length ? options[0] : options[1];\n\n  const widthFactor = 8;\n  const margin = 20;\n  const width = labels[longuestLabel].length * widthFactor + margin;\n  const semiWidth = width / 2;\n  const controls = useAnimation();\n\n  useEffect(() => {\n    controls.start({\n      x: selectedOption === options[0] ? -semiWidth : semiWidth,\n      transition: { type: \"spring\", damping: 30, stiffness: 130 },\n    });\n  }, [selectedOption, controls, options, semiWidth]);\n\n  return (\n    <Flex\n      flexDirection={\"row\"}\n      justifyContent={\"center\"}\n      alignItems={\"center\"}\n      width={width * 2 + 4}\n      height={\"35px\"}\n      borderRadius={\"40px\"}\n      bg={colors.opacityDefault.c05}\n      position={\"relative\"}\n    >\n      <motion.div\n        style={{\n          position: \"absolute\",\n          width: width,\n          height: \"90%\",\n          backgroundColor: colors.primary.c80,\n          borderRadius: 40,\n        }}\n        animate={controls}\n      />\n      {options.map(option => (\n        <OptionButton\n          width={width}\n          key={option}\n          option={option}\n          selectedOption={selectedOption}\n          handleSelectOption={handleSelectOption}\n          label={labels[option]}\n        />\n      ))}\n    </Flex>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,+BAAiC;AACjC,kBAAiB;AACjB,kBAAiB;AACjB,2BAAqC;AAErC,MAAM,mBAAe,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA;AAKhC,MAAM,iBAAa,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAM,iBAAa,yBAAAD,SAAO,YAAAE,OAAI;AAAA;AAAA;AAAA;AAAA;AAAA,WAKnB,OAAM,EAAE,aAAa,EAAE,MAAM,OAAO,SAAS,QAAQ,EAAE,MAAM,OAAO,eAAe,GAAI;AAAA;AAAA;AAYlG,MAAM,eAAe,CAAK;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,aAAa,mBAAmB;AAEtC,SACE,6BAAAC,QAAA,cAAC,gBAAa,OAAc,SAAS,MAAM,mBAAmB,MAAM,KAClE,6BAAAA,QAAA,cAAC,cAAW,cACV,6BAAAA,QAAA,cAAC,cAAW,YAAW,YAAW,cAC/B,KACH,CACF,CACF;AAEJ;AASe,SAAR,YAAwD;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AACnC,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,QAAM,gBACJ,OAAO,QAAQ,CAAC,CAAC,EAAE,SAAS,OAAO,QAAQ,CAAC,CAAC,EAAE,SAAS,QAAQ,CAAC,IAAI,QAAQ,CAAC;AAEhF,QAAM,cAAc;AACpB,QAAM,SAAS;AACf,QAAM,QAAQ,OAAO,aAAa,EAAE,SAAS,cAAc;AAC3D,QAAM,YAAY,QAAQ;AAC1B,QAAM,eAAW,mCAAa;AAE9B,8BAAU,MAAM;AACd,aAAS,MAAM;AAAA,MACb,GAAG,mBAAmB,QAAQ,CAAC,IAAI,CAAC,YAAY;AAAA,MAChD,YAAY,EAAE,MAAM,UAAU,SAAS,IAAI,WAAW,IAAI;AAAA,IAC5D,CAAC;AAAA,EACH,GAAG,CAAC,gBAAgB,UAAU,SAAS,SAAS,CAAC;AAEjD,SACE,6BAAAA,QAAA;AAAA,IAAC,YAAAF;AAAA,IAAA;AAAA,MACC,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,OAAO,QAAQ,IAAI;AAAA,MACnB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,IAAI,OAAO,eAAe;AAAA,MAC1B,UAAU;AAAA;AAAA,IAEV,6BAAAE,QAAA;AAAA,MAAC,4BAAO;AAAA,MAAP;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV;AAAA,UACA,QAAQ;AAAA,UACR,iBAAiB,OAAO,QAAQ;AAAA,UAChC,cAAc;AAAA,QAChB;AAAA,QACA,SAAS;AAAA;AAAA,IACX;AAAA,IACC,QAAQ,IAAI,YACX,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,OAAO,MAAM;AAAA;AAAA,IACtB,CACD;AAAA,EACH;AAEJ;",
+  "names": ["styled", "Flex", "Text", "React"]
+}

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

@@ -40,7 +40,8 @@ __export(form_exports, {
   SearchInput: () => import_SearchInput.default,
   SelectInput: () => import_SelectInput.default,
   SplitInput: () => import_SplitInput.default,
-  Switch: () => import_Switch.default
+  Switch: () => import_Switch.default,
+  TabSelector: () => import_TabSelector.default
 });
 module.exports = __toCommonJS(form_exports);
 var import_BaseInput = __toESM(require("./BaseInput"));
@@ -56,4 +57,5 @@ var import_SearchInput = __toESM(require("./SearchInput"));
 var import_SelectInput = __toESM(require("./SelectInput"));
 var import_SplitInput = __toESM(require("./SplitInput"));
 var import_Switch = __toESM(require("./Switch"));
+var import_TabSelector = __toESM(require("./TabSelector"));
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form/index.ts"],
-  "sourcesContent": ["export { default as Input } from \"./BaseInput\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Dropdown } from \"./Dropdown\";\nexport { default as DropdownGeneric } from \"./DropdownGeneric\";\nexport { default as LegendInput } from \"./LegendInput\";\nexport { default as NumberInput } from \"./NumberInput\";\nexport { default as QrCodeInput } from \"./QrCodeInput\";\nexport { default as QuantityInput } from \"./QuantityInput\";\nexport { default as Radio } from \"./Radio\";\nexport { default as SearchInput } from \"./SearchInput\";\nexport { default as SelectInput } from \"./SelectInput\";\nexport { default as SplitInput } from \"./SplitInput\";\nexport { default as Switch } from \"./Switch\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAiC;AACjC,sBAAoC;AACpC,sBAAoC;AACpC,6BAA2C;AAC3C,yBAAuC;AACvC,yBAAuC;AACvC,yBAAuC;AACvC,2BAAyC;AACzC,mBAAiC;AACjC,yBAAuC;AACvC,yBAAuC;AACvC,wBAAsC;AACtC,oBAAkC;",
+  "sourcesContent": ["export { default as Input } from \"./BaseInput\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Dropdown } from \"./Dropdown\";\nexport { default as DropdownGeneric } from \"./DropdownGeneric\";\nexport { default as LegendInput } from \"./LegendInput\";\nexport { default as NumberInput } from \"./NumberInput\";\nexport { default as QrCodeInput } from \"./QrCodeInput\";\nexport { default as QuantityInput } from \"./QuantityInput\";\nexport { default as Radio } from \"./Radio\";\nexport { default as SearchInput } from \"./SearchInput\";\nexport { default as SelectInput } from \"./SelectInput\";\nexport { default as SplitInput } from \"./SplitInput\";\nexport { default as Switch } from \"./Switch\";\nexport { default as TabSelector } from \"./TabSelector\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAiC;AACjC,sBAAoC;AACpC,sBAAoC;AACpC,6BAA2C;AAC3C,yBAAuC;AACvC,yBAAuC;AACvC,yBAAuC;AACvC,2BAAyC;AACzC,mBAAiC;AACjC,yBAAuC;AACvC,yBAAuC;AACvC,wBAAsC;AACtC,oBAAkC;AAClC,yBAAuC;",
   "names": []
 }

package/lib/components/form/TabSelector/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface TabSelectorProps<T extends string | number> {
+    options: T[];
+    selectedOption: T;
+    handleSelectOption: (option: T) => void;
+    labels: {
+        [key in T]: string;
+    };
+}
+export default function TabSelector<T extends string | number>({ options, selectedOption, handleSelectOption, labels, }: TabSelectorProps<T>): JSX.Element;

package/lib/components/form/TabSelector/index.js

@@ -0,0 +1,54 @@
+import React, { useEffect } from "react";
+import styled, { useTheme } from "styled-components";
+import Flex from "../../layout/Flex";
+import Text from "../../asorted/Text";
+import { motion, useAnimation } from "framer-motion";
+const StyledButton = styled(Flex) `
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledFlex = styled(Flex) `
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledText = styled(Text) `
+  line-height: 14.52px;
+  overflow: visible;
+  text-align: center;
+  font-size: 12px;
+  color: ${p => (p.isSelected ? p.theme.colors.constant.black : p.theme.colors.opacityDefault.c50)};
+  z-index: 10;
+`;
+const OptionButton = ({ option, selectedOption, handleSelectOption, label, width, }) => {
+    const isSelected = selectedOption === option;
+    return (React.createElement(StyledButton, { width: width, onClick: () => handleSelectOption(option) },
+        React.createElement(StyledFlex, { isSelected: isSelected },
+            React.createElement(StyledText, { fontWeight: "semiBold", isSelected: isSelected }, label))));
+};
+export default function TabSelector({ options, selectedOption, handleSelectOption, labels, }) {
+    const { colors } = useTheme();
+    const longuestLabel = labels[options[0]].length > labels[options[1]].length ? options[0] : options[1];
+    const widthFactor = 8;
+    const margin = 20;
+    const width = labels[longuestLabel].length * widthFactor + margin;
+    const semiWidth = width / 2;
+    const controls = useAnimation();
+    useEffect(() => {
+        controls.start({
+            x: selectedOption === options[0] ? -semiWidth : semiWidth,
+            transition: { type: "spring", damping: 30, stiffness: 130 },
+        });
+    }, [selectedOption, controls, options, semiWidth]);
+    return (React.createElement(Flex, { flexDirection: "row", justifyContent: "center", alignItems: "center", width: width * 2 + 4, height: "35px", borderRadius: "40px", bg: colors.opacityDefault.c05, position: "relative" },
+        React.createElement(motion.div, { style: {
+                position: "absolute",
+                width: width,
+                height: "90%",
+                backgroundColor: colors.primary.c80,
+                borderRadius: 40,
+            }, animate: controls }),
+        options.map(option => (React.createElement(OptionButton, { width: width, key: option, option: option, selectedOption: selectedOption, handleSelectOption: handleSelectOption, label: labels[option] })))));
+}
+//# sourceMappingURL=index.js.map

package/lib/components/form/TabSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/form/TabSelector/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/form/index.d.ts

@@ -11,3 +11,4 @@ export { default as SearchInput } from "./SearchInput";
 export { default as SelectInput } from "./SelectInput";
 export { default as SplitInput } from "./SplitInput";
 export { default as Switch } from "./Switch";
+export { default as TabSelector } from "./TabSelector";

package/lib/components/form/index.js

@@ -11,4 +11,5 @@ export { default as SearchInput } from "./SearchInput";
 export { default as SelectInput } from "./SelectInput";
 export { default as SplitInput } from "./SplitInput";
 export { default as Switch } from "./Switch";
+export { default as TabSelector } from "./TabSelector";
 //# sourceMappingURL=index.js.map

package/lib/components/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.15.4-nightly.1",
+  "version": "0.16.0-next.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -60,14 +60,15 @@
     "@tippyjs/react": "^4.2.6",
     "color": "^4.0.0",
     "embla-carousel-react": "8.0.0-rc17",
+    "framer-motion": "^11.3.28",
     "react-is": "^17.0.2",
     "react-select": "^5.2.1",
     "react-spring": "8.0.27",
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.4.0-nightly.1",
-    "@ledgerhq/icons-ui": "^0.7.1",
+    "@ledgerhq/crypto-icons-ui": "^1.4.1-next.0",
+    "@ledgerhq/icons-ui": "^0.7.3-next.0",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
   "peerDependencies": {
@@ -83,10 +84,10 @@
     "@storybook/addon-actions": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
     "@storybook/blocks": "^7.5.3",
     "@storybook/manager-api": "7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-svgo": "*",
     "@types/color": "^3.0.2",