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

package/lib/cjs/components/navigation/progress/Stepper/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/progress/Stepper/index.tsx"],
+  "sourcesContent": ["import React, { memo, Fragment } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps, color, ColorProps, space, SpaceProps } from \"styled-system\";\nimport { Icons } from \"../../../../index\";\nimport Text from \"../../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../../layout/Flex\";\n\n/**\n * The state of a progress bar step.\n */\nexport type StepState = \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\";\n\ntype LabelType = string | React.ComponentType<{ state: StepState }>;\nexport interface Props extends FlexBoxProps {\n  /**\n   * An array of labels that will determine the progress bar steps.\n   *  A label is either a string or a component that will be rendered with the\n   *  prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\"`.\n   *  A styled StepText component is exported to allow easy styling of such a custom label.\n   */\n  steps: LabelType[];\n  /**\n   * Index of the active step, starting at zero and defaulting to 0 if omitted.\n   */\n  activeIndex?: number;\n  /**\n   * If true the current step is considered as a failure.\n   */\n  errored?: boolean;\n  /**\n   * Steps with indexes contained inside the array will be shown as disabled.\n   */\n  disabledIndexes?: number[];\n}\n\nexport type StepProps = {\n  /**\n   * State of the step.\n   */\n  state: StepState;\n  /**\n   * The label to display. To display more than text, this can be a component that will be rendered with the\n   *  prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\"`.\n   *  A styled StepText component is exported to allow easy styling of such a custom Label\n   */\n  label: LabelType;\n  /**\n   * If true, hides the left \"separator\" bar that bridges the gap between the wider separator and the item.\n   */\n  hideLeftSeparator: boolean;\n  /**\n   * The next step state, or undefined if the current step is the last one.\n   */\n  nextState?: StepState;\n};\n\nexport const Item = {\n  Container: styled.div.attrs({\n    mx: \"8px\",\n  })<ColorProps & BorderProps & SpaceProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ${(p) => p.theme.space[8]}px;\n    height: ${(p) => p.theme.space[8]}px;\n    ${color}\n    ${border}\n    ${space}\n  `,\n  Spacer: styled.div<SpaceProps>`\n    display: flex;\n    align-self: stretch;\n    ${space}\n  `,\n  Current: styled.div.attrs({\n    backgroundColor: \"primary.c90\",\n  })<ColorProps>`\n    width: 6px;\n    height: 6px;\n    border-radius: 6px;\n    ${color}\n  `,\n  Pending: styled.div.attrs({\n    backgroundColor: \"neutral.c70\",\n  })<ColorProps>`\n    width: ${(p) => p.theme.space[2]}px;\n    height: ${(p) => p.theme.space[2]}px;\n    border-radius: ${(p) => p.theme.space[2]}px;\n    ${color}\n  `,\n  Completed: (): JSX.Element => <Icons.CheckAloneMedium size={16} />,\n  Disabled: (): JSX.Element => <Icons.CloseMedium size={16} />,\n  Errored: (): JSX.Element => <Icons.CloseMedium size={16} />,\n};\n\nexport const StepText = styled(Text)<{ state: StepState }>`\n  color: ${(p) => {\n    if (p.state === \"errored\") {\n      return p.theme.colors.error.c100;\n    }\n    if (p.state === \"disabled\") {\n      return p.theme.colors.neutral.c50;\n    }\n    if (p.state === \"pending\") {\n      return p.theme.colors.neutral.c70;\n    }\n    return p.theme.colors.neutral.c100;\n  }};\n`;\n\nconst BaseSeparator = styled.div<{ inactive?: boolean }>`\n  flex: 1;\n  position: relative;\n  overflow-x: hidden;\n  background-color: ${(p) => p.theme.colors.neutral.c40};\n  height: 1px;\n  top: ${(p) => p.theme.space[5]}px;\n`;\n\nconst Separator = {\n  Step: styled(BaseSeparator)``,\n  Item: styled(BaseSeparator)<{ position: string }>``,\n};\n\nconst stepContentsByState = {\n  pending: (\n    <Item.Container>\n      <Item.Pending />\n    </Item.Container>\n  ),\n  current: (\n    <Item.Container backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n      <Item.Current />\n    </Item.Container>\n  ),\n  completed: (\n    <Item.Container color=\"primary.c90\" backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n      <Item.Completed />\n    </Item.Container>\n  ),\n  errored: (\n    <Item.Container color=\"error.c100\" backgroundColor=\"warning.c30\" borderRadius=\"8px\">\n      <Item.Errored />\n    </Item.Container>\n  ),\n  disabled: (\n    <Item.Container color=\"neutral.c50\">\n      <Item.Disabled />\n    </Item.Container>\n  ),\n};\n\nexport const Step = memo(function Step({\n  state,\n  label: Label,\n  hideLeftSeparator,\n  nextState,\n}: StepProps): JSX.Element {\n  const inactive = state === \"pending\";\n  const nextInactive = state === \"pending\";\n\n  return (\n    <Flex flexDirection=\"column\" alignItems=\"center\">\n      <Item.Spacer mb={5}>\n        {(!hideLeftSeparator && <Separator.Item inactive={inactive} position=\"left\" />) || (\n          <Flex flex=\"1\" />\n        )}\n        {stepContentsByState[state]}\n        {(nextState && <Separator.Item inactive={nextInactive} position=\"right\" />) || (\n          <Flex flex=\"1\" />\n        )}\n      </Item.Spacer>\n      {typeof Label === \"string\" ? (\n        <StepText state={state} variant=\"small\">\n          {Label}\n        </StepText>\n      ) : (\n        <Label state={state} />\n      )}\n    </Flex>\n  );\n});\n\nfunction getState(activeIndex: number, index: number, errored?: boolean, disabled?: boolean) {\n  if (disabled) {\n    return \"disabled\";\n  }\n  if (activeIndex < index) {\n    return \"pending\";\n  }\n  if (activeIndex === index) {\n    return errored ? \"errored\" : \"current\";\n  }\n  return \"completed\";\n}\n\nfunction Stepper({ steps, activeIndex = 0, errored, disabledIndexes, ...extraProps }: Props) {\n  return (\n    <Flex flexWrap=\"nowrap\" justifyContent=\"space-between\" {...extraProps}>\n      {steps.map((step, idx) => {\n        const state = getState(activeIndex, idx, errored, disabledIndexes?.includes(idx));\n        const nextState = idx < steps.length - 1 ? getState(activeIndex, idx + 1) : undefined;\n        return (\n          <Fragment key={idx}>\n            {idx > 0 && <Separator.Step inactive={state === \"pending\"} />}\n            <Step label={step} state={state} nextState={nextState} hideLeftSeparator={idx === 0} />\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n}\n\nexport default memo(Stepper);\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,30 @@
+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, {
+  ProgressBar: () => import_ProgressBar.default,
+  Stepper: () => import_Stepper.default
+});
+var import_ProgressBar = __toModule(require("./ProgressBar"));
+var import_Stepper = __toModule(require("./Stepper"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/navigation/progress/index.ts"],
+  "sourcesContent": ["export { default as ProgressBar } from \"./ProgressBar\";\nexport { default as Stepper } from \"./Stepper\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAuC;AACvC,qBAAmC;",
+  "names": []
+}

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

@@ -0,0 +1,144 @@
+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, {
+  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"));
+const ItemWrapper = import_styled_components.default.li`
+  /** DEFAULT VARIANT **/
+  --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};
+  --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};
+  --ll-sidebar-item-background-color: unset;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: ${(p) => p.theme.space[3]}px;
+  column-gap: ${(p) => p.theme.space[5]}px;
+  padding: ${(p) => p.theme.space[5]}px;
+  border-radius: ${(p) => p.theme.space[3]}px;
+  min-height: ${(p) => p.theme.space[13]}px;
+  min-width: ${(p) => p.theme.space[13]}px;
+
+  color: var(--ll-sidebar-item-icon-color);
+  background-color: var(--ll-sidebar-item-background-color);
+  cursor: pointer;
+
+  /** HOVER VARIANT **/
+  &:hover {
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};
+    --ll-sidebar-item-background-color: unset;
+  }
+
+  /** FOCUS VARIANT **/
+  &:focus {
+    box-shadow: 0px 0px 0px 4px rgba(187, 176, 255, 0.4);
+    border-radius: ${(p) => p.theme.space[3]}px;
+  }
+
+  /** ACTIVE VARIANT **/
+  &[data-active="true"] {
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};
+    --ll-sidebar-item-background-color: ${(props) => props.theme.colors.primary.c20};
+  }
+
+  /** DISABLE VARIANT **/
+  &[data-disable="true"] {
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};
+    --ll-sidebar-item-background-color: unset;
+    opacity: 0.3;
+    cursor: unset;
+    pointer-events: none;
+  }
+`;
+const CollapsedBadgeContainer = import_styled_components.default.div`
+  position: absolute;
+  margin-top: -${(p) => p.theme.space[11]}px;
+  margin-left: ${(p) => p.theme.space[8]}px;
+`;
+const DefaultBadge = import_styled_components.default.div`
+  height: ${(p) => p.theme.space[4]}px;
+  width: ${(p) => p.theme.space[4]}px;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  background-color: ${(p) => p.theme.colors.primary.c80};
+`;
+const ItemLabel = (0, import_styled_components.default)(import_Text.default)`
+  display: inline-block;
+  color: var(--ll-sidebar-item-label-color);
+
+  text-transform: capitalize;
+`;
+const Item = ({
+  label,
+  children,
+  onClick,
+  isActive,
+  isDisabled,
+  displayNotificationBadge,
+  customNotificationBadge
+}) => {
+  const { isExpanded } = (0, import_react.useContext)(import__.default);
+  const handleClick = () => {
+    if (isDisabled)
+      return;
+    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))));
+};
+var Item_default = Item;
+//# sourceMappingURL=Item.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

package/lib/cjs/components/navigation/sideBar/Item/Item.stories.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, {
+  Active: () => Active,
+  Default: () => Default,
+  Disable: () => Disable,
+  Focus: () => Focus,
+  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"));
+var Item_stories_default = {
+  title: "Navigation/SideBar/Item",
+  component: import_Item.default,
+  argTypes: {
+    label: {
+      type: "text",
+      description: "Label",
+      required: true,
+      control: { type: "text" }
+    },
+    onClick: { control: false },
+    children: { control: false },
+    isActive: { type: "boolean" },
+    isDisabled: { type: "boolean" },
+    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 Default = Template.bind({});
+const Hover = Template.bind({});
+const Focus = Template.bind({});
+const Active = Template.bind({});
+const Disable = Template.bind({});
+Default.args = {
+  label: "accounts",
+  onClick: (0, import_addon_actions.action)("go to accounts")
+};
+Active.args = {
+  label: "accounts",
+  onClick: (0, import_addon_actions.action)("go to accounts"),
+  isActive: true
+};
+Disable.args = {
+  label: "accounts",
+  onClick: (0, import_addon_actions.action)("go to accounts"),
+  isDisabled: true
+};
+Hover.args = {
+  label: "accounts",
+  onClick: (0, import_addon_actions.action)("go to accounts")
+};
+Hover.parameters = { pseudo: { hover: true } };
+Focus.args = {
+  label: "accounts",
+  onClick: (0, import_addon_actions.action)("go to accounts")
+};
+Focus.parameters = { pseudo: { focus: true } };
+//# sourceMappingURL=Item.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,28 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => import_Item.default
+});
+var import_Item = __toModule(require("./Item"));
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,55 @@
+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: () => 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"));
+const Container = import_styled_components.default.div`
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+`;
+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)));
+};
+var Logo_default = Logo;
+//# sourceMappingURL=Logo.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,28 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => import_Logo.default
+});
+var import_Logo = __toModule(require("./Logo"));
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,96 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => SideBar_default
+});
+var import_react = __toModule(require("react"));
+var import_react_transition_group = __toModule(require("react-transition-group"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_sideBar = __toModule(require("../../../navigation/sideBar"));
+var import_Flex = __toModule(require("../../../layout/Flex"));
+var import_Item = __toModule(require("../../../navigation/sideBar/Item"));
+var import_Logo = __toModule(require("../../../navigation/sideBar/Logo"));
+var import_Toggle = __toModule(require("../../../navigation/sideBar/Toggle"));
+const Nav = (0, import_styled_components.default)(import_Flex.default)`
+  position: relative;
+  padding: ${(p) => `${p.theme.space[19]}px ${p.theme.space[5]}px 0`};
+  row-gap: 1.5rem;
+  height: 100vh;
+  width: 14.875rem;
+  color: ${(props) => props.theme.colors.neutral.c100};
+  border-right: 1px solid ${(props) => props.theme.colors.neutral.c40};
+  background-color: ${(props) => props.theme.colors.background.main};
+  transition: width 200ms;
+  will-change: width;
+  flex-shrink: 0;
+  z-index: ${(p) => p.theme.zIndexes[2]};
+
+  &.nav-enter {
+    width: ${(p) => p.theme.space[19]}px;
+  }
+  &.nav-enter-done {
+    width: 14.875rem;
+  }
+  &.nav-exit {
+    width: 14.875rem;
+  }
+  &.nav-exit-done {
+    width: ${(p) => `${p.theme.space[19]}px`};
+  }
+`;
+const TransparentMouseZone = import_styled_components.default.div`
+  position: absolute;
+  left: 100%;
+  top: 0;
+  width: ${(p) => `${p.theme.space[8]}px`};
+  height: 100%;
+`;
+const SideBar = ({ children, onToggle, isExpanded = true }) => {
+  const [isToggleDisplayed, setToggleDisplayed] = (0, import_react.useState)(false);
+  const providerValue = (0, import_react.useMemo)(() => ({ isExpanded, onToggle }), [isExpanded, onToggle]);
+  return /* @__PURE__ */ import_react.default.createElement(import_sideBar.default.Provider, {
+    value: providerValue
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_transition_group.CSSTransition, {
+    in: isExpanded,
+    timeout: 200,
+    classNames: "nav"
+  }, /* @__PURE__ */ import_react.default.createElement(Nav, {
+    flexDirection: "column",
+    justifyContent: "flex-start",
+    alignContent: "stretch",
+    role: "navigation",
+    "aria-label": "Main",
+    onMouseEnter: () => setToggleDisplayed(true),
+    onMouseLeave: () => setToggleDisplayed(false)
+  }, /* @__PURE__ */ import_react.default.createElement(TransparentMouseZone, null), /* @__PURE__ */ import_react.default.createElement(import_Toggle.default, {
+    isDisplayed: isToggleDisplayed
+  }), /* @__PURE__ */ import_react.default.createElement(import_Logo.default, null), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flexDirection: "column",
+    justifyContent: "flex-start",
+    alignContent: "stretch"
+  }, children))));
+};
+SideBar.Item = import_Item.default;
+var SideBar_default = SideBar;
+//# sourceMappingURL=SideBar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/sideBar/SideBar/SideBar.tsx"],
+  "sourcesContent": ["import React, { useMemo, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\nimport SideBarContext from \"../../../navigation/sideBar\";\nimport Flex from \"../../../layout/Flex\";\nimport Item from \"../../../navigation/sideBar/Item\";\nimport Logo from \"../../../navigation/sideBar/Logo\";\nimport Toggle from \"../../../navigation/sideBar/Toggle\";\n\nconst Nav = styled(Flex)`\n  position: relative;\n  padding: ${(p) => `${p.theme.space[19]}px ${p.theme.space[5]}px 0`};\n  row-gap: 1.5rem;\n  height: 100vh;\n  width: 14.875rem;\n  color: ${(props) => props.theme.colors.neutral.c100};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral.c40};\n  background-color: ${(props) => props.theme.colors.background.main};\n  transition: width 200ms;\n  will-change: width;\n  flex-shrink: 0;\n  z-index: ${(p) => p.theme.zIndexes[2]};\n\n  &.nav-enter {\n    width: ${(p) => p.theme.space[19]}px;\n  }\n  &.nav-enter-done {\n    width: 14.875rem;\n  }\n  &.nav-exit {\n    width: 14.875rem;\n  }\n  &.nav-exit-done {\n    width: ${(p) => `${p.theme.space[19]}px`};\n  }\n`;\n\nconst TransparentMouseZone = styled.div`\n  position: absolute;\n  left: 100%;\n  top: 0;\n  width: ${(p) => `${p.theme.space[8]}px`};\n  height: 100%;\n`;\n\nexport type SideBarProps = {\n  children: Array<JSX.Element>;\n  onToggle: () => void;\n  isExpanded?: boolean;\n};\n\nconst SideBar = ({ children, onToggle, isExpanded = true }: SideBarProps): JSX.Element => {\n  const [isToggleDisplayed, setToggleDisplayed] = useState(false);\n  const providerValue = useMemo(() => ({ isExpanded, onToggle }), [isExpanded, onToggle]);\n\n  return (\n    <SideBarContext.Provider value={providerValue}>\n      <CSSTransition in={isExpanded} timeout={200} classNames=\"nav\">\n        <Nav\n          flexDirection=\"column\"\n          justifyContent=\"flex-start\"\n          alignContent=\"stretch\"\n          role=\"navigation\"\n          aria-label=\"Main\"\n          onMouseEnter={() => setToggleDisplayed(true)}\n          onMouseLeave={() => setToggleDisplayed(false)}\n        >\n          <TransparentMouseZone />\n          <Toggle isDisplayed={isToggleDisplayed} />\n          <Logo />\n          <Flex flexDirection=\"column\" justifyContent=\"flex-start\" alignContent=\"stretch\">\n            {children}\n          </Flex>\n        </Nav>\n      </CSSTransition>\n    </SideBarContext.Provider>\n  );\n};\n\nSideBar.Item = Item;\n\nexport default SideBar;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,oCAA8B;AAC9B,+BAAmB;AACnB,qBAA2B;AAC3B,kBAAiB;AACjB,kBAAiB;AACjB,kBAAiB;AACjB,oBAAmB;AAEnB,MAAM,MAAM,sCAAO;AAAA;AAAA,aAEN,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,SAAS,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,WAIjD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,4BACrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,sBAC5C,CAAC,UAAU,MAAM,MAAM,OAAO,WAAW;AAAA;AAAA;AAAA;AAAA,aAIlD,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAAA;AAAA,aAGxB,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASrB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,uBAAuB,iCAAO;AAAA;AAAA;AAAA;AAAA,WAIzB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAUnC,MAAM,UAAU,CAAC,EAAE,UAAU,UAAU,aAAa,WAAsC;AACxF,QAAM,CAAC,mBAAmB,sBAAsB,2BAAS;AACzD,QAAM,gBAAgB,0BAAQ,MAAO,GAAE,YAAY,aAAa,CAAC,YAAY;AAE7E,SACE,mDAAC,uBAAe,UAAhB;AAAA,IAAyB,OAAO;AAAA,KAC9B,mDAAC,6CAAD;AAAA,IAAe,IAAI;AAAA,IAAY,SAAS;AAAA,IAAK,YAAW;AAAA,KACtD,mDAAC,KAAD;AAAA,IACE,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,cAAa;AAAA,IACb,MAAK;AAAA,IACL,cAAW;AAAA,IACX,cAAc,MAAM,mBAAmB;AAAA,IACvC,cAAc,MAAM,mBAAmB;AAAA,KAEvC,mDAAC,sBAAD,OACA,mDAAC,uBAAD;AAAA,IAAQ,aAAa;AAAA,MACrB,mDAAC,qBAAD,OACA,mDAAC,qBAAD;AAAA,IAAM,eAAc;AAAA,IAAS,gBAAe;AAAA,IAAa,cAAa;AAAA,KACnE;AAAA;AAQb,QAAQ,OAAO;AAEf,IAAO,kBAAQ;",
+  "names": []
+}