@itcase/ui 1.1.5 → 1.1.7

package/dist/GridRow-Buc4dsHd.js

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