@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/GridRow-6wilpUeo.js

@@ -0,0 +1,1701 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var fill = require('./constants/componentProps/fill.js');
+var gridJustifyItems = require('./constants/componentProps/gridJustifyItems.js');
+var gridAlign = require('./constants/componentProps/gridAlign.js');
+var shape = require('./constants/componentProps/shape.js');
+var horizontalResizeMode = require('./constants/componentProps/horizontalResizeMode.js');
+var verticalResizeMode = require('./constants/componentProps/verticalResizeMode.js');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+var gridAlignSelf = require('./constants/componentProps/gridAlignSelf.js');
+var gridJustifySelf = require('./constants/componentProps/gridJustifySelf.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Grid(props) {
+  const {
+    id,
+    after,
+    before,
+    children,
+    className,
+    horizontalResizing,
+    horizontalScroll,
+    onClick,
+    type,
+    useGridSystem,
+    tag: Tag,
+    dataTour,
+    verticalResizing
+  } = props;
+  const columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_columns_',
+    propsKey: 'columns'
+  });
+  const rowsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_rows_',
+    propsKey: 'rows'
+  });
+  const rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_row-gap_',
+    propsKey: 'rowGap'
+  });
+  const columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_column-gap_',
+    propsKey: 'columnGap'
+  });
+  const alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_align-content_',
+    propsKey: 'alignContent'
+  });
+  const alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_align-items_',
+    propsKey: 'alignItems'
+  });
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  const justifyItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_justify-items_',
+    propsKey: 'justifyItems'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fillWrapper'
+  });
+  useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fillWrapperInner'
+  });
+  useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_shape_',
+    propsKey: 'shapeWrapper'
+  });
+  useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid_shape_',
+    propsKey: 'shapeWrapperInner'
+  });
+  const {
+    styles: gridStyles,
+    gridWrapper: gridWrapperStyles,
+    gridWrapperInner: gridWrapperInnerStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'grid', useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass, rowsClass, rowGapClass, columnGapClass, alignContentClass, alignItemsClass, borderColorClass, justifyContentClass, justifyItemsClass, fillClass, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`),
+    "data-tour": dataTour,
+    id: id,
+    style: gridStyles,
+    onClick: onClick
+  }, before && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "grid__before"
+  }, before), children, after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "grid__after"
+  }, after));
+}
+Grid.propTypes = {
+  after: PropTypes__default.default.any,
+  alignContent: PropTypes__default.default.oneOf(gridAlign.default),
+  alignContentDesktop: PropTypes__default.default.oneOf(gridAlign.default),
+  alignContentMobile: PropTypes__default.default.oneOf(gridAlign.default),
+  alignContentTablet: PropTypes__default.default.oneOf(gridAlign.default),
+  alignItems: PropTypes__default.default.oneOf(gridAlign.default),
+  alignItemsDesktop: PropTypes__default.default.oneOf(gridAlign.default),
+  alignItemsMobile: PropTypes__default.default.oneOf(gridAlign.default),
+  alignItemsTablet: PropTypes__default.default.oneOf(gridAlign.default),
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  columnGap: PropTypes__default.default.number,
+  columnGapDesktop: PropTypes__default.default.number,
+  columnGapMobile: PropTypes__default.default.number,
+  columnGapTablet: PropTypes__default.default.number,
+  columns: PropTypes__default.default.number,
+  columnsDesktop: PropTypes__default.default.number,
+  columnsMobile: PropTypes__default.default.number,
+  columnsTablet: PropTypes__default.default.number,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  fillWrapper: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperInner: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperInnerDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperInnerMobile: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperInnerTablet: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperMobile: PropTypes__default.default.oneOf(fill.default),
+  fillWrapperTablet: PropTypes__default.default.oneOf(fill.default),
+  gridBackground: PropTypes__default.default.any,
+  gridBackgroundDesktop: PropTypes__default.default.any,
+  gridBackgroundMobile: PropTypes__default.default.any,
+  gridBackgroundTablet: PropTypes__default.default.any,
+  gridBackgroundWrapper: PropTypes__default.default.any,
+  gridBackgroundWrapperDesktop: PropTypes__default.default.any,
+  gridBackgroundWrapperMobile: PropTypes__default.default.any,
+  gridBackgroundWrapperTablet: PropTypes__default.default.any,
+  horizontalResizing: PropTypes__default.default.oneOf(horizontalResizeMode.default),
+  id: PropTypes__default.default.string,
+  justifyContent: PropTypes__default.default.string,
+  justifyContentDesktop: PropTypes__default.default.string,
+  justifyContentMobile: PropTypes__default.default.string,
+  justifyContentTablet: PropTypes__default.default.string,
+  justifyItems: PropTypes__default.default.oneOf(gridJustifyItems.default),
+  justifyItemsDesktop: PropTypes__default.default.oneOf(gridJustifyItems.default),
+  justifyItemsMobile: PropTypes__default.default.oneOf(gridJustifyItems.default),
+  justifyItemsTablet: PropTypes__default.default.oneOf(gridJustifyItems.default),
+  rowGap: PropTypes__default.default.string,
+  rowGapDesktop: PropTypes__default.default.string,
+  rowGapMobile: PropTypes__default.default.string,
+  rowGapTablet: PropTypes__default.default.string,
+  rows: PropTypes__default.default.number,
+  rowsDesktop: PropTypes__default.default.number,
+  rowsMobile: PropTypes__default.default.number,
+  rowsTablet: PropTypes__default.default.number,
+  shapeWrapper: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperInner: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperInnerDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperInnerMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperInnerTablet: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeWrapperTablet: PropTypes__default.default.oneOf(shape.default),
+  type: PropTypes__default.default.string,
+  useGridSystem: PropTypes__default.default.bool,
+  verticalResizing: PropTypes__default.default.oneOf(verticalResizeMode.default),
+  onClick: PropTypes__default.default.func
+};
+Grid.defaultProps = {
+  tag: 'div'
+};
+Grid.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Grid",
+  "props": {
+    "tag": {
+      "defaultValue": {
+        "value": "'div'",
+        "computed": false
+      },
+      "required": false
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "alignContent": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignProps"
+      },
+      "required": false
+    },
+    "alignContentDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignProps"
+      },
+      "required": false
+    },
+    "alignContentMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignProps"
+      },
+      "required": false
+    },
+    "alignContentTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignProps"
+      },
+      "required": false
+    },
+    "alignItems": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignProps"
+      },
+      "required": false
+    },
+    "alignItemsDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignProps"
+      },
+      "required": false
+    },
+    "alignItemsMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignProps"
+      },
+      "required": false
+    },
+    "alignItemsTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignProps"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "columnGap": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnGapDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnGapMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnGapTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columns": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnsDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnsMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnsTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillWrapper": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillWrapperDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillWrapperInner": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillWrapperInnerDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillWrapperInnerMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillWrapperInnerTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillWrapperMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillWrapperTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "gridBackground": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "gridBackgroundDesktop": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "gridBackgroundMobile": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "gridBackgroundTablet": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "gridBackgroundWrapper": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "gridBackgroundWrapperDesktop": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "gridBackgroundWrapperMobile": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "gridBackgroundWrapperTablet": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "horizontalResizing": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "horizontalResizeModeProps"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "justifyContent": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "justifyContentDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "justifyContentMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "justifyContentTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "justifyItems": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifyItemsProps"
+      },
+      "required": false
+    },
+    "justifyItemsDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifyItemsProps"
+      },
+      "required": false
+    },
+    "justifyItemsMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifyItemsProps"
+      },
+      "required": false
+    },
+    "justifyItemsTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifyItemsProps"
+      },
+      "required": false
+    },
+    "rowGap": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "rowGapDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "rowGapMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "rowGapTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "rows": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowsDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowsMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowsTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "shapeWrapper": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeWrapperDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeWrapperInner": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeWrapperInnerDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeWrapperInnerMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeWrapperInnerTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeWrapperMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeWrapperTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "useGridSystem": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "verticalResizing": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "verticalResizeModeProps"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+function GridItem(props) {
+  const {
+    id,
+    children,
+    className,
+    dataTour,
+    onClick
+  } = props;
+  const orderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'order_',
+    propsKey: 'order'
+  });
+  const alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_align-self_',
+    propsKey: 'alignSelf'
+  });
+  const justifySelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_justify-self_',
+    propsKey: 'justifySelf'
+  });
+  const columnStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_column-start_',
+    propsKey: 'columnStart'
+  });
+  const columnEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_column-end_',
+    propsKey: 'columnEnd'
+  });
+  const columnSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_column-span_',
+    propsKey: 'columnSpan'
+  });
+  const rowStartClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_row-start_',
+    propsKey: 'rowStart'
+  });
+  const rowEndClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_row-end_',
+    propsKey: 'rowEnd'
+  });
+  const rowSpanClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'grid__item_row-span_',
+    propsKey: 'rowSpan'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'gap_',
+    propsKey: 'gap'
+  });
+  const rowGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'row-gap_',
+    propsKey: 'rowGap'
+  });
+  const columnGapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'column-gap_',
+    propsKey: 'columnGap'
+  });
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'direction_',
+    propsKey: 'direction'
+  });
+  const {
+    styles: gridItemStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'grid__item', orderClass, fillClass, fillHoverClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass),
+    "data-tour": dataTour,
+    id: id,
+    style: gridItemStyles,
+    onClick: onClick
+  }, children);
+}
+GridItem.propTypes = {
+  alignSelf: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  alignSelfDesktop: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  alignSelfMobile: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  alignSelfTablet: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  columnEnd: PropTypes__default.default.number,
+  columnEndDesktop: PropTypes__default.default.number,
+  columnEndMobile: PropTypes__default.default.number,
+  columnEndTablet: PropTypes__default.default.number,
+  columnSpan: PropTypes__default.default.number,
+  columnSpanDesktop: PropTypes__default.default.number,
+  columnSpanMobile: PropTypes__default.default.number,
+  columnSpanTablet: PropTypes__default.default.number,
+  columnStart: PropTypes__default.default.number,
+  columnStartDesktop: PropTypes__default.default.number,
+  columnStartMobile: PropTypes__default.default.number,
+  columnStartTablet: PropTypes__default.default.number,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  id: PropTypes__default.default.string,
+  justifySelf: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  justifySelfDesktop: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  justifySelfMobile: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  justifySelfTablet: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  order: PropTypes__default.default.number,
+  orderDesktop: PropTypes__default.default.number,
+  orderMobile: PropTypes__default.default.number,
+  orderTablet: PropTypes__default.default.number,
+  rowEnd: PropTypes__default.default.number,
+  rowEndDesktop: PropTypes__default.default.number,
+  rowEndMobile: PropTypes__default.default.number,
+  rowEndTablet: PropTypes__default.default.number,
+  rowSpan: PropTypes__default.default.number,
+  rowSpanDesktop: PropTypes__default.default.number,
+  rowSpanMobile: PropTypes__default.default.number,
+  rowSpanTablet: PropTypes__default.default.number,
+  rowStart: PropTypes__default.default.number,
+  rowStartDesktop: PropTypes__default.default.number,
+  rowStartMobile: PropTypes__default.default.number,
+  rowStartTablet: PropTypes__default.default.number,
+  zIndex: PropTypes__default.default.number,
+  zIndexDesktop: PropTypes__default.default.number,
+  zIndexMobile: PropTypes__default.default.number,
+  zIndexTablet: PropTypes__default.default.number
+};
+GridItem.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "GridItem",
+  "props": {
+    "alignSelf": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignSelfProps"
+      },
+      "required": false
+    },
+    "alignSelfDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignSelfProps"
+      },
+      "required": false
+    },
+    "alignSelfMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignSelfProps"
+      },
+      "required": false
+    },
+    "alignSelfTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignSelfProps"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "columnEnd": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnEndDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnEndMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnEndTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnSpan": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnSpanDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnSpanMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnSpanTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnStart": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnStartDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnStartMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnStartTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "justifySelf": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifySelfProps"
+      },
+      "required": false
+    },
+    "justifySelfDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifySelfProps"
+      },
+      "required": false
+    },
+    "justifySelfMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifySelfProps"
+      },
+      "required": false
+    },
+    "justifySelfTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifySelfProps"
+      },
+      "required": false
+    },
+    "order": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "orderDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "orderMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "orderTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowEnd": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowEndDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowEndMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowEndTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowSpan": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowSpanDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowSpanMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowSpanTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowStart": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowStartDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowStartMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowStartTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "zIndex": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "zIndexDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "zIndexMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "zIndexTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    }
+  }
+};
+
+function GridRow(props) {
+  const {
+    id,
+    children,
+    className,
+    dataTour,
+    tag: Tag,
+    htmlFor,
+    onClick
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const {
+    styles: gridRowStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'grid__row', fillClass, fillHoverClass),
+    "data-tour": dataTour,
+    htmlFor: htmlFor,
+    id: id,
+    style: gridRowStyles,
+    onClick: onClick
+  }, children);
+}
+GridRow.propTypes = {
+  alignSelf: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  alignSelfDesktop: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  alignSelfMobile: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  alignSelfTablet: PropTypes__default.default.oneOf(gridAlignSelf.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  columnEnd: PropTypes__default.default.number,
+  columnEndDesktop: PropTypes__default.default.number,
+  columnEndMobile: PropTypes__default.default.number,
+  columnEndTablet: PropTypes__default.default.number,
+  columnSpan: PropTypes__default.default.number,
+  columnSpanDesktop: PropTypes__default.default.number,
+  columnSpanMobile: PropTypes__default.default.number,
+  columnSpanTablet: PropTypes__default.default.number,
+  columnStart: PropTypes__default.default.number,
+  columnStartDesktop: PropTypes__default.default.number,
+  columnStartMobile: PropTypes__default.default.number,
+  columnStartTablet: PropTypes__default.default.number,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  id: PropTypes__default.default.string,
+  justifySelf: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  justifySelfDesktop: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  justifySelfMobile: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  justifySelfTablet: PropTypes__default.default.oneOf(gridJustifySelf.default),
+  order: PropTypes__default.default.number,
+  orderDesktop: PropTypes__default.default.number,
+  orderMobile: PropTypes__default.default.number,
+  orderTablet: PropTypes__default.default.number,
+  rowEnd: PropTypes__default.default.number,
+  rowEndDesktop: PropTypes__default.default.number,
+  rowEndMobile: PropTypes__default.default.number,
+  rowEndTablet: PropTypes__default.default.number,
+  rowSpan: PropTypes__default.default.number,
+  rowSpanDesktop: PropTypes__default.default.number,
+  rowSpanMobile: PropTypes__default.default.number,
+  rowSpanTablet: PropTypes__default.default.number,
+  rowStart: PropTypes__default.default.number,
+  rowStartDesktop: PropTypes__default.default.number,
+  rowStartMobile: PropTypes__default.default.number,
+  rowStartTablet: PropTypes__default.default.number,
+  zIndex: PropTypes__default.default.number,
+  zIndexDesktop: PropTypes__default.default.number,
+  zIndexMobile: PropTypes__default.default.number,
+  zIndexTablet: PropTypes__default.default.number
+};
+GridRow.defaultProps = {
+  tag: 'div'
+};
+GridRow.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "GridRow",
+  "props": {
+    "tag": {
+      "defaultValue": {
+        "value": "'div'",
+        "computed": false
+      },
+      "required": false
+    },
+    "alignSelf": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignSelfProps"
+      },
+      "required": false
+    },
+    "alignSelfDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignSelfProps"
+      },
+      "required": false
+    },
+    "alignSelfMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignSelfProps"
+      },
+      "required": false
+    },
+    "alignSelfTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridAlignSelfProps"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "columnEnd": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnEndDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnEndMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnEndTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnSpan": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnSpanDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnSpanMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnSpanTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnStart": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnStartDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnStartMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "columnStartTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "justifySelf": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifySelfProps"
+      },
+      "required": false
+    },
+    "justifySelfDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifySelfProps"
+      },
+      "required": false
+    },
+    "justifySelfMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifySelfProps"
+      },
+      "required": false
+    },
+    "justifySelfTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "gridJustifySelfProps"
+      },
+      "required": false
+    },
+    "order": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "orderDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "orderMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "orderTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowEnd": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowEndDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowEndMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowEndTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowSpan": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowSpanDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowSpanMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowSpanTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowStart": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowStartDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowStartMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "rowStartTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "zIndex": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "zIndexDesktop": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "zIndexMobile": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "zIndexTablet": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Grid = Grid;
+exports.GridItem = GridItem;
+exports.GridRow = GridRow;