"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Grid_stories_exports = {};
__export(Grid_stories_exports, {
  Default: () => Default,
  Fixed: () => Fixed,
  default: () => Grid_stories_default
});
module.exports = __toCommonJS(Grid_stories_exports);
var import_react = __toESM(require("react"));
var import_styled_components = __toESM(require("styled-components"));
var import_styled_system = require("styled-system");
var import_index = __toESM(require("./index"));
var import_Text = __toESM(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
