function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import React from 'react';
import styled from 'styled-components';
import { Flexbox, Typography } from '../..';
var Content = styled.div.withConfig({
  displayName: "Flexboxstories__Content",
  componentId: "sc-103j0u1-0"
})(["box-sizing:border-box;border:1px solid black;background-color:#eee;height:100%;"]);
var meta = {
  component: Flexbox,
  title: 'Atoms / Flexbox'
};
export default meta;
export var DefaultStory = {
  render: function render() {
    return React.createElement(Flexbox, {
      container: true
    }, React.createElement(Flexbox, {
      item: true
    }, React.createElement(Content, null, "Col 1")), React.createElement(Flexbox, {
      item: true
    }, React.createElement(Content, null, "Col 2")), React.createElement(Flexbox, {
      item: true
    }, React.createElement(Content, null, "Col 3")));
  },
  name: 'Default'
};
export var ColumnSizedFlexboxes = function ColumnSizedFlexboxes() {
  return React.createElement(Flexbox, {
    container: true
  }, React.createElement(Flexbox, {
    item: true,
    size: 3
  }, React.createElement(Content, null, "Col 1")), React.createElement(Flexbox, {
    item: true,
    size: 6
  }, React.createElement(Content, null, "Col 2")), React.createElement(Flexbox, {
    item: true,
    size: 3
  }, React.createElement(Content, null, "Col 3")));
};
var tenTimes = _toConsumableArray(Array(10)).map(function (_, i) {
  return i + 1;
});
export var WithCustomGap = function WithCustomGap() {
  return React.createElement(React.Fragment, null, React.createElement(Typography, {
    type: "title3"
  }, "With gap as unit"), React.createElement(Flexbox, {
    container: true,
    gap: 5
  }, tenTimes.map(function (i) {
    return React.createElement(Content, {
      key: "unit-".concat(i),
      style: {
        width: '200px'
      }
    }, i);
  })), React.createElement(Typography, {
    type: "title3"
  }, "With gap as string"), React.createElement(Flexbox, {
    container: true,
    gap: "10px 10vw",
    wrap: "wrap"
  }, tenTimes.map(function (i) {
    return React.createElement(Content, {
      key: "string-".concat(i),
      style: {
        width: '200px'
      }
    }, i);
  })), React.createElement(Typography, {
    type: "title3"
  }, "With gap as object"), React.createElement(Flexbox, {
    container: true,
    gap: {
      column: 5,
      row: 10
    },
    wrap: "wrap"
  }, tenTimes.map(function (i) {
    return React.createElement(Content, {
      key: "obj-".concat(i),
      style: {
        width: '200px'
      }
    }, i);
  })));
};
export var WithDirectionColumn = function WithDirectionColumn() {
  return React.createElement(Flexbox, {
    container: true,
    direction: "column"
  }, React.createElement(Flexbox, {
    item: true,
    order: 2
  }, React.createElement(Content, null, "Col 1")), React.createElement(Flexbox, {
    item: true,
    order: 1
  }, React.createElement(Content, null, "Col 2")), React.createElement(Flexbox, {
    item: true,
    order: 3
  }, React.createElement(Content, null, "Col 3")));
};
export var WithConditionallyHiddenFlexItem = function WithConditionallyHiddenFlexItem() {
  var showFirstItem = false;
  return React.createElement(Flexbox, {
    container: true
  }, showFirstItem && React.createElement(Flexbox, {
    item: true,
    order: 2
  }, React.createElement(Content, null, "Col 1")), React.createElement(Flexbox, {
    item: true,
    order: 1
  }, React.createElement(Content, null, "Col 2")));
};
export var WithConditionallyVisibleFlexItem = function WithConditionallyVisibleFlexItem() {
  var showFirstItem = true;
  return React.createElement(Flexbox, {
    container: true
  }, showFirstItem && React.createElement(Flexbox, {
    item: true,
    order: 2
  }, React.createElement(Content, null, "Col 1")), React.createElement(Flexbox, {
    item: true,
    order: 1
  }, React.createElement(Content, null, "Col 2")));
};
export var WithContainerAndItemProps = function WithContainerAndItemProps() {
  return React.createElement(Flexbox, {
    container: true,
    gap: 5
  }, React.createElement(Flexbox, {
    container: true,
    item: true,
    direction: "column",
    gap: 5
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(Content, null, "First element here")), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Content, null, "Second element here"))), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus neque in venenatis faucibus. Fusce vitae maximus diam. Ut placerat lacus id porttitor tristique. Mauris in neque tempus, venenatis metus vitae, pellentesque massa. Etiam blandit lacus diam, dignissim posuere massa semper maximus. In pretium commodo nisl sed ultrices. Duis gravida diam ac nisl sodales mollis. Quisque iaculis semper mi, eu interdum elit molestie quis. Vivamus rutrum cursus interdum. Suspendisse vehicula quam mi, a efficitur ante egestas eget.")));
};
export var WithBreakpointProps = function WithBreakpointProps() {
  return React.createElement(Flexbox, {
    container: true,
    gap: 4,
    direction: "column",
    sm: {
      gap: 6
    },
    md: {
      gap: 6,
      direction: 'row'
    },
    lg: {
      gap: 10,
      direction: 'row'
    },
    xl: {
      gap: 10,
      direction: 'row'
    }
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(Content, null, "First element here")), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Content, null, "Second element here")), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus neque in venenatis faucibus. Fusce vitae maximus diam. Ut placerat lacus id porttitor tristique. Mauris in neque tempus, venenatis metus vitae, pellentesque massa. Etiam blandit lacus diam, dignissim posuere massa semper maximus. In pretium commodo nisl sed ultrices. Duis gravida diam ac nisl sodales mollis. Quisque iaculis semper mi, eu interdum elit molestie quis. Vivamus rutrum cursus interdum. Suspendisse vehicula quam mi, a efficitur ante egestas eget.")));
};
var GrowingDiv = styled.div.withConfig({
  displayName: "Flexboxstories__GrowingDiv",
  componentId: "sc-103j0u1-1"
})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:10px;box-sizing:border-box;border:1px solid black;background-color:#eee;"]);
export var WidthAndHeightInNumbers = {
  render: function render() {
    return React.createElement("div", {
      style: {
        height: '500px'
      }
    }, React.createElement(Flexbox, {
      container: true,
      width: 100,
      height: 100,
      alignItems: "center",
      justifyContent: "space-between",
      gap: 5
    }, React.createElement(Flexbox, {
      item: true,
      height: "100%"
    }, React.createElement(GrowingDiv, null, "One")), React.createElement(Flexbox, {
      item: true,
      height: "100%"
    }, React.createElement(GrowingDiv, null, "Two")), React.createElement(Flexbox, {
      item: true,
      height: "100%"
    }, React.createElement(GrowingDiv, null, "Three"))));
  }
};
export var WidthAndHeightInPercentage = {
  render: function render() {
    return React.createElement("div", {
      style: {
        height: '500px'
      }
    }, React.createElement(Flexbox, {
      container: true,
      width: "50%",
      height: "50%",
      alignItems: "center",
      justifyContent: "space-between",
      gap: 5
    }, React.createElement(Flexbox, {
      item: true,
      height: "100%"
    }, React.createElement(GrowingDiv, null, "One")), React.createElement(Flexbox, {
      item: true,
      height: "100%"
    }, React.createElement(GrowingDiv, null, "Two")), React.createElement(Flexbox, {
      item: true,
      height: "100%"
    }, React.createElement(GrowingDiv, null, "Three"))));
  }
};
export var DifferentSizedItems = {
  render: function render() {
    return React.createElement(Flexbox, {
      container: true,
      width: 100,
      height: 100,
      alignItems: "center",
      justifyContent: "space-between",
      gap: 5
    }, React.createElement(Flexbox, {
      item: true,
      width: "100%",
      height: "100%"
    }, React.createElement(GrowingDiv, null, "One")), React.createElement(Flexbox, {
      item: true,
      width: "66%",
      height: "66%"
    }, React.createElement(GrowingDiv, null, "Two")), React.createElement(Flexbox, {
      item: true,
      width: "33%",
      height: "33%"
    }, React.createElement(GrowingDiv, null, "Three")));
  }
};