@ledgerhq/react-ui 0.7.5 → 0.7.7-nightly.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Grid/Grid.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { grid, GridProps, color, ColorProps, space, SpaceProps } from \"styled-system\";\nimport Grid from \"./index\";\nimport Text from \"../../asorted/Text\";\n\n// Just a stylable div used as a base grid element for the purpose of this story.\nconst Cell = styled.div<ColorProps & SpaceProps & GridProps>`\n  // Make the div semi-opaque to show grid composition.\n  opacity: 0.7;\n  ${color}\n  ${space}\n  ${grid}\n`;\n\nexport default {\n  title: \"Layout/Grid\",\n  component: Grid,\n  argTypes: {\n    columns: {\n      type: \"number\",\n      description:\n        \"The number of columns set with a `repeat(N, minmax(0, 1fr))` pattern or `none` to disable.\",\n      table: {\n        category: \"Container\",\n        defaultValue: {\n          summary: 12,\n        },\n      },\n    },\n    rows: {\n      type: \"number\",\n      description:\n        \"The number of rows set with a `repeat(N, minmax(0, 1fr))` pattern or `none` to disable.\",\n      table: {\n        category: \"Container\",\n        defaultValue: {\n          summary: \"initial\",\n        },\n      },\n    },\n    gridTemplateColumns: {\n      type: \"string\",\n      description:\n        \"The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.\",\n      table: {\n        category: \"Container\",\n      },\n    },\n    gridTemplateRows: {\n      type: \"string\",\n      description:\n        \"The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.\",\n      table: {\n        category: \"Container\",\n      },\n    },\n    gridTemplateAreas: {\n      type: \"string\",\n      description:\n        \"The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.\",\n      table: {\n        category: \"Container\",\n      },\n    },\n    gridAutoColumns: {\n      type: \"string\",\n      description:\n        \"The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.\",\n      table: {\n        category: \"Container\",\n      },\n    },\n    gridAutoRows: {\n      type: \"string\",\n      description:\n        \"The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.\",\n      table: {\n        category: \"Container\",\n      },\n    },\n    gridAutoFlow: {\n      type: \"string\",\n      description:\n        \"The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.\",\n      options: [\"row\", \"column\", \"dense\", \"row dense\", \"column dense\"],\n      control: {\n        type: \"select\",\n      },\n      table: {\n        category: \"Container\",\n      },\n    },\n    gridGap: {\n      type: \"number\",\n      description:\n        \"The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.\",\n      table: {\n        category: \"Container\",\n      },\n    },\n    gridRowGap: {\n      type: \"number\",\n      description:\n        \"The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows.\",\n      table: {\n        category: \"Container\",\n      },\n    },\n    gridColumnGap: {\n      type: \"number\",\n      description:\n        \"The column-gap CSS property sets the size of the gap (gutter) between an element's columns.\",\n      table: {\n        category: \"Container\",\n      },\n    },\n    gridColumn: {\n      type: \"string\",\n      description:\n        \"The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.\",\n      table: {\n        category: \"Cell\",\n      },\n    },\n    gridRow: {\n      type: \"string\",\n      description:\n        \"The grid-row CSS shorthand property specifies a grid item\u2019s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.\",\n      table: {\n        category: \"Cell\",\n      },\n    },\n    gridArea: {\n      type: \"string\",\n      description:\n        \"The grid-area CSS shorthand property specifies a grid item\u2019s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.\",\n      table: {\n        category: \"Cell\",\n      },\n    },\n  },\n};\nconst cells = Array.from(\n  {\n    length: 47,\n  },\n  (_, i) => {\n    // Apply some span to showoff the grid system a bit.\n    const colSpan = i % 7 === 0 ? 4 : i % 5 === 0 ? 3 : i % 3 === 0 ? 2 : 0;\n    const rowSpan = i % 14 === 0 ? 2 : i % 6 === 0 ? 4 : 0;\n    return (\n      <Cell\n        key={i}\n        backgroundColor=\"aliceBlue\"\n        padding={1}\n        opacity={1}\n        gridColumn={colSpan > 0 ? `span ${colSpan}` : \"initial\"}\n        gridRow={colSpan > 0 ? `span ${rowSpan}` : \"initial\"}\n      >\n        {i + 2}\n        <div\n          style={{\n            fontSize: \"10px\",\n          }}\n        >\n          {colSpan > 0 ? `(column span ${colSpan})` : \"\"}\n        </div>\n        <div\n          style={{\n            fontSize: \"10px\",\n          }}\n        >\n          {rowSpan > 0 ? `(row span ${rowSpan})` : \"\"}\n        </div>\n      </Cell>\n    );\n  },\n);\n\n// eslint-disable-next-line\nconst DefaultTemplate = ({ gridColumn, gridRow, gridArea, ...args }: any) => {\n  return (\n    <>\n      <Text\n        style={{\n          marginBottom: \"1em\",\n        }}\n      >\n        A 12 columns grid using default props and containing cells with various span values.\n      </Text>\n      <Grid {...args}>\n        <Cell\n          key=\"-1\"\n          backgroundColor=\"aliceBlue\"\n          padding={1}\n          opacity={1}\n          gridColumn={gridColumn}\n          gridRow={gridRow}\n          gridArea={gridArea}\n        >\n          1\n        </Cell>\n        {cells}\n      </Grid>\n    </>\n  );\n};\n\nexport const Default = DefaultTemplate;\n// @ts-expect-error FIXME\nDefault.args = {\n  gridGap: 1,\n};\n\n// eslint-disable-next-line\nconst FixedTemplate = ({ gridColumn, gridRow, gridArea, ...args }: any) => (\n  <>\n    <Text\n      style={{\n        marginBottom: \"1em\",\n      }}\n    >\n      This example with fixed cells is taken from the{\" \"}\n      <a\n        href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout\"\n        style={{\n          cursor: \"pointer\",\n        }}\n      >\n        MDN\n      </a>{\" \"}\n      documentation.\n    </Text>\n    <Grid {...args}>\n      <>\n        <Cell\n          color=\"white\"\n          padding=\"2\"\n          gridColumn={gridColumn}\n          gridRow={gridRow}\n          gridArea={gridArea}\n          backgroundColor=\"red\"\n        >\n          Control me using {`\"Cell\"`} props.\n        </Cell>\n        <Cell gridColumn=\"2 / 4\" gridRow=\"1 / 3\" backgroundColor=\"blue\" />\n        <Cell gridColumn=\"1\" gridRow=\"2 / 5\" backgroundColor=\"green\" />\n        <Cell gridColumn=\"3\" gridRow=\"3\" backgroundColor=\"purple\" />\n        <Cell gridColumn=\"2\" gridRow=\"4\" backgroundColor=\"teal\" />\n        <Cell gridColumn=\"3\" gridRow=\"4\" backgroundColor=\"brown\" />\n      </>\n    </Grid>\n  </>\n);\n\nexport const Fixed = FixedTemplate;\n// @ts-expect-error FIXME\nFixed.args = {\n  columns: 3,\n  rows: undefined,\n  gridAutoRows: \"100px\",\n  gridGap: 1,\n  gridTemplateColumns: undefined,\n  gridTemplateRows: undefined,\n  gridTemplateAreas: undefined,\n  gridRowGap: undefined,\n  gridColumnGap: undefined,\n  gridColumn: \"1/3\",\n  gridRow: \"1\",\n  gridArea: undefined,\n  gridAutoFlow: undefined,\n  gridAutoColumns: undefined,\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,44 @@
+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: () => Grid_default
+});
+var import_styled_system = __toModule(require("styled-system"));
+var import_styled = __toModule(require("../../styled"));
+function getColumns(props) {
+  const { columns } = props;
+  return columns === "none" ? columns : `repeat(${columns || 12}, minmax(0, 1fr));`;
+}
+function getRows(props) {
+  const { rows } = props;
+  return !rows ? "initial" : rows === "none" ? rows : `repeat(${rows}, minmax(0, 1fr));`;
+}
+const Grid = import_styled.default.div`
+  display: grid;
+  grid-template-columns: ${getColumns};
+  grid-template-rows: ${getRows};
+  ${import_styled_system.grid};
+`;
+var Grid_default = Grid;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Grid/index.ts"],
+  "sourcesContent": ["import { grid, GridProps } from \"styled-system\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport interface Props extends GridProps, BaseStyledProps {\n  columns?: number | string;\n  rows?: number | string;\n}\n\nfunction getColumns(props: Props) {\n  const { columns } = props;\n  return columns === \"none\" ? columns : `repeat(${columns || 12}, minmax(0, 1fr));`;\n}\n\nfunction getRows(props: Props) {\n  const { rows } = props;\n  return !rows ? \"initial\" : rows === \"none\" ? rows : `repeat(${rows}, minmax(0, 1fr));`;\n}\n\nconst Grid = baseStyled.div<Props>`\n  display: grid;\n  grid-template-columns: ${getColumns};\n  grid-template-rows: ${getRows};\n  ${grid};\n`;\nexport default Grid;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,2BAAgC;AAChC,oBAA4C;AAO5C,oBAAoB,OAAc;AAChC,QAAM,EAAE,YAAY;AACpB,SAAO,YAAY,SAAS,UAAU,UAAU,WAAW;AAAA;AAG7D,iBAAiB,OAAc;AAC7B,QAAM,EAAE,SAAS;AACjB,SAAO,CAAC,OAAO,YAAY,SAAS,SAAS,OAAO,UAAU;AAAA;AAGhE,MAAM,OAAO,sBAAW;AAAA;AAAA,2BAEG;AAAA,wBACH;AAAA,IACpB;AAAA;AAEJ,IAAO,eAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,205 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  Default: () => Default,
+  default: () => Popin_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_client_api = __toModule(require("@storybook/client-api"));
+var import_addon_actions = __toModule(require("@storybook/addon-actions"));
+var import_index = __toModule(require("./index"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_Button = __toModule(require("../../cta/Button"));
+var import_theme = __toModule(require("../../../styles/theme"));
+const description = `
+### This is a customizable pop-in component.
+
+The component exports by default the container that defines how the component should be animated during the mount/unmount process.<br />
+In addition to that, 3 different sections *(header, body and footer)* of the component are already designed and attached to the Popin default component.<br />
+
+## Usage
+
+\`\`\`js
+
+import { Popin } from "@ledgerhq/react-ui"
+
+\`\`\`
+
+From the default Popin component, you can access 3 different pre-styled sections *(\`Popin.Header\`, \`Popin.Body\` and \`Popin.Footer\`)*. All of these components are optional.
+
+- \`Popin.Header\` is accepting an onClose callback. The cross icon is only rendered if the onClose callback is provided
+- \`Popin.Body\` is just a customizable scrollable Flex component configured to take all the available space
+- \`Popin.Footer\` is a customizable Flex component
+
+## Sandbox
+
+Placement, style and content can be customized using props as demonstrated in the following example.<br />
+Additionally, the story provide some playground options to play with the component. These options aren't props of the component itself.
+`;
+const code = `
+<Popin isOpen={isOpen}>
+  <Popin.Header onClose={onBack} onClose={onBack}><Text variant="h5">A title</Text></Popin.Header>
+  <Popin.Body><Text variant="paragraph">Some texts here</Text></Popin.Body>
+  <Popin.Footer>
+    <Button type="main" onClick={onClick}>
+      Next
+    </Button>
+  </Popin.Footer>
+</Popin>
+`;
+var Popin_stories_default = {
+  title: "Layout/Popin",
+  component: import_index.default,
+  parameters: {
+    docs: {
+      description: { component: description },
+      source: { code, type: "code" }
+    }
+  },
+  argTypes: {
+    width: {
+      type: "number",
+      description: "Optional popin's width",
+      defaultValue: import_theme.default.sizes.drawer.popin.max.width,
+      control: {
+        type: "number",
+        min: import_theme.default.sizes.drawer.popin.min.width,
+        max: import_theme.default.sizes.drawer.popin.max.width
+      },
+      table: {
+        type: {
+          summary: "Accepted range",
+          detail: `Value lower than ${import_theme.default.sizes.drawer.popin.min.width}px or greather than ${import_theme.default.sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`
+        },
+        defaultValue: {
+          summary: import_theme.default.sizes.drawer.popin.min.width
+        }
+      }
+    },
+    height: {
+      type: "number",
+      description: "Optional popin's height",
+      defaultValue: import_theme.default.sizes.drawer.popin.max.width,
+      control: {
+        type: "number",
+        min: import_theme.default.sizes.drawer.popin.min.height,
+        max: import_theme.default.sizes.drawer.popin.max.height
+      },
+      table: {
+        type: {
+          summary: "Accepted range",
+          detail: `Value lower than ${import_theme.default.sizes.drawer.popin.min.height}px or greather than ${import_theme.default.sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`
+        },
+        defaultValue: {
+          summary: import_theme.default.sizes.drawer.popin.min.height
+        }
+      }
+    },
+    isOpen: {
+      type: "boolean",
+      defaultValue: true,
+      description: "Controls if the popin is mounted or not.",
+      required: true,
+      control: { type: "boolean" }
+    },
+    onClose: {
+      description: "Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.",
+      control: false
+    },
+    hasHeader: {
+      type: "boolean",
+      value: true,
+      description: "Controls if the header should be displayed.",
+      required: true,
+      defaultValue: true,
+      control: { type: "boolean" },
+      table: { category: "playground" }
+    },
+    hasFooter: {
+      type: "boolean",
+      value: true,
+      description: "Controls if the footer should be displayed.",
+      required: true,
+      defaultValue: true,
+      control: { type: "boolean" },
+      table: { category: "playground" }
+    },
+    isCloseDisplayed: {
+      type: "boolean",
+      defaultValue: true,
+      description: "Controls if the close button should be rendered.",
+      required: true,
+      control: { type: "boolean" },
+      table: { category: "playground" }
+    },
+    isBackDisplayed: {
+      type: "boolean",
+      defaultValue: true,
+      description: "Controls if the back button should be rendered.",
+      required: true,
+      control: { type: "boolean" },
+      table: { category: "playground" }
+    },
+    "Header.Children.Text": {
+      type: "text",
+      description: "Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.",
+      required: true,
+      defaultValue: "This is a fake title",
+      control: { type: "text" },
+      table: { category: "playground" }
+    },
+    "Body.Children.Text": {
+      type: "text",
+      description: "Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.",
+      required: true,
+      defaultValue: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,
+      control: { type: "text" },
+      table: { category: "playground" }
+    }
+  }
+};
+const Template = (args) => {
+  const [, updateArgs] = (0, import_client_api.useArgs)();
+  const onClose = () => updateArgs({ isOpen: false });
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+    variant: "shade",
+    onClick: () => updateArgs({ isOpen: true })
+  }, "Open the modal"), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args
+  }, args.hasHeader ? /* @__PURE__ */ import_react.default.createElement(import_index.default.Header, {
+    onBack: args.isBackDisplayed ? (0, import_addon_actions.action)("previous") : void 0,
+    onClose: args.isCloseDisplayed ? onClose : void 0
+  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "h5"
+  }, args["Header.Children.Text"])) : null, /* @__PURE__ */ import_react.default.createElement(import_index.default.Body, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "paragraph"
+  }, args["Body.Children.Text"])), args.hasFooter ? /* @__PURE__ */ import_react.default.createElement(import_index.default.Footer, {
+    flexDirection: "row-reverse"
+  }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+    variant: "main",
+    onClick: (0, import_addon_actions.action)("next")
+  }, "Next")) : null));
+};
+const Default = Template.bind({});
+//# sourceMappingURL=Popin.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Popin/Popin.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\nimport { action } from \"@storybook/addon-actions\";\n\nimport Popin, { PopinProps } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\nimport theme from \"../../../styles/theme\";\n\nconst description = `\n### This is a customizable pop-in component.\n\nThe component exports by default the container that defines how the component should be animated during the mount/unmount process.<br />\nIn addition to that, 3 different sections *(header, body and footer)* of the component are already designed and attached to the Popin default component.<br />\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Popin } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nFrom the default Popin component, you can access 3 different pre-styled sections *(\\`Popin.Header\\`, \\`Popin.Body\\` and \\`Popin.Footer\\`)*. \\\nAll of these components are optional.\n\n- \\`Popin.Header\\` is accepting an onClose callback. The cross icon is only rendered if the onClose callback is provided\n- \\`Popin.Body\\` is just a customizable scrollable Flex component configured to take all the available space\n- \\`Popin.Footer\\` is a customizable Flex component\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.<br />\nAdditionally, the story provide some playground options to play with the component. These options aren't \\\nprops of the component itself.\n`;\n\nconst code = `\n<Popin isOpen={isOpen}>\n  <Popin.Header onClose={onBack} onClose={onBack}><Text variant=\"h5\">A title</Text></Popin.Header>\n  <Popin.Body><Text variant=\"paragraph\">Some texts here</Text></Popin.Body>\n  <Popin.Footer>\n    <Button type=\"main\" onClick={onClick}>\n      Next\n    </Button>\n  </Popin.Footer>\n</Popin>\n`;\n\nexport default {\n  title: \"Layout/Popin\",\n  component: Popin,\n  parameters: {\n    docs: {\n      description: { component: description },\n      source: { code, type: \"code\" },\n    },\n  },\n  argTypes: {\n    /** PROPS **/\n    width: {\n      type: \"number\",\n      description: \"Optional popin's width\",\n      defaultValue: theme.sizes.drawer.popin.max.width,\n      control: {\n        type: \"number\",\n        min: theme.sizes.drawer.popin.min.width,\n        max: theme.sizes.drawer.popin.max.width,\n      },\n      table: {\n        type: {\n          summary: \"Accepted range\",\n          detail: `Value lower than ${theme.sizes.drawer.popin.min.width}px or greather than ${theme.sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`,\n        },\n        defaultValue: {\n          summary: theme.sizes.drawer.popin.min.width,\n        },\n      },\n    },\n    height: {\n      type: \"number\",\n      description: \"Optional popin's height\",\n      defaultValue: theme.sizes.drawer.popin.max.width,\n      control: {\n        type: \"number\",\n        min: theme.sizes.drawer.popin.min.height,\n        max: theme.sizes.drawer.popin.max.height,\n      },\n      table: {\n        type: {\n          summary: \"Accepted range\",\n          detail: `Value lower than ${theme.sizes.drawer.popin.min.height}px or greather than ${theme.sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`,\n        },\n        defaultValue: {\n          summary: theme.sizes.drawer.popin.min.height,\n        },\n      },\n    },\n    isOpen: {\n      type: \"boolean\",\n      defaultValue: true,\n      description: \"Controls if the popin is mounted or not.\",\n      required: true,\n      control: { type: \"boolean\" },\n    },\n    onClose: {\n      description:\n        \"Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.\",\n      control: false,\n    },\n\n    /** playground **/\n    hasHeader: {\n      type: \"boolean\",\n      value: true,\n      description: \"Controls if the header should be displayed.\",\n      required: true,\n      defaultValue: true,\n      control: { type: \"boolean\" },\n      table: { category: \"playground\" },\n    },\n    hasFooter: {\n      type: \"boolean\",\n      value: true,\n      description: \"Controls if the footer should be displayed.\",\n      required: true,\n      defaultValue: true,\n      control: { type: \"boolean\" },\n      table: { category: \"playground\" },\n    },\n    isCloseDisplayed: {\n      type: \"boolean\",\n      defaultValue: true,\n      description: \"Controls if the close button should be rendered.\",\n      required: true,\n      control: { type: \"boolean\" },\n      table: { category: \"playground\" },\n    },\n    isBackDisplayed: {\n      type: \"boolean\",\n      defaultValue: true,\n      description: \"Controls if the back button should be rendered.\",\n      required: true,\n      control: { type: \"boolean\" },\n      table: { category: \"playground\" },\n    },\n    \"Header.Children.Text\": {\n      type: \"text\",\n      description:\n        \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.\",\n      required: true,\n      defaultValue: \"This is a fake title\",\n      control: { type: \"text\" },\n      table: { category: \"playground\" },\n    },\n    \"Body.Children.Text\": {\n      type: \"text\",\n      description:\n        \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.\",\n      required: true,\n      defaultValue: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,\n      control: { type: \"text\" },\n      table: { category: \"playground\" },\n    },\n  },\n};\n\ntype playgroundProps = {\n  \"Header.Children.Text\": string;\n  \"Body.Children.Text\": string;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  isCloseDisplayed: boolean;\n  isBackDisplayed: boolean;\n};\n\nconst Template = (args: PopinProps & playgroundProps) => {\n  const [, updateArgs] = useArgs();\n\n  /* Allow interactive controls from the story. Thanks to this, triggering onClose\n   ** function from the component itself (by clicking on the cross icon e.g.)\n   ** will update the value of the isOpen props.\n   */\n  const onClose = () => updateArgs({ isOpen: false });\n\n  return (\n    <>\n      <Button variant=\"shade\" onClick={() => updateArgs({ isOpen: true })}>\n        Open the modal\n      </Button>\n      <Popin {...args}>\n        {args.hasHeader ? (\n          <Popin.Header\n            onBack={args.isBackDisplayed ? action(\"previous\") : undefined}\n            onClose={args.isCloseDisplayed ? onClose : undefined}\n          >\n            <Text variant=\"h5\">{args[\"Header.Children.Text\"]}</Text>\n          </Popin.Header>\n        ) : null}\n        <Popin.Body>\n          <Text variant=\"paragraph\">{args[\"Body.Children.Text\"]}</Text>\n        </Popin.Body>\n        {args.hasFooter ? (\n          <Popin.Footer flexDirection=\"row-reverse\">\n            <Button variant=\"main\" onClick={action(\"next\")}>\n              Next\n            </Button>\n          </Popin.Footer>\n        ) : null}\n      </Popin>\n    </>\n  );\n};\n\nexport const Default = Template.bind({});\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,129 @@
+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: () => Popin_default
+});
+var import_react = __toModule(require("react"));
+var import_react_dom = __toModule(require("react-dom"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_CloseRegular = __toModule(require("@ledgerhq/icons-ui/react/CloseRegular"));
+var import_ArrowLeftRegular = __toModule(require("@ledgerhq/icons-ui/react/ArrowLeftRegular"));
+var import_styled = __toModule(require("../../styled"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_Button = __toModule(require("../../cta/Button"));
+var import_TransitionInOut = __toModule(require("../../transitions/TransitionInOut"));
+var import_TransitionScale = __toModule(require("../../transitions/TransitionScale"));
+const ICON_SIZE = 20;
+const Wrapper = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
+  flexDirection: "column",
+  alignItems: "stretch",
+  justifyContent: "space-between",
+  height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,
+  width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,
+  minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,
+  minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,
+  maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,
+  maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,
+  zIndex: p.theme.zIndexes[8],
+  p: p.p !== void 0 ? p.p : p.theme.space[10],
+  rowGap: 6,
+  backgroundColor: p.theme.colors.neutral.c00
+}))``;
+const Overlay = (0, import_styled_components.default)(import_Flex.default).attrs((p) => ({
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100vw",
+  height: "100vh",
+  zIndex: p.theme.zIndexes[8],
+  position: "fixed",
+  top: 0,
+  left: 0,
+  backgroundColor: p.theme.colors.neutral.c100a07
+}))``;
+const Header = import_styled.default.section`
+  display: grid;
+  grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;
+  column-gap: 12px;
+`;
+const HeaderTitleContainer = (0, import_styled_components.default)(import_Flex.default).attrs(() => ({
+  justifyContent: "center"
+}))``;
+const PopinBody = (0, import_styled.default)(import_Flex.default).attrs({
+  as: "section",
+  flexDirection: "column",
+  flex: 1,
+  overflow: "auto"
+})``;
+const PopinFooter = (0, import_styled.default)(import_Flex.default).attrs({ as: "section" })``;
+const IconContainer = (0, import_styled_components.default)(import_Button.default.Unstyled)`
+  display: flex;
+  align-items: center;
+`;
+const PopinHeader = ({ children, onClose, onBack, ...props }) => /* @__PURE__ */ import_react.default.createElement(Header, {
+  ...props
+}, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, null, onBack ? /* @__PURE__ */ import_react.default.createElement(IconContainer, {
+  onClick: onBack
+}, /* @__PURE__ */ import_react.default.createElement(import_ArrowLeftRegular.default, {
+  size: ICON_SIZE,
+  color: "neutral.c100"
+})) : null), /* @__PURE__ */ import_react.default.createElement(HeaderTitleContainer, null, children), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, null, onClose ? /* @__PURE__ */ import_react.default.createElement(IconContainer, {
+  onClick: onClose
+}, /* @__PURE__ */ import_react.default.createElement(import_CloseRegular.default, {
+  size: ICON_SIZE,
+  color: "neutral.c100"
+})) : null));
+const Popin = ({ isOpen, children, width, height, ...props }) => /* @__PURE__ */ import_react.default.createElement(import_TransitionInOut.default, {
+  in: isOpen,
+  appear: true,
+  mountOnEnter: true,
+  unmountOnExit: true
+}, /* @__PURE__ */ import_react.default.createElement(Overlay, null, /* @__PURE__ */ import_react.default.createElement(import_TransitionScale.default, {
+  in: isOpen,
+  appear: true
+}, /* @__PURE__ */ import_react.default.createElement(Wrapper, {
+  width,
+  height,
+  ...props
+}, children))));
+const PopinWrapper = ({
+  children,
+  menuPortalTarget,
+  ...popinProps
+}) => {
+  const $root = import_react.default.useMemo(() => menuPortalTarget === void 0 && typeof document !== void 0 ? document.querySelector("body") : menuPortalTarget, [menuPortalTarget]);
+  if (!$root) {
+    return /* @__PURE__ */ import_react.default.createElement(Popin, {
+      ...popinProps
+    }, children);
+  } else {
+    return import_react_dom.default.createPortal(/* @__PURE__ */ import_react.default.createElement(Popin, {
+      ...popinProps
+    }, children), $root);
+  }
+};
+PopinWrapper.Header = PopinHeader;
+PopinWrapper.Body = PopinBody;
+PopinWrapper.Footer = PopinFooter;
+var Popin_default = PopinWrapper;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Popin/index.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport CloseIcon from \"@ledgerhq/icons-ui/react/CloseRegular\";\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftRegular\";\n\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport Flex from \"../../layout/Flex\";\nimport type { FlexBoxProps } from \"../../layout/Flex\";\nimport Button from \"../../cta/Button\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport TransitionScale from \"../../transitions/TransitionScale\";\n\nexport interface PopinProps extends BaseStyledProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  menuPortalTarget?: Element | null;\n}\n\nexport type PopinHeaderProps = BaseStyledProps & {\n  onClose?: () => void;\n  onBack?: () => void;\n  children: React.ReactNode;\n};\n\nconst ICON_SIZE = 20;\n\nconst Wrapper = styled(Flex).attrs<FlexBoxProps>((p) => ({\n  flexDirection: \"column\",\n  alignItems: \"stretch\",\n  justifyContent: \"space-between\",\n  height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,\n  width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,\n  minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,\n  minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,\n  maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,\n  maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,\n  zIndex: p.theme.zIndexes[8],\n  p: p.p !== undefined ? p.p : p.theme.space[10],\n  rowGap: 6,\n  backgroundColor: p.theme.colors.neutral.c00,\n}))``;\n\nconst Overlay = styled(Flex).attrs((p) => ({\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  width: \"100vw\",\n  height: \"100vh\",\n  zIndex: p.theme.zIndexes[8],\n  position: \"fixed\",\n  top: 0,\n  left: 0,\n  backgroundColor: p.theme.colors.neutral.c100a07,\n}))``;\n\nconst Header = baseStyled.section`\n  display: grid;\n  grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;\n  column-gap: 12px;\n`;\n\nconst HeaderTitleContainer = styled(Flex).attrs(() => ({\n  justifyContent: \"center\",\n}))``;\n\nconst PopinBody = baseStyled(Flex).attrs({\n  as: \"section\",\n  flexDirection: \"column\",\n  flex: 1,\n  overflow: \"auto\",\n})``;\n\nconst PopinFooter = baseStyled(Flex).attrs({ as: \"section\" })``;\n\nconst IconContainer = styled(Button.Unstyled)`\n  display: flex;\n  align-items: center;\n`;\n\nconst PopinHeader = ({ children, onClose, onBack, ...props }: PopinHeaderProps) => (\n  <Header {...props}>\n    <Flex>\n      {onBack ? (\n        <IconContainer onClick={onBack}>\n          <ArrowLeftIcon size={ICON_SIZE} color=\"neutral.c100\" />\n        </IconContainer>\n      ) : null}\n    </Flex>\n    <HeaderTitleContainer>{children}</HeaderTitleContainer>\n    <Flex>\n      {onClose ? (\n        <IconContainer onClick={onClose}>\n          <CloseIcon size={ICON_SIZE} color=\"neutral.c100\" />\n        </IconContainer>\n      ) : null}\n    </Flex>\n  </Header>\n);\n\nconst Popin = ({ isOpen, children, width, height, ...props }: PopinProps) => (\n  <TransitionInOut in={isOpen} appear mountOnEnter unmountOnExit>\n    <Overlay>\n      <TransitionScale in={isOpen} appear>\n        <Wrapper width={width} height={height} {...props}>\n          {children}\n        </Wrapper>\n      </TransitionScale>\n    </Overlay>\n  </TransitionInOut>\n);\n\nconst PopinWrapper = ({\n  children,\n  menuPortalTarget,\n  ...popinProps\n}: PopinProps): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return <Popin {...popinProps}>{children}</Popin>;\n  } else {\n    return ReactDOM.createPortal(<Popin {...popinProps}>{children}</Popin>, $root);\n  }\n};\n\nPopinWrapper.Header = PopinHeader;\nPopinWrapper.Body = PopinBody;\nPopinWrapper.Footer = PopinFooter;\n\nexport default PopinWrapper;\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,68 @@
+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, {
+  context: () => context,
+  default: () => Provider_default,
+  setSide: () => setSide,
+  useSide: () => useSide
+});
+var import_react = __toModule(require("react"));
+let setSide = () => {
+};
+const reducer = (state, update) => {
+  return { ...state, ...update };
+};
+const initialState = {
+  Component: null,
+  open: false
+};
+const context = import_react.default.createContext({
+  state: initialState,
+  setSide: () => {
+  }
+});
+const useSide = () => {
+  return (0, import_react.useContext)(context);
+};
+const SideProvider = ({ children }) => {
+  const [state, dispatch] = (0, import_react.useReducer)(reducer, initialState);
+  const _setSide = (0, import_react.useCallback)((Component, props) => {
+    dispatch({
+      Component,
+      props,
+      open: !!Component
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    setSide = _setSide;
+  }, [_setSide]);
+  return /* @__PURE__ */ import_react.default.createElement(context.Provider, {
+    value: {
+      state,
+      setSide: _setSide
+    }
+  }, children);
+};
+var Provider_default = SideProvider;
+//# sourceMappingURL=Provider.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Side/Provider.tsx"],
+  "sourcesContent": ["import React, { useReducer, useEffect, useCallback, useContext } from \"react\";\nimport type { SideProps } from \".\";\n\ninterface State<P extends SideProps = SideProps> {\n  Component: React.ComponentType<P> | null | undefined;\n  props?: P;\n  open: boolean;\n}\n// actions\n// it makes them available and current from connector events handlers\nexport let setSide: <P extends SideProps = SideProps>(\n  Component?: State<P>[\"Component\"],\n  props?: State<P>[\"props\"],\n) => void = () => {};\n\n// reducer\nconst reducer = <P extends SideProps = SideProps>(state: State<P>, update: State<P>) => {\n  return { ...state, ...update };\n};\n\nconst initialState: State = {\n  Component: null,\n  open: false,\n};\n\ninterface ContextValue<P extends SideProps = SideProps> {\n  state: State<P>;\n  setSide: (Component?: React.ComponentType<P>, props?: P) => void;\n}\n\nexport const context = React.createContext<ContextValue>({\n  state: initialState,\n  setSide: () => {},\n});\n\nexport const useSide = (): ContextValue => {\n  return useContext(context);\n};\n\nconst SideProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  const _setSide = useCallback((Component, props) => {\n    dispatch({\n      Component,\n      props,\n      open: !!Component,\n    });\n  }, []);\n\n  useEffect(() => {\n    setSide = _setSide;\n  }, [_setSide]);\n\n  return (\n    <context.Provider\n      value={{\n        state,\n        setSide: _setSide,\n      }}\n    >\n      {children}\n    </context.Provider>\n  );\n};\n\nexport default SideProvider;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsE;AAU/D,IAAI,UAGC,MAAM;AAAA;AAGlB,MAAM,UAAU,CAAkC,OAAiB,WAAqB;AACtF,SAAO,KAAK,UAAU;AAAA;AAGxB,MAAM,eAAsB;AAAA,EAC1B,WAAW;AAAA,EACX,MAAM;AAAA;AAQD,MAAM,UAAU,qBAAM,cAA4B;AAAA,EACvD,OAAO;AAAA,EACP,SAAS,MAAM;AAAA;AAAA;AAGV,MAAM,UAAU,MAAoB;AACzC,SAAO,6BAAW;AAAA;AAGpB,MAAM,eAAe,CAAC,EAAE,eAA2D;AACjF,QAAM,CAAC,OAAO,YAAY,6BAAW,SAAS;AAE9C,QAAM,WAAW,8BAAY,CAAC,WAAW,UAAU;AACjD,aAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA,MAAM,CAAC,CAAC;AAAA;AAAA,KAET;AAEH,8BAAU,MAAM;AACd,cAAU;AAAA,KACT,CAAC;AAEJ,SACE,mDAAC,QAAQ,UAAT;AAAA,IACE,OAAO;AAAA,MACL;AAAA,MACA,SAAS;AAAA;AAAA,KAGV;AAAA;AAKP,IAAO,mBAAQ;",
+  "names": []
+}