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

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

@@ -1,36 +1,43 @@
+"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 Item_exports = {};
+__export(Item_exports, {
   ItemLabel: () => ItemLabel,
   default: () => Item_default
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import__ = __toModule(require("../index"));
-var import_Text = __toModule(require("../../../asorted/Text"));
-var import_TransitionInOut = __toModule(require("../../../transitions/TransitionInOut"));
-var import_Flex = __toModule(require("../../../layout/Flex"));
+module.exports = __toCommonJS(Item_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import__ = __toESM(require("../index"));
+var import_Text = __toESM(require("../../../asorted/Text"));
+var import_TransitionInOut = __toESM(require("../../../transitions/TransitionInOut"));
+var import_Flex = __toESM(require("../../../layout/Flex"));
 const ItemWrapper = import_styled_components.default.li`
   /** DEFAULT VARIANT **/
   --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};
@@ -114,31 +121,39 @@ const Item = ({
     onClick();
   };
   const badge = customNotificationBadge ?? /* @__PURE__ */ import_react.default.createElement(DefaultBadge, null);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(ItemWrapper, {
-    role: "button",
-    onClick: handleClick,
-    "data-active": isActive,
-    "data-disable": isDisabled,
-    tabIndex: 0
-  }, children, /* @__PURE__ */ import_react.default.createElement(CollapsedBadgeContainer, null, /* @__PURE__ */ import_react.default.createElement(import_TransitionInOut.default, {
-    unmountOnExit: true,
-    mountOnEnter: true,
-    in: !isExpanded,
-    style: { transitionDelay: !isExpanded ? "200ms" : 0 }
-  }, displayNotificationBadge && badge)), /* @__PURE__ */ import_react.default.createElement(import_TransitionInOut.default, {
-    timeout: 200,
-    in: isExpanded,
-    unmountOnExit: true,
-    mountOnEnter: true,
-    style: { transitionDelay: isExpanded ? "200ms" : 0, display: "flex", flex: "1" }
-  }, /* @__PURE__ */ import_react.default.createElement(ItemLabel, {
-    variant: "paragraph"
-  }, label), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    alignItems: "center",
-    justifyContent: "flex-end",
-    ml: 2,
-    flexGrow: 1
-  }, displayNotificationBadge && badge))));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    ItemWrapper,
+    {
+      role: "button",
+      onClick: handleClick,
+      "data-active": isActive,
+      "data-disable": isDisabled,
+      tabIndex: 0
+    },
+    children,
+    /* @__PURE__ */ import_react.default.createElement(CollapsedBadgeContainer, null, /* @__PURE__ */ import_react.default.createElement(
+      import_TransitionInOut.default,
+      {
+        unmountOnExit: true,
+        mountOnEnter: true,
+        in: !isExpanded,
+        style: { transitionDelay: !isExpanded ? "200ms" : 0 }
+      },
+      displayNotificationBadge && badge
+    )),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_TransitionInOut.default,
+      {
+        timeout: 200,
+        in: isExpanded,
+        unmountOnExit: true,
+        mountOnEnter: true,
+        style: { transitionDelay: isExpanded ? "200ms" : 0, display: "flex", flex: "1" }
+      },
+      /* @__PURE__ */ import_react.default.createElement(ItemLabel, { variant: "paragraph" }, label),
+      /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", justifyContent: "flex-end", ml: 2, flexGrow: 1 }, displayNotificationBadge && badge)
+    )
+  ));
 };
 var Item_default = Item;
 //# sourceMappingURL=Item.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/sideBar/Item/Item.tsx"],
   "sourcesContent": ["import React, { useContext } from \"react\";\nimport styled from \"styled-components\";\nimport SideBarContext from \"../index\";\nimport Text from \"../../../asorted/Text\";\nimport TransitionInOut from \"../../../transitions/TransitionInOut\";\nimport Flex from \"../../../layout/Flex\";\n\nconst ItemWrapper = styled.li`\n  /** DEFAULT VARIANT **/\n  --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};\n  --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};\n  --ll-sidebar-item-background-color: unset;\n\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-top: ${(p) => p.theme.space[3]}px;\n  column-gap: ${(p) => p.theme.space[5]}px;\n  padding: ${(p) => p.theme.space[5]}px;\n  border-radius: ${(p) => p.theme.space[3]}px;\n  min-height: ${(p) => p.theme.space[13]}px;\n  min-width: ${(p) => p.theme.space[13]}px;\n\n  color: var(--ll-sidebar-item-icon-color);\n  background-color: var(--ll-sidebar-item-background-color);\n  cursor: pointer;\n\n  /** HOVER VARIANT **/\n  &:hover {\n    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};\n    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};\n    --ll-sidebar-item-background-color: unset;\n  }\n\n  /** FOCUS VARIANT **/\n  &:focus {\n    box-shadow: 0px 0px 0px 4px rgba(187, 176, 255, 0.4);\n    border-radius: ${(p) => p.theme.space[3]}px;\n  }\n\n  /** ACTIVE VARIANT **/\n  &[data-active=\"true\"] {\n    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};\n    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};\n    --ll-sidebar-item-background-color: ${(props) => props.theme.colors.primary.c20};\n  }\n\n  /** DISABLE VARIANT **/\n  &[data-disable=\"true\"] {\n    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};\n    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};\n    --ll-sidebar-item-background-color: unset;\n    opacity: 0.3;\n    cursor: unset;\n    pointer-events: none;\n  }\n`;\n\nconst CollapsedBadgeContainer = styled.div`\n  position: absolute;\n  margin-top: -${(p) => p.theme.space[11]}px;\n  margin-left: ${(p) => p.theme.space[8]}px;\n`;\n\nconst DefaultBadge = styled.div`\n  height: ${(p) => p.theme.space[4]}px;\n  width: ${(p) => p.theme.space[4]}px;\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  background-color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nexport const ItemLabel = styled(Text)`\n  display: inline-block;\n  color: var(--ll-sidebar-item-label-color);\n\n  text-transform: capitalize;\n`;\n\nexport type ItemType = {\n  label: string;\n  children: JSX.Element;\n  onClick: () => void;\n  isActive?: boolean;\n  isDisabled?: boolean;\n  displayNotificationBadge?: boolean;\n  customNotificationBadge?: JSX.Element;\n};\n\nconst Item = ({\n  label,\n  children,\n  onClick,\n  isActive,\n  isDisabled,\n  displayNotificationBadge,\n  customNotificationBadge,\n}: ItemType): JSX.Element => {\n  const { isExpanded } = useContext(SideBarContext);\n\n  const handleClick = () => {\n    if (isDisabled) return;\n    onClick();\n  };\n\n  const badge = customNotificationBadge ?? <DefaultBadge />;\n\n  return (\n    <>\n      <ItemWrapper\n        role=\"button\"\n        onClick={handleClick}\n        data-active={isActive}\n        data-disable={isDisabled}\n        tabIndex={0}\n      >\n        {children}\n        <CollapsedBadgeContainer>\n          <TransitionInOut\n            unmountOnExit\n            mountOnEnter\n            in={!isExpanded}\n            style={{ transitionDelay: !isExpanded ? \"200ms\" : 0 }}\n          >\n            {displayNotificationBadge && badge}\n          </TransitionInOut>\n        </CollapsedBadgeContainer>\n        <TransitionInOut\n          timeout={200}\n          in={isExpanded}\n          unmountOnExit\n          mountOnEnter\n          style={{ transitionDelay: isExpanded ? \"200ms\" : 0, display: \"flex\", flex: \"1\" }}\n        >\n          <ItemLabel variant=\"paragraph\">{label}</ItemLabel>\n          <Flex alignItems=\"center\" justifyContent=\"flex-end\" ml={2} flexGrow={1}>\n            {displayNotificationBadge && badge}\n          </Flex>\n        </TransitionInOut>\n      </ItemWrapper>\n    </>\n  );\n};\n\nexport default Item;\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["styled", "Text", "SideBarContext", "React", "TransitionInOut", "Flex"]
 }

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

@@ -1,27 +1,33 @@
+"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 Item_stories_exports = {};
+__export(Item_stories_exports, {
   Active: () => Active,
   Default: () => Default,
   Disable: () => Disable,
@@ -29,13 +35,14 @@ __export(exports, {
   Hover: () => Hover,
   default: () => Item_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_addon_actions = __toModule(require("@storybook/addon-actions"));
-var import_WalletMedium = __toModule(require("@ledgerhq/icons-ui/react/WalletMedium"));
-var import_Text = __toModule(require("../../../asorted/Text"));
-var import_Flex = __toModule(require("../../../layout/Flex"));
-var import__ = __toModule(require(".."));
-var import_Item = __toModule(require("./Item"));
+module.exports = __toCommonJS(Item_stories_exports);
+var import_react = __toESM(require("react"));
+var import_addon_actions = require("@storybook/addon-actions");
+var import_WalletMedium = __toESM(require("@ledgerhq/icons-ui/react/WalletMedium"));
+var import_Text = __toESM(require("../../../asorted/Text"));
+var import_Flex = __toESM(require("../../../layout/Flex"));
+var import__ = __toESM(require(".."));
+var import_Item = __toESM(require("./Item"));
 var Item_stories_default = {
   title: "Navigation/SideBar/Item",
   component: import_Item.default,
@@ -53,32 +60,27 @@ var Item_stories_default = {
     displayNotificationBadge: { type: "boolean" }
   }
 };
-const Template = (args) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-  flexDirection: "column",
-  style: { rowGap: "1.5rem" }
-}, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-  flexDirection: "column",
-  alignItems: "flex-Start",
-  style: { width: "fit-content", rowGap: "0.5rem" }
-}, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-  variant: "h3"
-}, "Expanded"), /* @__PURE__ */ import_react.default.createElement(import__.default.Provider, {
-  value: { isExpanded: true, onToggle: () => {
-  } }
-}, /* @__PURE__ */ import_react.default.createElement(import_Item.default, {
-  ...args
-}, /* @__PURE__ */ import_react.default.createElement(import_WalletMedium.default, null)))), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-  flexDirection: "column",
-  alignItems: "flex-Start",
-  style: { width: "fit-content", rowGap: "0.5rem" }
-}, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-  variant: "h3"
-}, "Collapsed"), /* @__PURE__ */ import_react.default.createElement(import__.default.Provider, {
-  value: { isExpanded: false, onToggle: () => {
-  } }
-}, /* @__PURE__ */ import_react.default.createElement(import_Item.default, {
-  ...args
-}, /* @__PURE__ */ import_react.default.createElement(import_WalletMedium.default, null)))));
+const Template = (args) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", style: { rowGap: "1.5rem" } }, /* @__PURE__ */ import_react.default.createElement(
+  import_Flex.default,
+  {
+    flexDirection: "column",
+    alignItems: "flex-Start",
+    style: { width: "fit-content", rowGap: "0.5rem" }
+  },
+  /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h3" }, "Expanded"),
+  /* @__PURE__ */ import_react.default.createElement(import__.default.Provider, { value: { isExpanded: true, onToggle: () => {
+  } } }, /* @__PURE__ */ import_react.default.createElement(import_Item.default, { ...args }, /* @__PURE__ */ import_react.default.createElement(import_WalletMedium.default, null)))
+), /* @__PURE__ */ import_react.default.createElement(
+  import_Flex.default,
+  {
+    flexDirection: "column",
+    alignItems: "flex-Start",
+    style: { width: "fit-content", rowGap: "0.5rem" }
+  },
+  /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h3" }, "Collapsed"),
+  /* @__PURE__ */ import_react.default.createElement(import__.default.Provider, { value: { isExpanded: false, onToggle: () => {
+  } } }, /* @__PURE__ */ import_react.default.createElement(import_Item.default, { ...args }, /* @__PURE__ */ import_react.default.createElement(import_WalletMedium.default, null)))
+));
 const Default = Template.bind({});
 const Hover = Template.bind({});
 const Focus = Template.bind({});

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/sideBar/Item/Item.stories.tsx"],
   "sourcesContent": ["import React from \"react\";\nimport { action } from \"@storybook/addon-actions\";\n\nimport { StoryTemplate } from \"../../../helpers\";\nimport WalletIcon from \"@ledgerhq/icons-ui/react/WalletMedium\";\nimport Text from \"../../../asorted/Text\";\nimport Flex from \"../../../layout/Flex\";\nimport SideBarContext from \"..\";\nimport Item from \"./Item\";\nimport type { ItemType } from \"./Item\";\n\nexport default {\n  title: \"Navigation/SideBar/Item\",\n  component: Item,\n  argTypes: {\n    label: {\n      type: \"text\",\n      description: \"Label\",\n      required: true,\n      control: { type: \"text\" },\n    },\n    onClick: { control: false },\n    children: { control: false },\n    isActive: { type: \"boolean\" },\n    isDisabled: { type: \"boolean\" },\n    displayNotificationBadge: { type: \"boolean\" },\n  },\n};\n\nconst Template = (args: ItemType) => (\n  <Flex flexDirection=\"column\" style={{ rowGap: \"1.5rem\" }}>\n    <Flex\n      flexDirection=\"column\"\n      alignItems=\"flex-Start\"\n      style={{ width: \"fit-content\", rowGap: \"0.5rem\" }}\n    >\n      <Text variant=\"h3\">Expanded</Text>\n      <SideBarContext.Provider value={{ isExpanded: true, onToggle: () => {} }}>\n        <Item {...args}>\n          <WalletIcon />\n        </Item>\n      </SideBarContext.Provider>\n    </Flex>\n\n    <Flex\n      flexDirection=\"column\"\n      alignItems=\"flex-Start\"\n      style={{ width: \"fit-content\", rowGap: \"0.5rem\" }}\n    >\n      <Text variant=\"h3\">Collapsed</Text>\n      <SideBarContext.Provider value={{ isExpanded: false, onToggle: () => {} }}>\n        <Item {...args}>\n          <WalletIcon />\n        </Item>\n      </SideBarContext.Provider>\n    </Flex>\n  </Flex>\n);\n\nexport const Default: StoryTemplate<ItemType> = Template.bind({});\nexport const Hover: StoryTemplate<ItemType> = Template.bind({});\nexport const Focus: StoryTemplate<ItemType> = Template.bind({});\nexport const Active: StoryTemplate<ItemType> = Template.bind({});\nexport const Disable: StoryTemplate<ItemType> = Template.bind({});\n\nDefault.args = {\n  label: \"accounts\",\n  onClick: action(\"go to accounts\"),\n};\nActive.args = {\n  label: \"accounts\",\n  onClick: action(\"go to accounts\"),\n  isActive: true,\n};\nDisable.args = {\n  label: \"accounts\",\n  onClick: action(\"go to accounts\"),\n  isDisabled: true,\n};\nHover.args = {\n  label: \"accounts\",\n  onClick: action(\"go to accounts\"),\n};\nHover.parameters = { pseudo: { hover: true } };\nFocus.args = {\n  label: \"accounts\",\n  onClick: action(\"go to accounts\"),\n};\nFocus.parameters = { pseudo: { focus: true } };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,2BAAuB;AAGvB,0BAAuB;AACvB,kBAAiB;AACjB,kBAAiB;AACjB,eAA2B;AAC3B,kBAAiB;AAGjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,SAAS,EAAE,SAAS;AAAA,IACpB,UAAU,EAAE,SAAS;AAAA,IACrB,UAAU,EAAE,MAAM;AAAA,IAClB,YAAY,EAAE,MAAM;AAAA,IACpB,0BAA0B,EAAE,MAAM;AAAA;AAAA;AAItC,MAAM,WAAW,CAAC,SAChB,mDAAC,qBAAD;AAAA,EAAM,eAAc;AAAA,EAAS,OAAO,EAAE,QAAQ;AAAA,GAC5C,mDAAC,qBAAD;AAAA,EACE,eAAc;AAAA,EACd,YAAW;AAAA,EACX,OAAO,EAAE,OAAO,eAAe,QAAQ;AAAA,GAEvC,mDAAC,qBAAD;AAAA,EAAM,SAAQ;AAAA,GAAK,aACnB,mDAAC,iBAAe,UAAhB;AAAA,EAAyB,OAAO,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA,GAClE,mDAAC,qBAAD;AAAA,KAAU;AAAA,GACR,mDAAC,6BAAD,UAKN,mDAAC,qBAAD;AAAA,EACE,eAAc;AAAA,EACd,YAAW;AAAA,EACX,OAAO,EAAE,OAAO,eAAe,QAAQ;AAAA,GAEvC,mDAAC,qBAAD;AAAA,EAAM,SAAQ;AAAA,GAAK,cACnB,mDAAC,iBAAe,UAAhB;AAAA,EAAyB,OAAO,EAAE,YAAY,OAAO,UAAU,MAAM;AAAA;AAAA,GACnE,mDAAC,qBAAD;AAAA,KAAU;AAAA,GACR,mDAAC,6BAAD;AAOH,MAAM,UAAmC,SAAS,KAAK;AACvD,MAAM,QAAiC,SAAS,KAAK;AACrD,MAAM,QAAiC,SAAS,KAAK;AACrD,MAAM,SAAkC,SAAS,KAAK;AACtD,MAAM,UAAmC,SAAS,KAAK;AAE9D,QAAQ,OAAO;AAAA,EACb,OAAO;AAAA,EACP,SAAS,iCAAO;AAAA;AAElB,OAAO,OAAO;AAAA,EACZ,OAAO;AAAA,EACP,SAAS,iCAAO;AAAA,EAChB,UAAU;AAAA;AAEZ,QAAQ,OAAO;AAAA,EACb,OAAO;AAAA,EACP,SAAS,iCAAO;AAAA,EAChB,YAAY;AAAA;AAEd,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,SAAS,iCAAO;AAAA;AAElB,MAAM,aAAa,EAAE,QAAQ,EAAE,OAAO;AACtC,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,SAAS,iCAAO;AAAA;AAElB,MAAM,aAAa,EAAE,QAAQ,EAAE,OAAO;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,2BAAuB;AAGvB,0BAAuB;AACvB,kBAAiB;AACjB,kBAAiB;AACjB,eAA2B;AAC3B,kBAAiB;AAGjB,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,YAAAA;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,SAAS,EAAE,SAAS,MAAM;AAAA,IAC1B,UAAU,EAAE,SAAS,MAAM;AAAA,IAC3B,UAAU,EAAE,MAAM,UAAU;AAAA,IAC5B,YAAY,EAAE,MAAM,UAAU;AAAA,IAC9B,0BAA0B,EAAE,MAAM,UAAU;AAAA,EAC9C;AACF;AAEA,MAAM,WAAW,CAAC,SAChB,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,eAAc,UAAS,OAAO,EAAE,QAAQ,SAAS,KACrD,6BAAAD,QAAA;AAAA,EAAC,YAAAC;AAAA,EAAA;AAAA,IACC,eAAc;AAAA,IACd,YAAW;AAAA,IACX,OAAO,EAAE,OAAO,eAAe,QAAQ,SAAS;AAAA;AAAA,EAEhD,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,QAAK,UAAQ;AAAA,EAC3B,6BAAAF,QAAA,cAAC,SAAAG,QAAe,UAAf,EAAwB,OAAO,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,EAAC,EAAE,KACrE,6BAAAH,QAAA,cAAC,YAAAD,SAAA,EAAM,GAAG,QACR,6BAAAC,QAAA,cAAC,oBAAAI,SAAA,IAAW,CACd,CACF;AACF,GAEA,6BAAAJ,QAAA;AAAA,EAAC,YAAAC;AAAA,EAAA;AAAA,IACC,eAAc;AAAA,IACd,YAAW;AAAA,IACX,OAAO,EAAE,OAAO,eAAe,QAAQ,SAAS;AAAA;AAAA,EAEhD,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,QAAK,WAAS;AAAA,EAC5B,6BAAAF,QAAA,cAAC,SAAAG,QAAe,UAAf,EAAwB,OAAO,EAAE,YAAY,OAAO,UAAU,MAAM;AAAA,EAAC,EAAE,KACtE,6BAAAH,QAAA,cAAC,YAAAD,SAAA,EAAM,GAAG,QACR,6BAAAC,QAAA,cAAC,oBAAAI,SAAA,IAAW,CACd,CACF;AACF,CACF;AAGK,MAAM,UAAmC,SAAS,KAAK,CAAC,CAAC;AACzD,MAAM,QAAiC,SAAS,KAAK,CAAC,CAAC;AACvD,MAAM,QAAiC,SAAS,KAAK,CAAC,CAAC;AACvD,MAAM,SAAkC,SAAS,KAAK,CAAC,CAAC;AACxD,MAAM,UAAmC,SAAS,KAAK,CAAC,CAAC;AAEhE,QAAQ,OAAO;AAAA,EACb,OAAO;AAAA,EACP,aAAS,6BAAO,gBAAgB;AAClC;AACA,OAAO,OAAO;AAAA,EACZ,OAAO;AAAA,EACP,aAAS,6BAAO,gBAAgB;AAAA,EAChC,UAAU;AACZ;AACA,QAAQ,OAAO;AAAA,EACb,OAAO;AAAA,EACP,aAAS,6BAAO,gBAAgB;AAAA,EAChC,YAAY;AACd;AACA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,aAAS,6BAAO,gBAAgB;AAClC;AACA,MAAM,aAAa,EAAE,QAAQ,EAAE,OAAO,KAAK,EAAE;AAC7C,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,aAAS,6BAAO,gBAAgB;AAClC;AACA,MAAM,aAAa,EAAE,QAAQ,EAAE,OAAO,KAAK,EAAE;",
+  "names": ["Item", "React", "Flex", "Text", "SideBarContext", "WalletIcon"]
 }

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

@@ -1,28 +1,35 @@
+"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 Item_exports = {};
+__export(Item_exports, {
   default: () => import_Item.default
 });
-var import_Item = __toModule(require("./Item"));
+module.exports = __toCommonJS(Item_exports);
+var import_Item = __toESM(require("./Item"));
 //# sourceMappingURL=index.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/sideBar/Item/index.ts"],
   "sourcesContent": ["export { default } from \"./Item\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,kBAAwB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwB;",
   "names": []
 }

package/lib/cjs/components/navigation/sideBar/Logo/Logo.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 Logo_exports = {};
+__export(Logo_exports, {
   default: () => Logo_default
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_LedgerLiveRegular = __toModule(require("../../../../assets/logos/LedgerLiveRegular"));
-var import_LedgerLiveAltRegular = __toModule(require("../../../../assets/logos/LedgerLiveAltRegular"));
-var import_sideBar = __toModule(require("../../../navigation/sideBar"));
-var import_TransitionInOut = __toModule(require("../../../transitions/TransitionInOut"));
+module.exports = __toCommonJS(Logo_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_LedgerLiveRegular = __toESM(require("../../../../assets/logos/LedgerLiveRegular"));
+var import_LedgerLiveAltRegular = __toESM(require("../../../../assets/logos/LedgerLiveAltRegular"));
+var import_sideBar = __toESM(require("../../../navigation/sideBar"));
+var import_TransitionInOut = __toESM(require("../../../transitions/TransitionInOut"));
 const Container = import_styled_components.default.div`
   display: flex;
   flex-direction: row;
@@ -37,19 +44,27 @@ const Container = import_styled_components.default.div`
 `;
 const Logo = () => {
   const { isExpanded } = (0, import_react.useContext)(import_sideBar.default);
-  return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(import_TransitionInOut.default, {
-    timeout: 300,
-    in: isExpanded,
-    unmountOnExit: true,
-    mountOnEnter: true,
-    style: { transitionDelay: "300ms", marginLeft: "1rem" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_LedgerLiveRegular.default, null)), /* @__PURE__ */ import_react.default.createElement(import_TransitionInOut.default, {
-    timeout: 300,
-    in: !isExpanded,
-    unmountOnExit: true,
-    mountOnEnter: true,
-    style: { margin: "auto", transitionDelay: "300ms" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_LedgerLiveAltRegular.default, null)));
+  return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(
+    import_TransitionInOut.default,
+    {
+      timeout: 300,
+      in: isExpanded,
+      unmountOnExit: true,
+      mountOnEnter: true,
+      style: { transitionDelay: "300ms", marginLeft: "1rem" }
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_LedgerLiveRegular.default, null)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TransitionInOut.default,
+    {
+      timeout: 300,
+      in: !isExpanded,
+      unmountOnExit: true,
+      mountOnEnter: true,
+      style: { margin: "auto", transitionDelay: "300ms" }
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_LedgerLiveAltRegular.default, null)
+  ));
 };
 var Logo_default = Logo;
 //# sourceMappingURL=Logo.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/sideBar/Logo/Logo.tsx"],
   "sourcesContent": ["import React, { useContext } from \"react\";\nimport styled from \"styled-components\";\n\nimport LedgerLiveIconLarge from \"../../../../assets/logos/LedgerLiveRegular\";\nimport LedgerIconSmall from \"../../../../assets/logos/LedgerLiveAltRegular\";\nimport SideBarContext from \"../../../navigation/sideBar\";\nimport TransitionInOut from \"../../../transitions/TransitionInOut\";\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n`;\n\nconst Logo = (): JSX.Element => {\n  const { isExpanded } = useContext(SideBarContext);\n\n  return (\n    <Container>\n      <TransitionInOut\n        timeout={300}\n        in={isExpanded}\n        unmountOnExit\n        mountOnEnter\n        style={{ transitionDelay: \"300ms\", marginLeft: \"1rem\" }}\n      >\n        <LedgerLiveIconLarge />\n      </TransitionInOut>\n      <TransitionInOut\n        timeout={300}\n        in={!isExpanded}\n        unmountOnExit\n        mountOnEnter\n        style={{ margin: \"auto\", transitionDelay: \"300ms\" }}\n      >\n        <LedgerIconSmall />\n      </TransitionInOut>\n    </Container>\n  );\n};\n\nexport default Logo;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,+BAAmB;AAEnB,+BAAgC;AAChC,kCAA4B;AAC5B,qBAA2B;AAC3B,6BAA4B;AAE5B,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,OAAO,MAAmB;AAC9B,QAAM,EAAE,eAAe,6BAAW;AAElC,SACE,mDAAC,WAAD,MACE,mDAAC,gCAAD;AAAA,IACE,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,eAAa;AAAA,IACb,cAAY;AAAA,IACZ,OAAO,EAAE,iBAAiB,SAAS,YAAY;AAAA,KAE/C,mDAAC,kCAAD,QAEF,mDAAC,gCAAD;AAAA,IACE,SAAS;AAAA,IACT,IAAI,CAAC;AAAA,IACL,eAAa;AAAA,IACb,cAAY;AAAA,IACZ,OAAO,EAAE,QAAQ,QAAQ,iBAAiB;AAAA,KAE1C,mDAAC,qCAAD;AAAA;AAMR,IAAO,eAAQ;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,+BAAmB;AAEnB,+BAAgC;AAChC,kCAA4B;AAC5B,qBAA2B;AAC3B,6BAA4B;AAE5B,MAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,MAAM,OAAO,MAAmB;AAC9B,QAAM,EAAE,WAAW,QAAI,yBAAW,eAAAC,OAAc;AAEhD,SACE,6BAAAC,QAAA,cAAC,iBACC,6BAAAA,QAAA;AAAA,IAAC,uBAAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,eAAa;AAAA,MACb,cAAY;AAAA,MACZ,OAAO,EAAE,iBAAiB,SAAS,YAAY,OAAO;AAAA;AAAA,IAEtD,6BAAAD,QAAA,cAAC,yBAAAE,SAAA,IAAoB;AAAA,EACvB,GACA,6BAAAF,QAAA;AAAA,IAAC,uBAAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,IAAI,CAAC;AAAA,MACL,eAAa;AAAA,MACb,cAAY;AAAA,MACZ,OAAO,EAAE,QAAQ,QAAQ,iBAAiB,QAAQ;AAAA;AAAA,IAElD,6BAAAD,QAAA,cAAC,4BAAAG,SAAA,IAAgB;AAAA,EACnB,CACF;AAEJ;AAEA,IAAO,eAAQ;",
+  "names": ["styled", "SideBarContext", "React", "TransitionInOut", "LedgerLiveIconLarge", "LedgerIconSmall"]
 }

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

@@ -1,28 +1,35 @@
+"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 Logo_exports = {};
+__export(Logo_exports, {
   default: () => import_Logo.default
 });
-var import_Logo = __toModule(require("./Logo"));
+module.exports = __toCommonJS(Logo_exports);
+var import_Logo = __toESM(require("./Logo"));
 //# sourceMappingURL=index.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/sideBar/Logo/index.ts"],
   "sourcesContent": ["export { default } from \"./Logo\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,kBAAwB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwB;",
   "names": []
 }