"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 Flex_stories_exports = {};
__export(Flex_stories_exports, {
  Default: () => Default,
  default: () => Flex_stories_default
});
module.exports = __toCommonJS(Flex_stories_exports);
var import_react = __toESM(require("react"));
var import_index = __toESM(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
