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

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

@@ -0,0 +1,328 @@
+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: () => Flex_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var Flex_stories_default = {
+  title: "Layout/Flex",
+  component: import_index.default,
+  argTypes: {
+    children: {
+      type: "text",
+      description: "Any valid React node",
+      required: true,
+      control: false
+    },
+    alignItems: {
+      type: "text",
+      description: "This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).",
+      required: false,
+      options: [
+        "stretch",
+        "flex-start",
+        "flex-end",
+        "center",
+        "baseline",
+        "first baseline",
+        "last baseline",
+        "start",
+        "end",
+        "self-start",
+        "self-end",
+        "safe center",
+        "unsafe center"
+      ],
+      control: {
+        type: "select"
+      },
+      table: {
+        category: "Parent",
+        subcategory: "cross-axis"
+      }
+    },
+    flexDirection: {
+      type: "text",
+      description: "This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Think of flex items as primarily laying out either in horizontal rows or vertical columns.",
+      required: false,
+      options: ["row", "row-reverse", "column", "column-reverse"],
+      control: {
+        type: "select"
+      },
+      table: {
+        category: "Parent",
+        subcategory: "main-axis"
+      }
+    },
+    justifyItems: {
+      type: "text",
+      description: "This defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.",
+      required: false,
+      options: [
+        "flex-start",
+        "flex-end",
+        "center",
+        "space-between",
+        "space-around",
+        "space-evenly",
+        "stretch",
+        "start",
+        "end",
+        "baseline",
+        "first baseline",
+        "last baseline",
+        "safe center",
+        "unsafe center"
+      ],
+      control: {
+        type: "select"
+      },
+      table: {
+        category: "Parent"
+      }
+    },
+    justifyContent: {
+      type: "text",
+      description: "This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.",
+      required: false,
+      options: [
+        "flex-start",
+        "flex-end",
+        "center",
+        "space-between",
+        "space-around",
+        "space-evenly",
+        "stretch",
+        "start",
+        "end",
+        "left",
+        "right",
+        "safe center",
+        "unsafe center"
+      ],
+      control: {
+        type: "select"
+      },
+      table: {
+        category: "Parent",
+        subcategory: "main-axis"
+      }
+    },
+    flexWrap: {
+      type: "text",
+      description: "By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.",
+      required: false,
+      options: ["nowrap", "wrap", "wrap-reverse"],
+      control: {
+        type: "select"
+      },
+      table: {
+        category: "Parent"
+      }
+    },
+    flex: {
+      type: "text",
+      description: "This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it\u2019s like 1 0.",
+      required: false,
+      control: {
+        type: "text"
+      },
+      table: {
+        category: "Children"
+      }
+    },
+    flexGrow: {
+      type: "text",
+      description: "This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.",
+      required: false,
+      control: {
+        type: "number"
+      },
+      table: {
+        category: "Children"
+      }
+    },
+    flexShrink: {
+      type: "text",
+      description: "This defines the ability for a flex item to shrink if necessary.",
+      required: false,
+      control: {
+        type: "number"
+      },
+      table: {
+        category: "Children"
+      }
+    },
+    flexBasis: {
+      type: "text",
+      description: "This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means \u201Clook at my width or height property\u201D (which was temporarily done by the main-size keyword until deprecated).",
+      required: false,
+      control: {
+        type: "number"
+      },
+      table: {
+        category: "Children"
+      }
+    },
+    justifySelf: {
+      type: "text",
+      description: "This  sets the way a box is justified inside its alignment container along the appropriate axis.",
+      required: false,
+      options: [
+        "flex-start",
+        "flex-end",
+        "center",
+        "space-between",
+        "space-around",
+        "space-evenly",
+        "stretch",
+        "start",
+        "end",
+        "baseline",
+        "first baseline",
+        "last baseline",
+        "safe center",
+        "unsafe center"
+      ],
+      control: {
+        type: "select"
+      },
+      table: {
+        category: "Children"
+      }
+    },
+    alignContent: {
+      type: "text",
+      description: "This aligns a flex container\u2019s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.",
+      required: false,
+      options: [
+        "flex-start",
+        "flex-end",
+        "center",
+        "space-between",
+        "space-around",
+        "space-evenly",
+        "stretch",
+        "start",
+        "end",
+        "baseline",
+        "first baseline",
+        "last baseline",
+        "safe center",
+        "unsafe center"
+      ],
+      control: {
+        type: "select"
+      },
+      table: {
+        category: "Parent",
+        subcategory: "cross-axis"
+      }
+    },
+    alignSelf: {
+      type: "text",
+      description: "This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.",
+      required: false,
+      options: [
+        "flex-start",
+        "flex-end",
+        "center",
+        "space-between",
+        "space-around",
+        "space-evenly",
+        "stretch",
+        "start",
+        "end",
+        "baseline",
+        "first baseline",
+        "last baseline",
+        "safe center",
+        "unsafe center"
+      ],
+      control: {
+        type: "select"
+      },
+      table: {
+        category: "Children"
+      }
+    },
+    order: {
+      type: "text",
+      description: "By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.",
+      required: false,
+      control: {
+        type: "number"
+      },
+      table: {
+        category: "Children"
+      }
+    },
+    rowGap: {
+      type: "text",
+      description: "The row-gap CSS property sets the size of the gap (gutter) between an element's flex rows.",
+      required: false,
+      control: { type: "text" },
+      table: { category: "Parent" }
+    },
+    columnGap: {
+      type: "text",
+      description: "The column-gap CSS property sets the size of the gap (gutter) between an element's flex columns.",
+      required: false,
+      control: { type: "text" },
+      table: { category: "Parent" }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `The Flex component is a flexbox helper component that lets you write these common css properties more succinctly and inline.
+      
+Like the Box component, it includes all the style props exported by the color, layout, position, and shadow utilities from the [styled-system](https://styled-system.com) library, but also fully includes the flexbox ones.
+      
+[See more about styled-system utilities](https://styled-system.com/api)`
+      }
+    }
+  }
+};
+const Template = (args) => /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+  ...args
+}, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+  ...args,
+  width: "25vw",
+  height: "25vw",
+  color: "white",
+  backgroundColor: "darkslategray"
+}, "Control me with flex children props"), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+  width: "25vw",
+  height: "25vw",
+  backgroundColor: "lightslategray"
+}), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+  width: "25vw",
+  height: "25vw",
+  backgroundColor: "darkgray"
+}));
+const Default = Template.bind({});
+//# sourceMappingURL=Flex.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Flex/Flex.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport Flex, { FlexBoxProps } from \"./index\";\n\nexport default {\n  title: \"Layout/Flex\",\n  component: Flex,\n  argTypes: {\n    children: {\n      type: \"text\",\n      description: \"Any valid React node\",\n      required: true,\n      control: false,\n    },\n    alignItems: {\n      type: \"text\",\n      description:\n        \"This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).\",\n      required: false,\n      options: [\n        \"stretch\",\n        \"flex-start\",\n        \"flex-end\",\n        \"center\",\n        \"baseline\",\n        \"first baseline\",\n        \"last baseline\",\n        \"start\",\n        \"end\",\n        \"self-start\",\n        \"self-end\",\n        \"safe center\",\n        \"unsafe center\",\n      ],\n      control: {\n        type: \"select\",\n      },\n      table: {\n        category: \"Parent\",\n        subcategory: \"cross-axis\",\n      },\n    },\n    flexDirection: {\n      type: \"text\",\n      description:\n        \"This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Think of flex items as primarily laying out either in horizontal rows or vertical columns.\",\n      required: false,\n      options: [\"row\", \"row-reverse\", \"column\", \"column-reverse\"],\n      control: {\n        type: \"select\",\n      },\n      table: {\n        category: \"Parent\",\n        subcategory: \"main-axis\",\n      },\n    },\n    justifyItems: {\n      type: \"text\",\n      description:\n        \"This defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\",\n      required: false,\n      options: [\n        \"flex-start\",\n        \"flex-end\",\n        \"center\",\n        \"space-between\",\n        \"space-around\",\n        \"space-evenly\",\n        \"stretch\",\n        \"start\",\n        \"end\",\n        \"baseline\",\n        \"first baseline\",\n        \"last baseline\",\n        \"safe center\",\n        \"unsafe center\",\n      ],\n      control: {\n        type: \"select\",\n      },\n      table: {\n        category: \"Parent\",\n      },\n    },\n    justifyContent: {\n      type: \"text\",\n      description:\n        \"This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.\",\n      required: false,\n      options: [\n        \"flex-start\",\n        \"flex-end\",\n        \"center\",\n        \"space-between\",\n        \"space-around\",\n        \"space-evenly\",\n        \"stretch\",\n        \"start\",\n        \"end\",\n        \"left\",\n        \"right\",\n        \"safe center\",\n        \"unsafe center\",\n      ],\n      control: {\n        type: \"select\",\n      },\n      table: {\n        category: \"Parent\",\n        subcategory: \"main-axis\",\n      },\n    },\n    flexWrap: {\n      type: \"text\",\n      description:\n        \"By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.\",\n      required: false,\n      options: [\"nowrap\", \"wrap\", \"wrap-reverse\"],\n      control: {\n        type: \"select\",\n      },\n      table: {\n        category: \"Parent\",\n      },\n    },\n    flex: {\n      type: \"text\",\n      description:\n        \"This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it\u2019s like 1 0.\",\n      required: false,\n      control: {\n        type: \"text\",\n      },\n      table: {\n        category: \"Children\",\n      },\n    },\n    flexGrow: {\n      type: \"text\",\n      description:\n        \"This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.\",\n      required: false,\n      control: {\n        type: \"number\",\n      },\n      table: {\n        category: \"Children\",\n      },\n    },\n    flexShrink: {\n      type: \"text\",\n      description: \"This defines the ability for a flex item to shrink if necessary.\",\n      required: false,\n      control: {\n        type: \"number\",\n      },\n      table: {\n        category: \"Children\",\n      },\n    },\n    flexBasis: {\n      type: \"text\",\n      description:\n        \"This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means \u201Clook at my width or height property\u201D (which was temporarily done by the main-size keyword until deprecated).\",\n      required: false,\n      control: {\n        type: \"number\",\n      },\n      table: {\n        category: \"Children\",\n      },\n    },\n    justifySelf: {\n      type: \"text\",\n      description:\n        \"This  sets the way a box is justified inside its alignment container along the appropriate axis.\",\n      required: false,\n      options: [\n        \"flex-start\",\n        \"flex-end\",\n        \"center\",\n        \"space-between\",\n        \"space-around\",\n        \"space-evenly\",\n        \"stretch\",\n        \"start\",\n        \"end\",\n        \"baseline\",\n        \"first baseline\",\n        \"last baseline\",\n        \"safe center\",\n        \"unsafe center\",\n      ],\n      control: {\n        type: \"select\",\n      },\n      table: {\n        category: \"Children\",\n      },\n    },\n    alignContent: {\n      type: \"text\",\n      description:\n        \"This aligns a flex container\u2019s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.\",\n      required: false,\n      options: [\n        \"flex-start\",\n        \"flex-end\",\n        \"center\",\n        \"space-between\",\n        \"space-around\",\n        \"space-evenly\",\n        \"stretch\",\n        \"start\",\n        \"end\",\n        \"baseline\",\n        \"first baseline\",\n        \"last baseline\",\n        \"safe center\",\n        \"unsafe center\",\n      ],\n      control: {\n        type: \"select\",\n      },\n      table: {\n        category: \"Parent\",\n        subcategory: \"cross-axis\",\n      },\n    },\n    alignSelf: {\n      type: \"text\",\n      description:\n        \"This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.\",\n      required: false,\n      options: [\n        \"flex-start\",\n        \"flex-end\",\n        \"center\",\n        \"space-between\",\n        \"space-around\",\n        \"space-evenly\",\n        \"stretch\",\n        \"start\",\n        \"end\",\n        \"baseline\",\n        \"first baseline\",\n        \"last baseline\",\n        \"safe center\",\n        \"unsafe center\",\n      ],\n      control: {\n        type: \"select\",\n      },\n      table: {\n        category: \"Children\",\n      },\n    },\n    order: {\n      type: \"text\",\n      description:\n        \"By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.\",\n      required: false,\n      control: {\n        type: \"number\",\n      },\n      table: {\n        category: \"Children\",\n      },\n    },\n    rowGap: {\n      type: \"text\",\n      description:\n        \"The row-gap CSS property sets the size of the gap (gutter) between an element's flex rows.\",\n      required: false,\n      control: { type: \"text\" },\n      table: { category: \"Parent\" },\n    },\n    columnGap: {\n      type: \"text\",\n      description:\n        \"The column-gap CSS property sets the size of the gap (gutter) between an element's flex columns.\",\n      required: false,\n      control: { type: \"text\" },\n      table: { category: \"Parent\" },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `The Flex component is a flexbox helper component that lets you write these common css properties more succinctly and inline.\n      \nLike the Box component, it includes all the style props exported by the color, layout, position, and shadow utilities from the [styled-system](https://styled-system.com) library, but also fully includes the flexbox ones.\n      \n[See more about styled-system utilities](https://styled-system.com/api)`,\n      },\n    },\n  },\n};\n/*\n ** Template component creates a sandbox to play with Flexbox properties.\n ** Children Flexbox props are passed to the first Square child, that allow\n ** you to play with the flexbox properties for children.\n */\n\nconst Template = (args: FlexBoxProps) => (\n  <Flex {...args}>\n    <Flex {...args} width=\"25vw\" height=\"25vw\" color=\"white\" backgroundColor=\"darkslategray\">\n      Control me with flex children props\n    </Flex>\n    <Flex width=\"25vw\" height=\"25vw\" backgroundColor=\"lightslategray\" />\n    <Flex width=\"25vw\" height=\"25vw\" backgroundColor=\"darkgray\" />\n  </Flex>\n);\n\nexport const Default = Template.bind({});\n"],
+  "mappings": "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",
+  "names": []
+}

package/lib/cjs/components/layout/Flex/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, {
+  default: () => Flex_default
+});
+var import_styled = __toModule(require("../../styled"));
+const FlexBox = import_styled.default.div.attrs({ display: "flex" })``;
+var Flex_default = FlexBox;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Flex/index.ts"],
+  "sourcesContent": ["import baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport type FlexBoxProps = BaseStyledProps;\n\nconst FlexBox = baseStyled.div.attrs<FlexBoxProps, FlexBoxProps>({ display: \"flex\" })``;\n\nexport default FlexBox;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,oBAA4C;AAI5C,MAAM,UAAU,sBAAW,IAAI,MAAkC,EAAE,SAAS;AAE5E,IAAO,eAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,254 @@
+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,
+  Fixed: () => Fixed,
+  default: () => Grid_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_styled_system = __toModule(require("styled-system"));
+var import_index = __toModule(require("./index"));
+var import_Text = __toModule(require("../../asorted/Text"));
+const Cell = import_styled_components.default.div`
+  // Make the div semi-opaque to show grid composition.
+  opacity: 0.7;
+  ${import_styled_system.color}
+  ${import_styled_system.space}
+  ${import_styled_system.grid}
+`;
+var Grid_stories_default = {
+  title: "Layout/Grid",
+  component: import_index.default,
+  argTypes: {
+    columns: {
+      type: "number",
+      description: "The number of columns set with a `repeat(N, minmax(0, 1fr))` pattern or `none` to disable.",
+      table: {
+        category: "Container",
+        defaultValue: {
+          summary: 12
+        }
+      }
+    },
+    rows: {
+      type: "number",
+      description: "The number of rows set with a `repeat(N, minmax(0, 1fr))` pattern or `none` to disable.",
+      table: {
+        category: "Container",
+        defaultValue: {
+          summary: "initial"
+        }
+      }
+    },
+    gridTemplateColumns: {
+      type: "string",
+      description: "The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.",
+      table: {
+        category: "Container"
+      }
+    },
+    gridTemplateRows: {
+      type: "string",
+      description: "The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.",
+      table: {
+        category: "Container"
+      }
+    },
+    gridTemplateAreas: {
+      type: "string",
+      description: "The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.",
+      table: {
+        category: "Container"
+      }
+    },
+    gridAutoColumns: {
+      type: "string",
+      description: "The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.",
+      table: {
+        category: "Container"
+      }
+    },
+    gridAutoRows: {
+      type: "string",
+      description: "The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.",
+      table: {
+        category: "Container"
+      }
+    },
+    gridAutoFlow: {
+      type: "string",
+      description: "The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.",
+      options: ["row", "column", "dense", "row dense", "column dense"],
+      control: {
+        type: "select"
+      },
+      table: {
+        category: "Container"
+      }
+    },
+    gridGap: {
+      type: "number",
+      description: "The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.",
+      table: {
+        category: "Container"
+      }
+    },
+    gridRowGap: {
+      type: "number",
+      description: "The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows.",
+      table: {
+        category: "Container"
+      }
+    },
+    gridColumnGap: {
+      type: "number",
+      description: "The column-gap CSS property sets the size of the gap (gutter) between an element's columns.",
+      table: {
+        category: "Container"
+      }
+    },
+    gridColumn: {
+      type: "string",
+      description: "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.",
+      table: {
+        category: "Cell"
+      }
+    },
+    gridRow: {
+      type: "string",
+      description: "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.",
+      table: {
+        category: "Cell"
+      }
+    },
+    gridArea: {
+      type: "string",
+      description: "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.",
+      table: {
+        category: "Cell"
+      }
+    }
+  }
+};
+const cells = Array.from({
+  length: 47
+}, (_, i) => {
+  const colSpan = i % 7 === 0 ? 4 : i % 5 === 0 ? 3 : i % 3 === 0 ? 2 : 0;
+  const rowSpan = i % 14 === 0 ? 2 : i % 6 === 0 ? 4 : 0;
+  return /* @__PURE__ */ import_react.default.createElement(Cell, {
+    key: i,
+    backgroundColor: "aliceBlue",
+    padding: 1,
+    opacity: 1,
+    gridColumn: colSpan > 0 ? `span ${colSpan}` : "initial",
+    gridRow: colSpan > 0 ? `span ${rowSpan}` : "initial"
+  }, i + 2, /* @__PURE__ */ import_react.default.createElement("div", {
+    style: {
+      fontSize: "10px"
+    }
+  }, colSpan > 0 ? `(column span ${colSpan})` : ""), /* @__PURE__ */ import_react.default.createElement("div", {
+    style: {
+      fontSize: "10px"
+    }
+  }, rowSpan > 0 ? `(row span ${rowSpan})` : ""));
+});
+const DefaultTemplate = ({ gridColumn, gridRow, gridArea, ...args }) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    style: {
+      marginBottom: "1em"
+    }
+  }, "A 12 columns grid using default props and containing cells with various span values."), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args
+  }, /* @__PURE__ */ import_react.default.createElement(Cell, {
+    key: "-1",
+    backgroundColor: "aliceBlue",
+    padding: 1,
+    opacity: 1,
+    gridColumn,
+    gridRow,
+    gridArea
+  }, "1"), cells));
+};
+const Default = DefaultTemplate;
+Default.args = {
+  gridGap: 1
+};
+const FixedTemplate = ({ gridColumn, gridRow, gridArea, ...args }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+  style: {
+    marginBottom: "1em"
+  }
+}, "This example with fixed cells is taken from the", " ", /* @__PURE__ */ import_react.default.createElement("a", {
+  href: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout",
+  style: {
+    cursor: "pointer"
+  }
+}, "MDN"), " ", "documentation."), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+  ...args
+}, /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Cell, {
+  color: "white",
+  padding: "2",
+  gridColumn,
+  gridRow,
+  gridArea,
+  backgroundColor: "red"
+}, "Control me using ", `"Cell"`, " props."), /* @__PURE__ */ import_react.default.createElement(Cell, {
+  gridColumn: "2 / 4",
+  gridRow: "1 / 3",
+  backgroundColor: "blue"
+}), /* @__PURE__ */ import_react.default.createElement(Cell, {
+  gridColumn: "1",
+  gridRow: "2 / 5",
+  backgroundColor: "green"
+}), /* @__PURE__ */ import_react.default.createElement(Cell, {
+  gridColumn: "3",
+  gridRow: "3",
+  backgroundColor: "purple"
+}), /* @__PURE__ */ import_react.default.createElement(Cell, {
+  gridColumn: "2",
+  gridRow: "4",
+  backgroundColor: "teal"
+}), /* @__PURE__ */ import_react.default.createElement(Cell, {
+  gridColumn: "3",
+  gridRow: "4",
+  backgroundColor: "brown"
+}))));
+const Fixed = FixedTemplate;
+Fixed.args = {
+  columns: 3,
+  rows: void 0,
+  gridAutoRows: "100px",
+  gridGap: 1,
+  gridTemplateColumns: void 0,
+  gridTemplateRows: void 0,
+  gridTemplateAreas: void 0,
+  gridRowGap: void 0,
+  gridColumnGap: void 0,
+  gridColumn: "1/3",
+  gridRow: "1",
+  gridArea: void 0,
+  gridAutoFlow: void 0,
+  gridAutoColumns: void 0
+};
+//# sourceMappingURL=Grid.stories.js.map