@zendeskgarden/react-grid 9.0.0-next.2 → 9.0.0-next.21

package/dist/esm/elements/pane/components/SplitterButton.js

@@ -0,0 +1,91 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef, useCallback } from 'react';
+import { Tooltip } from '@zendeskgarden/react-tooltips';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
+import '../../../styled/StyledCol.js';
+import '../../../styled/StyledGrid.js';
+import '../../../styled/StyledRow.js';
+import '../../../styled/pane/StyledPane.js';
+import '../../../styled/pane/StyledPaneContent.js';
+import '../../../styled/pane/StyledPaneSplitter.js';
+import { StyledPaneSplitterButton } from '../../../styled/pane/StyledPaneSplitterButton.js';
+import { StyledPaneSplitterButtonContainer } from '../../../styled/pane/StyledPaneSplitterButtonContainer.js';
+import usePaneSplitterContext from '../../../utils/usePaneSplitterContext.js';
+import { usePaneProviderContextData } from '../../../utils/usePaneProviderContext.js';
+
+const SplitterButtonComponent = forwardRef((props, ref) => {
+  const {
+    label,
+    placement: defaultPlacement
+  } = props;
+  const {
+    orientation,
+    layoutKey,
+    min,
+    max,
+    isRow,
+    valueNow,
+    size,
+    providerId
+  } = usePaneSplitterContext();
+  const paneProviderContext = usePaneProviderContextData(providerId);
+  const isTop = orientation === 'top';
+  const isStart = orientation === 'start';
+  const isMin = valueNow === min;
+  let placement = defaultPlacement;
+  if (!defaultPlacement) {
+    if (isRow) {
+      placement = 'center';
+    } else {
+      placement = 'start';
+    }
+  }
+  const setValue = useCallback(value => {
+    if (isRow) {
+      paneProviderContext.setRowValue(isTop, layoutKey, value);
+    } else {
+      paneProviderContext.setColumnValue(isStart, layoutKey, value);
+    }
+  }, [isRow, isTop, isStart, layoutKey, paneProviderContext]);
+  const onClick = composeEventHandlers(props.onClick, () => {
+    if (isMin) {
+      setValue(max);
+    } else {
+      setValue(min);
+    }
+  });
+  const onKeyDown = composeEventHandlers(props.onKeyDown, event => event.stopPropagation()
+  );
+  const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.stopPropagation()
+  );
+  return React.createElement(StyledPaneSplitterButtonContainer, {
+    orientation: orientation,
+    placement: placement,
+    splitterSize: size || 0
+  }, React.createElement(Tooltip, {
+    content: label,
+    zIndex: 2,
+    style: {
+      cursor: 'default'
+    },
+    onMouseDown: e => e.stopPropagation()
+  }, React.createElement(StyledPaneSplitterButton, Object.assign({
+    "aria-label": label
+  }, props, {
+    orientation: orientation,
+    isRotated: isMin,
+    ref: ref,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown
+  }))));
+});
+SplitterButtonComponent.displayName = 'Pane.SplitterButton';
+const SplitterButton = SplitterButtonComponent;
+
+export { SplitterButton };

package/dist/esm/index.js

@@ -0,0 +1,12 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+export { Col } from './elements/Col.js';
+export { Grid } from './elements/Grid.js';
+export { Row } from './elements/Row.js';
+export { PaneProvider } from './elements/pane/PaneProvider.js';
+export { Pane } from './elements/pane/Pane.js';
+export { ALIGN_ITEMS, ALIGN_SELF, DIRECTION, JUSTIFY_CONTENT, SPACE, TEXT_ALIGN, WRAP } from './types/index.js';

package/dist/esm/styled/StyledCol.js

@@ -0,0 +1,89 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'grid.col';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.primaryEmphasis',
+    dark: {
+      transparency: theme.opacity[200]
+    },
+    light: {
+      transparency: theme.opacity[100]
+    }
+  });
+  return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
+};
+const flexStyles = (size, alignSelf, textAlign, offset, order, props) => {
+  const margin = offset && `${math(`${offset} / ${props.columns} * 100`)}%`;
+  let flexBasis;
+  let flexGrow;
+  let maxWidth;
+  let width;
+  if (typeof size === 'boolean') {
+    flexBasis = 0;
+    flexGrow = 1;
+    maxWidth = '100%';
+  } else if (size === 'auto') {
+    flexBasis = 'auto';
+    flexGrow = 0;
+    maxWidth = '100%';
+    width = 'auto';
+  } else if (size !== undefined) {
+    flexBasis = `${math(`${size} / ${props.columns} * 100`)}%`;
+    flexGrow = 0;
+    maxWidth = flexBasis;
+  }
+  let horizontalAlign;
+  if (textAlign === 'start') {
+    horizontalAlign = props.theme.rtl ? 'right' : 'left';
+  } else if (textAlign === 'end') {
+    horizontalAlign = props.theme.rtl ? 'left' : 'right';
+  } else {
+    horizontalAlign = textAlign;
+  }
+  let flexOrder;
+  if (order === 'first') {
+    flexOrder = -1;
+  } else if (order === 'last') {
+    flexOrder = math(`${props.columns} + 1`);
+  } else {
+    flexOrder = order;
+  }
+  return css(["flex-basis:", ";flex-grow:", ";flex-shrink:", ";align-self:", ";order:", ";margin-", ":", ";width:", ";max-width:", ";text-align:", ";"], flexBasis, flexGrow, size && 0, alignSelf === 'start' || alignSelf === 'end' ? `flex-${alignSelf}` : alignSelf, flexOrder, props.theme.rtl ? 'right' : 'left', margin, width, maxWidth, horizontalAlign);
+};
+const mediaStyles = (minWidth, size, alignSelf, textAlign, offset, order, props) => {
+  return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(size, alignSelf, textAlign, offset, order, props));
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    gutters
+  } = _ref2;
+  const padding = gutters ? math(`${theme.space[gutters]} / 2`) : 0;
+  return css(["padding-right:", ";padding-left:", ";"], padding, padding);
+};
+const StyledCol = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledCol",
+  componentId: "sc-inuw62-0"
+})(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(!props.sizeAll && (props.xs || props.sm || props.md || props.lg || props.xl) ? undefined : props.sizeAll || false, props.alignSelf, props.textAlign, props.offset, props.order, props), sizeStyles, props => props.debug && colorStyles(props), props => mediaStyles(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props), props => mediaStyles(props.theme.breakpoints.sm, props.sm, props.alignSelfSm, props.textAlignSm, props.offsetSm, props.orderSm, props), props => mediaStyles(props.theme.breakpoints.md, props.md, props.alignSelfMd, props.textAlignMd, props.offsetMd, props.orderMd, props), props => mediaStyles(props.theme.breakpoints.lg, props.lg, props.alignSelfLg, props.textAlignLg, props.offsetLg, props.orderLg, props), props => mediaStyles(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCol.defaultProps = {
+  columns: 12,
+  theme: DEFAULT_THEME
+};
+
+export { StyledCol };

package/dist/esm/styled/StyledGrid.js

@@ -0,0 +1,49 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'grid.grid';
+const colorStyles = _ref => {
+  let {
+    theme,
+    debug
+  } = _ref;
+  const borderColor = debug && getColor({
+    theme,
+    hue: 'crimson',
+    shade: 700,
+    transparency: theme.opacity[600]
+  });
+  const borderWidth = debug && math(`${theme.borderWidths.sm} * 2`);
+  return css(["color-scheme:only ", ";box-shadow:", ";"], theme.colors.base, debug && `
+      -${borderWidth} 0 0 0 ${borderColor},
+      ${borderWidth} 0 0 0 ${borderColor}
+    `);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    gutters
+  } = _ref2;
+  const padding = gutters ? math(`${theme.space[gutters]} / 2`) : 0;
+  return css(["padding-right:", ";padding-left:", ";"], padding, padding);
+};
+const StyledGrid = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledGrid",
+  componentId: "sc-oxgg5i-0"
+})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGrid.defaultProps = {
+  gutters: 'md',
+  theme: DEFAULT_THEME
+};
+
+export { StyledGrid };

package/dist/esm/styled/StyledRow.js

@@ -0,0 +1,65 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'grid.row';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    hue: 'mint',
+    shade: 700,
+    transparency: theme.opacity[600]
+  });
+  const borderWidth = theme.borderWidths.sm;
+  return css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
+};
+const flexStyles = (alignItems, justifyContent, wrap) => {
+  let flexAlignItems;
+  let flexJustifyContent;
+  if (alignItems === 'start' || alignItems === 'end') {
+    flexAlignItems = `flex-${alignItems}`;
+  } else {
+    flexAlignItems = alignItems;
+  }
+  if (justifyContent === 'start' || justifyContent === 'end') {
+    flexJustifyContent = `flex-${justifyContent}`;
+  } else if (justifyContent === 'between' || justifyContent === 'around') {
+    flexJustifyContent = `space-${justifyContent}`;
+  } else {
+    flexJustifyContent = justifyContent;
+  }
+  return css(["flex-wrap:", ";align-items:", ";justify-content:", ";"], wrap, flexAlignItems, flexJustifyContent);
+};
+const mediaStyles = (minWidth, alignItems, justifyContent, wrap) => {
+  return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles(alignItems, justifyContent, wrap));
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    gutters
+  } = _ref2;
+  const margin = gutters ? math(`${theme.space[gutters]} / 2`) : 0;
+  return css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
+};
+const StyledRow = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledRow",
+  componentId: "sc-xjsdg1-0"
+})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll), sizeStyles, props => props.debug && colorStyles(props), props => mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs), props => mediaStyles(props.theme.breakpoints.sm, props.alignItemsSm, props.justifyContentSm, props.wrapSm), props => mediaStyles(props.theme.breakpoints.md, props.alignItemsMd, props.justifyContentMd, props.wrapMd), props => mediaStyles(props.theme.breakpoints.lg, props.alignItemsLg, props.justifyContentLg, props.wrapLg), props => mediaStyles(props.theme.breakpoints.xl, props.alignItemsXl, props.justifyContentXl, props.wrapXl), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRow.defaultProps = {
+  wrapAll: 'wrap',
+  theme: DEFAULT_THEME
+};
+
+export { StyledRow };

package/dist/esm/styled/pane/StyledPane.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pane';
+const StyledPane = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledPane",
+  componentId: "sc-1ltjst7-0"
+})(["position:relative;min-width:0;min-height:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPane.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPane };

package/dist/esm/styled/pane/StyledPaneContent.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pane.content';
+const StyledPaneContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledPaneContent",
+  componentId: "sc-1b38mbh-0"
+})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPaneContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPaneContent };

package/dist/esm/styled/pane/StyledPaneSplitter.js

@@ -0,0 +1,119 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pane.splitter';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const color = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const options = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const hoverColor = getColor(options);
+  const activeColor = getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
+  return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, hoverColor, focusStyles({
+    theme,
+    styles: {
+      backgroundColor: hoverColor
+    },
+    selector: '&:focus-visible::before'
+  }), activeColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    orientation,
+    isFixed
+  } = _ref2;
+  const size = math(`${theme.shadowWidths.md} * 2`);
+  const separatorSize = math(`${theme.borderWidths.sm} * 2`);
+  const offset = math(`-${size} / 2`);
+  let cursor;
+  let top;
+  let right;
+  let left;
+  let bottom;
+  let width;
+  let height;
+  let separatorWidth;
+  let separatorHeight;
+  switch (orientation) {
+    case 'top':
+      cursor = 'row-resize';
+      top = offset;
+      width = '100%';
+      height = size;
+      separatorWidth = width;
+      separatorHeight = theme.borderWidths.sm;
+      break;
+    case 'bottom':
+      cursor = 'row-resize';
+      bottom = offset;
+      width = '100%';
+      height = size;
+      separatorWidth = width;
+      separatorHeight = theme.borderWidths.sm;
+      break;
+    case 'start':
+      cursor = 'col-resize';
+      top = 0;
+      width = size;
+      height = '100%';
+      separatorWidth = theme.borderWidths.sm;
+      separatorHeight = height;
+      if (theme.rtl) {
+        right = offset;
+      } else {
+        left = offset;
+      }
+      break;
+    case 'end':
+    default:
+      cursor = 'col-resize';
+      top = 0;
+      width = size;
+      height = '100%';
+      separatorWidth = theme.borderWidths.sm;
+      separatorHeight = height;
+      if (theme.rtl) {
+        left = offset;
+      } else {
+        right = offset;
+      }
+      break;
+  }
+  const dimensionProperty = width === '100%' ? 'height' : 'width';
+  return css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&:focus::before,&:focus-visible::before{", ":", ";}&:focus-visible::before{border-radius:", ";}"], top, right, bottom, left, isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, theme.borderRadii.md);
+};
+const StyledPaneSplitter = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledPaneSplitter",
+  componentId: "sc-jylemn-0"
+})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPaneSplitter.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPaneSplitter };

package/dist/esm/styled/pane/StyledPaneSplitterButton.js

@@ -0,0 +1,46 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { ChevronButton } from '@zendeskgarden/react-buttons';
+
+const getSize = theme => theme.space.base * 6;
+const sizeStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const size = `${getSize(theme)}px`;
+  return css(["width:", ";min-width:", ";height:", ";"], size, size, size);
+};
+const transformStyles = props => {
+  let degrees = 0;
+  if (props.isRotated) {
+    degrees = props.theme.rtl ? -180 : 180;
+  }
+  if (props.orientation === 'end') {
+    degrees += props.theme.rtl ? -90 : 90;
+  } else if (props.orientation === 'start') {
+    degrees += props.theme.rtl ? 90 : -90;
+  } else if (props.orientation === 'bottom') {
+    degrees += 180;
+  }
+  return css(["& > svg{transform:rotate(", "deg);}"], degrees);
+};
+const StyledPaneSplitterButton = styled(ChevronButton).attrs({
+  'data-garden-version': '9.0.0-next.21',
+  isBasic: true,
+  isPill: true,
+  size: 'small'
+}).withConfig({
+  displayName: "StyledPaneSplitterButton",
+  componentId: "sc-zh032e-0"
+})(["", ";", ";"], sizeStyles, transformStyles);
+StyledPaneSplitterButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPaneSplitterButton, getSize };

package/dist/esm/styled/pane/StyledPaneSplitterButtonContainer.js

@@ -0,0 +1,128 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { stripUnit, math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledPaneSplitter } from './StyledPaneSplitter.js';
+import { getSize } from './StyledPaneSplitterButton.js';
+
+const COMPONENT_ID = 'pane.splitter_button_container';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor({
+    variable: 'shadow.small',
+    theme
+  }));
+  return css(["box-shadow:", ";background-color:", ";"], boxShadow, backgroundColor);
+};
+const positionStyles = _ref2 => {
+  let {
+    theme,
+    placement,
+    splitterSize,
+    orientation
+  } = _ref2;
+  let top;
+  let left;
+  let right;
+  let bottom;
+  const size = getSize(theme);
+  const inset = `-${size / 2}px`;
+  if (placement === 'center' || splitterSize < size * 3) {
+    const center = `${splitterSize / 2 - size / 2}px`;
+    switch (`${orientation}-${theme.rtl ? 'rtl' : 'ltr'}`) {
+      case 'top-ltr':
+      case 'top-rtl':
+        top = inset;
+        left = center;
+        break;
+      case 'start-ltr':
+      case 'end-rtl':
+        top = center;
+        left = inset;
+        break;
+      case 'end-ltr':
+      case 'start-rtl':
+        top = center;
+        right = inset;
+        break;
+      case 'bottom-ltr':
+      case 'bottom-rtl':
+        bottom = inset;
+        right = center;
+        break;
+    }
+  } else {
+    const offset = `${size}px`;
+    switch (`${orientation}-${placement}-${theme.rtl ? 'rtl' : 'ltr'}`) {
+      case 'top-end-ltr':
+      case 'top-end-rtl':
+      case 'top-start-rtl':
+        top = inset;
+        right = offset;
+        break;
+      case 'bottom-end-ltr':
+      case 'bottom-end-rtl':
+      case 'bottom-start-rtl':
+        bottom = inset;
+        right = offset;
+        break;
+      case 'start-start-ltr':
+      case 'end-start-rtl':
+        top = offset;
+        left = inset;
+        break;
+      case 'start-end-ltr':
+      case 'end-end-rtl':
+        bottom = offset;
+        left = inset;
+        break;
+      case 'end-start-ltr':
+      case 'start-start-rtl':
+        top = offset;
+        right = inset;
+        break;
+      case 'end-end-ltr':
+      case 'start-end-rtl':
+        bottom = offset;
+        right = inset;
+        break;
+      case 'top-start-ltr':
+        top = inset;
+        left = offset;
+        break;
+      case 'bottom-start-ltr':
+        bottom = inset;
+        left = offset;
+        break;
+    }
+  }
+  return css(["top:", ";right:", ";bottom:", ";left:", ";"], top, right, bottom, left);
+};
+const sizeStyles = _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  const size = getSize(theme);
+  return css(["border-radius:", "px;width:", "px;height:", "px;"], size, size, size);
+};
+const minimumSplitterSize = theme => stripUnit(math(`${theme.shadowWidths.md} * 2 + ${getSize(theme)}`));
+const StyledPaneSplitterButtonContainer = styled.div.withConfig({
+  displayName: "StyledPaneSplitterButtonContainer",
+  componentId: "sc-1w84y62-0"
+})(["display:", ";position:absolute;transition:box-shadow 0.1s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;z-index:2;", ";", ";", ";&:hover,&:focus-within,", ":hover ~ &,", ":focus-visible ~ &{opacity:1;}", ";"], props => props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined, positionStyles, sizeStyles, colorStyles, StyledPaneSplitter, StyledPaneSplitter, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPaneSplitterButtonContainer.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPaneSplitterButtonContainer };

package/dist/esm/types/index.js

@@ -0,0 +1,16 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const ALIGN_ITEMS = ['start', 'end', 'center', 'baseline', 'stretch'];
+const ALIGN_SELF = ['auto', ...ALIGN_ITEMS];
+const DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'];
+const JUSTIFY_CONTENT = ['start', 'end', 'center', 'between', 'around'];
+const TEXT_ALIGN = ['start', 'end', 'center', 'justify'];
+const SPACE = [false, 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+const WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
+const ORIENTATION = ['top', 'bottom', 'start', 'end'];
+
+export { ALIGN_ITEMS, ALIGN_SELF, DIRECTION, JUSTIFY_CONTENT, ORIENTATION, SPACE, TEXT_ALIGN, WRAP };

package/dist/esm/utils/useGridContext.js

@@ -0,0 +1,16 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const GridContext = createContext({
+  gutters: 'md'
+});
+const useGridContext = () => {
+  return useContext(GridContext);
+};
+
+export { GridContext, useGridContext as default };