@instructure/ui-grid 11.6.0 → 11.6.1-snapshot-129

package/src/GridCol/v2/props.ts

@@ -0,0 +1,90 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { GridBreakpoints } from '../../utils/v1/GridTypes'
+
+type ColWidths = 'auto' | number
+
+type GridColOwnProps = {
+  children?: React.ReactNode
+  colSpacing?: 'none' | 'small' | 'medium' | 'large'
+  rowSpacing?: 'none' | 'small' | 'medium' | 'large'
+  textAlign?: 'start' | 'end' | 'center' | 'inherit'
+  hAlign?: 'start' | 'center' | 'end' | 'space-around' | 'space-between'
+  vAlign?: 'top' | 'middle' | 'bottom' | 'stretch'
+  startAt?: GridBreakpoints
+  visualDebug?: boolean
+  width?:
+    | ColWidths
+    | {
+        small?: ColWidths
+        medium?: ColWidths
+        large?: ColWidths
+        xLarge?: ColWidths
+      }
+  offset?:
+    | ColWidths
+    | {
+        small?: ColWidths
+        medium?: ColWidths
+        large?: ColWidths
+        xLarge?: ColWidths
+      }
+  isLastRow?: boolean
+  isLastCol?: boolean
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: HTMLSpanElement | null) => void
+}
+
+type PropKeys = keyof GridColOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type GridColProps = GridColOwnProps &
+  WithStyleProps<GridTheme, GridColStyle> &
+  OtherHTMLAttributes<GridColOwnProps>
+
+type GridColStyle = ComponentStyle<'gridCol'>
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'colSpacing',
+  'rowSpacing',
+  'textAlign',
+  'hAlign',
+  'vAlign',
+  'startAt',
+  'visualDebug',
+  'width',
+  'offset',
+  'isLastRow',
+  'isLastCol',
+  'elementRef'
+]
+
+export type { GridColProps, GridColStyle }
+export { allowedProps }

package/src/GridCol/v2/styles.ts

@@ -0,0 +1,221 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { GridBreakpoints } from '../../utils/v1/GridTypes'
+import type { GridColProps, GridColStyle } from './props'
+
+type BreakPoints = NonNullable<GridBreakpoints>
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['GridCol'],
+  props: GridColProps
+): GridColStyle => {
+  const {
+    vAlign,
+    textAlign,
+    rowSpacing,
+    colSpacing,
+    isLastRow,
+    isLastCol,
+    startAt,
+    visualDebug
+  } = props
+
+  const rowSpacingVariants = {
+    small: { marginBottom: componentTheme.spacingSmall },
+    medium: { marginBottom: componentTheme.spacingMedium },
+    large: { marginBottom: componentTheme.spacingLarge },
+    none: { marginBottom: 0 }
+  }
+
+  const getStartGridColumnStyle = () => {
+    const colSpacingVariants = {
+      small: {
+        paddingLeft: `calc(${componentTheme.spacingSmall} / 2)`,
+        paddingRight: `calc(${componentTheme.spacingSmall} / 2)`
+      },
+      medium: {
+        paddingLeft: `calc(${componentTheme.spacingMedium} / 2)`,
+        paddingRight: `calc(${componentTheme.spacingMedium} / 2)`
+      },
+      large: {
+        paddingLeft: `calc(${componentTheme.spacingLarge} / 2)`,
+        paddingRight: `calc(${componentTheme.spacingLarge} / 2)`
+      },
+      none: {}
+    }
+
+    const vAlignVariants = {
+      top: { alignSelf: 'flex-start' },
+      middle: { alignSelf: 'center' },
+      bottom: { alignSelf: 'flex-end' },
+      stretch: { alignSelf: 'stretch' }
+    }
+
+    const textAlignVariants = {
+      start: { textAlign: 'start' },
+      end: { textAlign: 'end' },
+      center: { textAlign: 'center' },
+      inherit: { textAlign: 'inherit' }
+    }
+
+    return {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: '0%',
+      marginBottom: 0,
+      boxSizing: 'border-box',
+      ...(colSpacing && colSpacingVariants[colSpacing]),
+      ...(vAlign && vAlignVariants[vAlign]),
+      ...(textAlign && textAlignVariants[textAlign])
+    }
+  }
+
+  const enabledBreakpoints = () => {
+    const breakpoints: GridBreakpoints[] = [
+      'small',
+      'medium',
+      'large',
+      'x-large',
+      null
+    ]
+    return breakpoints.slice(breakpoints.indexOf(startAt!))
+  }
+
+  const breakpointIsEnabled = (breakpoint: BreakPoints) => {
+    return enabledBreakpoints().includes(breakpoint)
+  }
+
+  const getColSize = (breakpoint: BreakPoints) => {
+    let { width } = props
+
+    if (!width) return
+
+    if (width && typeof width === 'object') {
+      width = width[breakpoint === 'x-large' ? 'xLarge' : breakpoint]
+    }
+
+    return width
+  }
+
+  const getColOffset = (breakpoint: BreakPoints) => {
+    let { offset } = props
+
+    if (!offset) return
+
+    if (offset && typeof offset === 'object') {
+      offset = offset[breakpoint === 'x-large' ? 'xLarge' : breakpoint]
+    }
+
+    return offset
+  }
+
+  const getFlexColumnBySize = (size: string | number = '1') => {
+    switch (size) {
+      case 'auto':
+        return { flexGrow: 0, flexShrink: 0, flexBasis: 'auto' }
+      case 12:
+        return { flex: '0 0 100%' }
+      default:
+        return {
+          flexGrow: 0,
+          flexShrink: 0,
+          flexBasis: `calc(${size} / 12 * 99.999%)`,
+          maxWidth: `calc(${size} / 12 * 99.999%)`
+        }
+    }
+  }
+
+  const getColumnOffsetBySize = (size: string | number = '1') => {
+    switch (size) {
+      case 'auto':
+      case 12:
+        return {}
+      default:
+        return {
+          marginInlineStart: `calc(${size} / 12 * 99.999%)`,
+          marginInlineEnd: 0
+        }
+    }
+  }
+
+  const getStartAtVariants = (breakpoint: BreakPoints) =>
+    !!startAt && startAt === breakpoint ? { ...getStartGridColumnStyle() } : {}
+
+  const getGridColumnsForBreakpoint = (breakpoint: BreakPoints) => {
+    const size = getColSize(breakpoint)
+    const offset = getColOffset(breakpoint)
+
+    return breakpointIsEnabled(breakpoint)
+      ? {
+          ...(size && getFlexColumnBySize(size)),
+          ...(offset && getColumnOffsetBySize(offset))
+        }
+      : {}
+  }
+
+  const getBreakpointStyles = (breakpoint: BreakPoints) => ({
+    ...getStartAtVariants(breakpoint),
+    ...getGridColumnsForBreakpoint(breakpoint)
+  })
+
+  return {
+    gridCol: {
+      label: 'gridCol',
+      display: 'block',
+      boxSizing: 'border-box',
+      textAlign: 'inherit',
+      minWidth: '0.0625rem',
+      ...(rowSpacing && rowSpacingVariants[rowSpacing]),
+      ...(isLastRow && isLastCol && { marginBottom: 0 }),
+
+      ...getBreakpointStyles('small'),
+
+      [`@media screen and (min-width: ${componentTheme.mediumMin})`]: {
+        ...getBreakpointStyles('medium')
+      },
+      [`@media screen and (min-width: ${componentTheme.largeMin})`]: {
+        ...getBreakpointStyles('large')
+      },
+      [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: {
+        ...getBreakpointStyles('x-large')
+      },
+
+      ...(visualDebug && { outline: '0.0625rem dashed red' })
+    }
+  }
+}
+
+export default generateStyle

package/src/GridRow/{index.tsx → v1/index.tsx}

@@ -31,10 +31,10 @@ import {
   pickProps
 } from '@instructure/ui-react-utils'
 
-import { GridCol } from '../GridCol'
-import type { GridColProps } from '../GridCol/props'
+import { GridCol } from '../../GridCol/v1/'
+import type { GridColProps } from '../../GridCol/v1/props'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/GridRow/{props.ts → v1/props.ts}

@@ -26,7 +26,7 @@ import React from 'react'
 
 import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { GridBreakpoints } from '../GridTypes'
+import type { GridBreakpoints } from '../../utils/v1/GridTypes'
 
 type GridRowOwnProps = {
   /**

package/src/GridRow/{styles.ts → v1/styles.ts}

@@ -23,7 +23,7 @@
  */
 
 import type { GridTheme } from '@instructure/shared-types'
-import type { GridBreakpoints } from '../GridTypes'
+import type { GridBreakpoints } from '../../utils/v1/GridTypes'
 import type { GridRowProps, GridRowStyle } from './props'
 
 /**

package/src/GridRow/v2/index.tsx

@@ -0,0 +1,109 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { ComponentElement, Component, Children } from 'react'
+
+import {
+  safeCloneElement,
+  matchComponentTypes,
+  omitProps,
+  pickProps
+} from '@instructure/ui-react-utils'
+
+import { GridCol } from '../../GridCol/v2/'
+import type { GridColProps } from '../../GridCol/v2/props'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { GridRowProps } from './props'
+
+/**
+---
+parent: Grid
+id: Grid.Row
+---
+**/
+@withStyle(generateStyle)
+class GridRow extends Component<GridRowProps> {
+  static readonly componentId = 'Grid.Row'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    children: null,
+    isLastRow: false
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  renderChildren() {
+    const { styles, makeStyles, ...props } = this.props
+
+    return Children.map(this.props.children, (child, index) => {
+      if (
+        matchComponentTypes<ComponentElement<GridColProps, GridCol>>(child, [
+          GridCol
+        ])
+      ) {
+        return safeCloneElement(child, {
+          ...pickProps(props, GridRow.allowedProps),
+          ...child.props /* child props should override parent */,
+          isLastRow: props.isLastRow,
+          isLastCol: index + 1 === Children.count(this.props.children)
+        })
+      } else {
+        return child // PropType validation should handle errors
+      }
+    })
+  }
+
+  render() {
+    const { styles, ...restProps } = this.props
+
+    const props = omitProps(restProps, GridRow.allowedProps)
+
+    return (
+      <span {...props} css={styles?.gridRow} ref={this.handleRef}>
+        {this.renderChildren()}
+      </span>
+    )
+  }
+}
+
+export default GridRow
+export { GridRow }

package/src/GridRow/v2/props.ts

@@ -0,0 +1,66 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+
+import type { GridTheme, OtherHTMLAttributes } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { GridBreakpoints } from '../../utils/v1/GridTypes'
+
+type GridRowOwnProps = {
+  /**
+   * One of: `Grid.Col`, `ScreenReaderContent`
+   */
+  children?: React.ReactNode // TODO: oneOf([GridCol, ScreenReaderContent])
+  rowSpacing?: 'none' | 'small' | 'medium' | 'large'
+  colSpacing?: 'none' | 'small' | 'medium' | 'large'
+  hAlign?: 'start' | 'center' | 'end' | 'space-around' | 'space-between'
+  vAlign?: 'top' | 'middle' | 'bottom' | 'stretch'
+  startAt?: GridBreakpoints
+  visualDebug?: boolean
+  isLastRow?: boolean
+}
+
+type PropKeys = keyof GridRowOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type GridRowProps = GridRowOwnProps &
+  WithStyleProps<GridTheme, GridRowStyle> &
+  OtherHTMLAttributes<GridRowOwnProps>
+
+type GridRowStyle = ComponentStyle<'gridRow'>
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'rowSpacing',
+  'colSpacing',
+  'hAlign',
+  'vAlign',
+  'startAt',
+  'visualDebug',
+  'isLastRow'
+]
+
+export type { GridRowProps, GridRowStyle }
+export { allowedProps }

package/src/GridRow/v2/styles.ts

@@ -0,0 +1,120 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { GridBreakpoints } from '../../utils/v1/GridTypes'
+import type { GridRowProps, GridRowStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['GridRow'],
+  props: GridRowProps
+): GridRowStyle => {
+  const {
+    hAlign,
+    vAlign,
+    rowSpacing,
+    colSpacing,
+    isLastRow,
+    startAt,
+    visualDebug
+  } = props
+
+  const getGridRowStyle = () => {
+    const hAlignVariants = {
+      center: { justifyContent: 'center' },
+      start: { justifyContent: 'flex-start' },
+      end: { justifyContent: 'flex-end' },
+      'space-around': { justifyContent: 'space-around' },
+      'space-between': { justifyContent: 'space-between' }
+    }
+
+    const vAlignVariants = {
+      top: { alignItems: 'flex-start' },
+      middle: { alignItems: 'center' },
+      bottom: { alignItems: 'flex-end' },
+      stretch: { alignItems: 'stretch' }
+    }
+
+    const colSpacingVariants = {
+      small: { margin: `0 calc(-1 * ${componentTheme.spacingSmall} / 2)` },
+      medium: { margin: `0 calc(-1 * ${componentTheme.spacingMedium} / 2)` },
+      large: { margin: `0 calc(-1 * ${componentTheme.spacingLarge} / 2)` },
+      none: {}
+    }
+
+    const rowSpacingVariants = {
+      small: { marginBottom: componentTheme.spacingSmall },
+      medium: { marginBottom: componentTheme.spacingMedium },
+      large: { marginBottom: componentTheme.spacingLarge },
+      none: { marginBottom: 0 }
+    }
+
+    return {
+      display: 'flex',
+      flexFlow: 'row nowrap',
+      ...(hAlign && hAlignVariants[hAlign]),
+      ...(vAlign && vAlignVariants[vAlign]),
+      ...(colSpacing && colSpacingVariants[colSpacing]),
+      ...(rowSpacing && rowSpacingVariants[rowSpacing]),
+      ...(isLastRow && { marginBottom: 0 })
+    }
+  }
+
+  const getStartAtVariants = (breakpoint: GridBreakpoints) =>
+    !!startAt && startAt === breakpoint ? { ...getGridRowStyle() } : {}
+
+  return {
+    gridRow: {
+      label: 'gridRow',
+      display: 'block',
+      boxSizing: 'border-box',
+
+      ...getStartAtVariants('small'),
+
+      [`@media screen and (min-width: ${componentTheme.mediumMin})`]: {
+        ...getStartAtVariants('medium')
+      },
+      [`@media screen and (min-width: ${componentTheme.largeMin})`]: {
+        ...getStartAtVariants('large')
+      },
+      [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: {
+        ...getStartAtVariants('x-large')
+      },
+
+      ...(visualDebug && { outline: '0.0625rem dashed blue' })
+    }
+  }
+}
+
+export default generateStyle

package/src/exports/a.ts

@@ -0,0 +1,30 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { Grid, GridRow, GridCol } from '../Grid/v1'
+
+export type { GridBreakpoints } from '../utils/v1/GridTypes'
+
+export type { GridProps } from '../Grid/v1/props'
+export type { GridRowProps } from '../GridRow/v1/props'
+export type { GridColProps } from '../GridCol/v1/props'