@zendeskgarden/react-grid 9.0.0-next.7 → 9.0.0-next.9

package/dist/index.esm.js

@@ -1,978 +0,0 @@
-/**
- * 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, { createContext, useContext, useMemo, useState, useCallback, forwardRef, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import styled, { css, ThemeContext } from 'styled-components';
-import { math, stripUnit } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, SELECTOR_FOCUS_VISIBLE, focusStyles, useDocument, useText } from '@zendeskgarden/react-theming';
-import { ChevronButton } from '@zendeskgarden/react-buttons';
-import { useId, composeEventHandlers } from '@zendeskgarden/container-utilities';
-import useResizeObserver from 'use-resize-observer';
-import { mergeRefs } from 'react-merge-refs';
-import { useSplitter } from '@zendeskgarden/container-splitter';
-import { Tooltip } from '@zendeskgarden/react-tooltips';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-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'];
-
-const COMPONENT_ID$7 = 'grid.col';
-const colorStyles$4 = props => {
-  const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.1);
-  return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
-};
-const flexStyles$1 = (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$1 = (minWidth, size, alignSelf, textAlign, offset, order, props) => {
-  return css(["@media (min-width:", "){", ";}"], minWidth, flexStyles$1(size, alignSelf, textAlign, offset, order, props));
-};
-const sizeStyles$5 = props => {
-  const padding = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
-  return css(["padding-right:", ";padding-left:", ";"], padding, padding);
-};
-const StyledCol = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledCol",
-  componentId: "sc-inuw62-0"
-})(["box-sizing:border-box;width:100%;", ";", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles$1(!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), props => sizeStyles$5(props), props => props.debug && colorStyles$4(props), props => mediaStyles$1(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props), props => mediaStyles$1(props.theme.breakpoints.sm, props.sm, props.alignSelfSm, props.textAlignSm, props.offsetSm, props.orderSm, props), props => mediaStyles$1(props.theme.breakpoints.md, props.md, props.alignSelfMd, props.textAlignMd, props.offsetMd, props.orderMd, props), props => mediaStyles$1(props.theme.breakpoints.lg, props.lg, props.alignSelfLg, props.textAlignLg, props.offsetLg, props.orderLg, props), props => mediaStyles$1(props.theme.breakpoints.xl, props.xl, props.alignSelfXl, props.textAlignXl, props.offsetXl, props.orderXl, props), props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledCol.defaultProps = {
-  columns: 12,
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$6 = 'grid.grid';
-const colorStyles$3 = props => {
-  const borderColor = getColorV8(props.theme.palette.crimson, 400, props.theme, 0.5);
-  const borderWidth = math(`${props.theme.borderWidths.sm} * 2`);
-  return css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
-};
-const sizeStyles$4 = props => {
-  const padding = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
-  return css(["padding-right:", ";padding-left:", ";"], padding, padding);
-};
-const StyledGrid = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.7'
-}).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', props => sizeStyles$4(props), props => props.debug && colorStyles$3(props), props => retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledGrid.defaultProps = {
-  gutters: 'md',
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = 'grid.row';
-const colorStyles$2 = props => {
-  const borderColor = getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
-  const borderWidth = props.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$3 = props => {
-  const margin = props.gutters ? math(`${props.theme.space[props.gutters]} / 2`) : 0;
-  return css(["margin-right:-", ";margin-left:-", ";"], margin, margin);
-};
-const StyledRow = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledRow",
-  componentId: "sc-xjsdg1-0"
-})(["display:flex;box-sizing:border-box;", " ", ";", ";", ";", ";", ";", ";", ";", ";"], props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll), props => sizeStyles$3(props), props => props.debug && colorStyles$2(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$5, props));
-StyledRow.defaultProps = {
-  wrapAll: 'wrap',
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$4 = 'pane';
-const StyledPane = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledPane",
-  componentId: "sc-1ltjst7-0"
-})(["position:relative;min-width:0;min-height:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledPane.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'pane.content';
-const StyledPaneContent = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledPaneContent",
-  componentId: "sc-1b38mbh-0"
-})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledPaneContent.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'pane.splitter';
-const colorStyles$1 = props => {
-  const color = getColorV8('neutralHue', 300, props.theme);
-  const hoverColor = getColorV8('primaryHue', 600, props.theme);
-  const activeColor = getColorV8('primaryHue', 800, props.theme);
-  return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, hoverColor, focusStyles({
-    theme: props.theme,
-    hue: hoverColor,
-    styles: {
-      backgroundColor: hoverColor
-    },
-    selector: '&:focus-visible::before'
-  }), activeColor);
-};
-const sizeStyles$2 = props => {
-  const size = math(`${props.theme.shadowWidths.md} * 2`);
-  const separatorSize = math(`${props.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 (props.orientation) {
-    case 'top':
-      cursor = 'row-resize';
-      top = offset;
-      width = '100%';
-      height = size;
-      separatorWidth = width;
-      separatorHeight = props.theme.borderWidths.sm;
-      break;
-    case 'bottom':
-      cursor = 'row-resize';
-      bottom = offset;
-      width = '100%';
-      height = size;
-      separatorWidth = width;
-      separatorHeight = props.theme.borderWidths.sm;
-      break;
-    case 'start':
-      cursor = 'col-resize';
-      top = 0;
-      width = size;
-      height = '100%';
-      separatorWidth = props.theme.borderWidths.sm;
-      separatorHeight = height;
-      if (props.theme.rtl) {
-        right = offset;
-      } else {
-        left = offset;
-      }
-      break;
-    case 'end':
-    default:
-      cursor = 'col-resize';
-      top = 0;
-      width = size;
-      height = '100%';
-      separatorWidth = props.theme.borderWidths.sm;
-      separatorHeight = height;
-      if (props.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, props.isFixed ? 'pointer' : cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
-};
-const StyledPaneSplitter = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.7'
-}).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$2, SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledPaneSplitter.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'pane.splitter_button';
-const getSize = theme => theme.space.base * 6;
-const sizeStyles$1 = _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-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.7',
-  isBasic: true,
-  isPill: true,
-  size: 'small'
-}).withConfig({
-  displayName: "StyledPaneSplitterButton",
-  componentId: "sc-zh032e-0"
-})(["", ";", ";", ";"], sizeStyles$1, transformStyles, props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledPaneSplitterButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'pane.splitter_button_container';
-const colorStyles = _ref => {
-  let {
-    theme
-  } = _ref;
-  const backgroundColor = getColorV8('background', 600 , theme);
-  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
-  return css(["box-shadow:", ";background-color:", ";"], boxShadow, backgroundColor);
-};
-const positionStyles = props => {
-  let top;
-  let left;
-  let right;
-  let bottom;
-  const size = getSize(props.theme);
-  const inset = `-${size / 2}px`;
-  if (props.placement === 'center' || props.splitterSize < size * 3) {
-    const center = `${props.splitterSize / 2 - size / 2}px`;
-    switch (`${props.orientation}-${props.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 (`${props.orientation}-${props.placement}-${props.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 = _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  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
-};
-
-const GridContext = createContext({
-  gutters: 'md'
-});
-const useGridContext = () => {
-  return useContext(GridContext);
-};
-
-const Col = React.forwardRef((_ref, ref) => {
-  let {
-    size,
-    ...props
-  } = _ref;
-  const {
-    columns,
-    gutters,
-    debug
-  } = useGridContext();
-  return React.createElement(StyledCol, _extends({
-    sizeAll: size,
-    columns: columns,
-    gutters: gutters,
-    debug: debug,
-    ref: ref
-  }, props));
-});
-Col.displayName = 'Col';
-Col.propTypes = {
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  xs: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
-  sm: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
-  md: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
-  lg: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
-  xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
-  alignSelf: PropTypes.oneOf(ALIGN_SELF),
-  alignSelfXs: PropTypes.oneOf(ALIGN_SELF),
-  alignSelfSm: PropTypes.oneOf(ALIGN_SELF),
-  alignSelfMd: PropTypes.oneOf(ALIGN_SELF),
-  alignSelfLg: PropTypes.oneOf(ALIGN_SELF),
-  alignSelfXl: PropTypes.oneOf(ALIGN_SELF),
-  textAlign: PropTypes.oneOf(TEXT_ALIGN),
-  textAlignXs: PropTypes.oneOf(TEXT_ALIGN),
-  textAlignSm: PropTypes.oneOf(TEXT_ALIGN),
-  textAlignMd: PropTypes.oneOf(TEXT_ALIGN),
-  textAlignLg: PropTypes.oneOf(TEXT_ALIGN),
-  textAlignXl: PropTypes.oneOf(TEXT_ALIGN),
-  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  offsetXs: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  offsetSm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  offsetMd: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  offsetLg: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  offsetXl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  order: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  orderXs: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  orderSm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  orderMd: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  orderLg: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  orderXl: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-
-const Row = React.forwardRef((_ref, ref) => {
-  let {
-    wrap,
-    ...props
-  } = _ref;
-  const {
-    gutters,
-    debug
-  } = useGridContext();
-  return React.createElement(StyledRow, _extends({
-    gutters: gutters,
-    debug: debug,
-    wrapAll: wrap,
-    ref: ref
-  }, props));
-});
-Row.displayName = 'Row';
-Row.propTypes = {
-  alignItems: PropTypes.oneOf(ALIGN_ITEMS),
-  alignItemsXs: PropTypes.oneOf(ALIGN_ITEMS),
-  alignItemsSm: PropTypes.oneOf(ALIGN_ITEMS),
-  alignItemsMd: PropTypes.oneOf(ALIGN_ITEMS),
-  alignItemsLg: PropTypes.oneOf(ALIGN_ITEMS),
-  alignItemsXl: PropTypes.oneOf(ALIGN_ITEMS),
-  justifyContent: PropTypes.oneOf(JUSTIFY_CONTENT),
-  justifyContentXs: PropTypes.oneOf(JUSTIFY_CONTENT),
-  justifyContentSm: PropTypes.oneOf(JUSTIFY_CONTENT),
-  justifyContentMd: PropTypes.oneOf(JUSTIFY_CONTENT),
-  justifyContentLg: PropTypes.oneOf(JUSTIFY_CONTENT),
-  justifyContentXl: PropTypes.oneOf(JUSTIFY_CONTENT),
-  wrap: PropTypes.oneOf(WRAP),
-  wrapXs: PropTypes.oneOf(WRAP),
-  wrapSm: PropTypes.oneOf(WRAP),
-  wrapMd: PropTypes.oneOf(WRAP),
-  wrapLg: PropTypes.oneOf(WRAP),
-  wrapXl: PropTypes.oneOf(WRAP)
-};
-
-const GridComponent = React.forwardRef((_ref, ref) => {
-  let {
-    columns,
-    debug,
-    ...props
-  } = _ref;
-  const value = useMemo(() => ({
-    columns,
-    gutters: props.gutters,
-    debug
-  }), [columns, props.gutters, debug]);
-  return React.createElement(GridContext.Provider, {
-    value: value
-  }, React.createElement(StyledGrid, _extends({
-    debug: debug,
-    ref: ref
-  }, props)));
-});
-GridComponent.displayName = 'Grid';
-GridComponent.propTypes = {
-  columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  gutters: PropTypes.oneOf(SPACE),
-  debug: PropTypes.bool
-};
-GridComponent.defaultProps = {
-  columns: 12,
-  gutters: 'md'
-};
-const Grid = GridComponent;
-Grid.Row = Row;
-Grid.Col = Col;
-
-const PaneProviderContext = createContext({});
-const usePaneProviderContextData = providerId => {
-  const context = useContext(PaneProviderContext);
-  const id = providerId || context.providerId;
-  return id && context.contextData ? context.contextData[id] : undefined;
-};
-const usePaneProviderContext = () => useContext(PaneProviderContext);
-
-const getPixelsPerFr = (totalFrs, totalDimension) => {
-  return totalDimension / totalFrs;
-};
-const convertToPixels = (values, pixelsPerFr) => {
-  return Object.entries(values).reduce((prev, _ref) => {
-    let [key, value] = _ref;
-    prev[key] = value * pixelsPerFr;
-    return prev;
-  }, {});
-};
-const PaneProvider = _ref2 => {
-  let {
-    id,
-    totalPanesWidth,
-    totalPanesHeight,
-    defaultRowValues,
-    defaultColumnValues,
-    rowValues,
-    columnValues,
-    onChange,
-    children
-  } = _ref2;
-  const isControlled = rowValues !== undefined && rowValues !== null && columnValues !== undefined && columnValues !== null;
-  const [rowState, setRowState] = useState(defaultRowValues || {});
-  const [columnState, setColumnState] = useState(defaultColumnValues || {});
-  const rowsTrack = isControlled ? rowValues : rowState;
-  const columnsTrack = isControlled ? columnValues : columnState;
-  const setRowsTrack = useCallback(values => {
-    if (isControlled && onChange) {
-      return onChange(values(rowsTrack), columnsTrack);
-    }
-    return setRowState(values);
-  }, [isControlled, onChange, setRowState, columnsTrack, rowsTrack]);
-  const setColumnsTrack = useCallback(values => {
-    if (isControlled && onChange) {
-      return onChange(rowsTrack, values(columnsTrack));
-    }
-    return setColumnState(values);
-  }, [isControlled, onChange, setColumnState, rowsTrack, columnsTrack]);
-  const totalFractions = useMemo(() => ({
-    rows: Object.values(rowsTrack).reduce((prev, value) => value + prev, 0),
-    columns: Object.values(columnsTrack).reduce((prev, value) => value + prev, 0)
-  }), [rowsTrack, columnsTrack]);
-  const pixelsPerFr = useMemo(() => ({
-    rows: getPixelsPerFr(totalFractions.rows, totalPanesHeight),
-    columns: getPixelsPerFr(totalFractions.columns, totalPanesWidth)
-  }), [totalFractions, totalPanesHeight, totalPanesWidth]);
-  const layoutStateInPixels = useMemo(() => ({
-    rows: convertToPixels(rowsTrack, pixelsPerFr.rows),
-    columns: convertToPixels(columnsTrack, pixelsPerFr.columns)
-  }), [rowsTrack, columnsTrack, pixelsPerFr]);
-  const layoutIndices = useMemo(() => {
-    const rowArray = Object.keys(rowsTrack);
-    const columnArray = Object.keys(columnsTrack);
-    const rows = rowArray.reduce((prev, key, index) => {
-      prev[key] = index;
-      return prev;
-    }, {});
-    const columns = columnArray.reduce((prev, key, index) => {
-      prev[key] = index;
-      return prev;
-    }, {});
-    return {
-      rows,
-      columns,
-      rowArray,
-      columnArray
-    };
-  }, [rowsTrack, columnsTrack]);
-  const setRowValue = useCallback((isTop, splitterId, value) => {
-    const {
-      rows,
-      rowArray
-    } = layoutIndices;
-    const stealFromTraversal = isTop ? -1 : 1;
-    const addToTraversal = 0;
-    setRowsTrack(state => {
-      const oldValue = rowsTrack[splitterId];
-      const stealFromIndex = rows[splitterId] + stealFromTraversal;
-      const addToIndex = rows[splitterId] + addToTraversal;
-      const stealFromKey = rowArray[stealFromIndex];
-      const addToKey = rowArray[addToIndex];
-      const difference = oldValue - value;
-      const nextState = {
-        ...state
-      };
-      nextState[addToKey] = rowsTrack[addToKey] - difference;
-      nextState[stealFromKey] = rowsTrack[stealFromKey] + difference;
-      return nextState;
-    });
-  }, [layoutIndices, rowsTrack, setRowsTrack]);
-  const setColumnValue = useCallback((isStart, splitterId, value) => {
-    const {
-      columns,
-      columnArray
-    } = layoutIndices;
-    const stealFromTraversal = isStart ? -1 : 1;
-    const addToTraversal = 0;
-    setColumnsTrack(state => {
-      const stealFromIndex = columns[splitterId] + stealFromTraversal;
-      const addToIndex = columns[splitterId] + addToTraversal;
-      const oldValue = columnsTrack[splitterId];
-      const stealFromKey = columnArray[stealFromIndex];
-      const addToKey = columnArray[addToIndex];
-      const difference = oldValue - value;
-      const nextState = {
-        ...state
-      };
-      nextState[addToKey] = columnsTrack[addToKey] - difference;
-      nextState[stealFromKey] = columnsTrack[stealFromKey] + difference;
-      return nextState;
-    });
-  }, [layoutIndices, columnsTrack, setColumnsTrack]);
-  const getColumnValue = useCallback((splitterKey, isPixels) => {
-    if (isPixels) {
-      return layoutStateInPixels.columns[splitterKey];
-    }
-    return columnsTrack[splitterKey];
-  }, [columnsTrack, layoutStateInPixels]);
-  const getRowValue = useCallback((splitterKey, isPixels) => {
-    if (isPixels) {
-      return layoutStateInPixels.rows[splitterKey];
-    }
-    return rowsTrack[splitterKey];
-  }, [rowsTrack, layoutStateInPixels]);
-  const getGridTemplateColumns = useCallback(isPixels => {
-    const {
-      columnArray
-    } = layoutIndices;
-    if (isPixels) {
-      return columnArray.map(col => `${layoutStateInPixels.columns[col]}px`).join(' ');
-    }
-    return columnArray.map(col => `${columnsTrack[col]}fr`).join(' ');
-  }, [layoutIndices, columnsTrack, layoutStateInPixels]);
-  const getGridTemplateRows = useCallback(isPixels => {
-    const {
-      rowArray
-    } = layoutIndices;
-    if (isPixels) {
-      return rowArray.map(row => `${layoutStateInPixels.rows[row]}px`).join(' ');
-    }
-    return rowArray.map(row => `${rowsTrack[row]}fr`).join(' ');
-  }, [layoutIndices, rowsTrack, layoutStateInPixels]);
-  const providerId = useId(id);
-  const parentPaneProviderContext = usePaneProviderContext();
-  const paneProviderContext = useMemo(() => providerId ? {
-    providerId,
-    contextData: {
-      ...parentPaneProviderContext.contextData,
-      [providerId]: {
-        columnState,
-        rowState,
-        setRowValue,
-        setColumnValue,
-        getRowValue,
-        getColumnValue,
-        totalPanesHeight,
-        totalPanesWidth,
-        pixelsPerFr
-      }
-    }
-  } : {}, [providerId, parentPaneProviderContext, rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
-  return React.createElement(PaneProviderContext.Provider, {
-    value: paneProviderContext
-  }, children?.({
-    id: providerId,
-    getRowValue,
-    getColumnValue,
-    getGridTemplateColumns,
-    getGridTemplateRows
-  }));
-};
-PaneProvider.displayName = 'PaneProvider';
-PaneProvider.propTypes = {
-  id: PropTypes.string,
-  totalPanesWidth: PropTypes.number.isRequired,
-  totalPanesHeight: PropTypes.number.isRequired,
-  defaultRowValues: PropTypes.object,
-  defaultColumnValues: PropTypes.object,
-  rowValues: PropTypes.object,
-  columnValues: PropTypes.object,
-  onChange: PropTypes.func,
-  children: PropTypes.func
-};
-
-const PaneContext = createContext({
-  setId: () => undefined
-});
-const usePaneContext = () => {
-  return useContext(PaneContext);
-};
-
-const PaneSplitterContext = createContext({
-  orientation: 'start',
-  min: 0,
-  max: 0,
-  layoutKey: '',
-  valueNow: 0,
-  size: 0,
-  isRow: false
-});
-const usePaneSplitterContext = () => {
-  return useContext(PaneSplitterContext);
-};
-
-const paneToSplitterOrientation = {
-  start: 'vertical',
-  end: 'vertical',
-  top: 'horizontal',
-  bottom: 'horizontal'
-};
-const orientationToDimension = {
-  start: 'columns',
-  end: 'columns',
-  top: 'rows',
-  bottom: 'rows'
-};
-const SplitterComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    providerId,
-    layoutKey,
-    min,
-    max,
-    orientation,
-    isFixed,
-    onMouseDown,
-    onTouchStart,
-    onKeyDown,
-    onClick,
-    ...props
-  } = _ref;
-  const paneProviderContext = usePaneProviderContextData(providerId);
-  const paneContext = usePaneContext();
-  const themeContext = useContext(ThemeContext);
-  const environment = useDocument(themeContext);
-  const isRow = orientationToDimension[orientation] === 'rows';
-  const separatorRef = useRef(null);
-  const splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
-  const pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
-  const value = isRow ? paneProviderContext?.getRowValue(layoutKey, true) : paneProviderContext?.getColumnValue(layoutKey, true);
-  const valueInFr = isRow ? paneProviderContext?.getRowValue(layoutKey) : paneProviderContext?.getColumnValue(layoutKey);
-  const {
-    getSeparatorProps,
-    getPrimaryPaneProps
-  } = useSplitter({
-    orientation: splitterOrientation,
-    isLeading: orientation === 'start' || orientation === 'top',
-    min: min * pixelsPerFr,
-    max: max * pixelsPerFr,
-    rtl: themeContext.rtl,
-    isFixed,
-    environment,
-    onChange: valueNow => {
-      if (isRow) {
-        return paneProviderContext?.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
-      }
-      return paneProviderContext?.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
-    },
-    valueNow: value,
-    separatorRef
-  });
-  useEffect(() => {
-    if (!paneContext.id) {
-      paneContext.setId(getPrimaryPaneProps().id);
-    }
-  }, [paneContext, getPrimaryPaneProps]);
-  const ariaLabel = useText(SplitterComponent, props, 'aria-label', `${splitterOrientation} splitter`);
-  const separatorProps = getSeparatorProps({
-    'aria-controls': paneContext.id,
-    'aria-label': ariaLabel,
-    onMouseDown,
-    onTouchStart,
-    onKeyDown,
-    onClick
-  });
-  const size = isRow ? separatorRef.current?.clientWidth : separatorRef.current?.clientHeight;
-  return React.createElement(PaneSplitterContext.Provider, {
-    value: useMemo(() => ({
-      orientation,
-      layoutKey,
-      min,
-      max,
-      valueNow: valueInFr,
-      size,
-      isRow
-    }), [orientation, layoutKey, min, max, valueInFr, size, isRow])
-  }, React.createElement(StyledPaneSplitter, _extends({
-    isFixed: isFixed,
-    orientation: orientation
-  }, separatorProps, props, {
-    ref: mergeRefs([separatorRef, ref])
-  })), children );
-});
-SplitterComponent.displayName = 'Pane.Splitter';
-SplitterComponent.propTypes = {
-  layoutKey: PropTypes.string.isRequired,
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  orientation: PropTypes.oneOf(ORIENTATION),
-  isFixed: PropTypes.bool
-};
-SplitterComponent.defaultProps = {
-  orientation: 'end'
-};
-const Splitter = SplitterComponent;
-
-const ContentComponent = forwardRef((props, ref) => {
-  const {
-    isVisible
-  } = usePaneContext();
-  return React.createElement(StyledPaneContent, _extends({
-    hidden: !isVisible,
-    ref: ref
-  }, props));
-});
-ContentComponent.displayName = 'Pane.Content';
-const Content = ContentComponent;
-
-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, _extends({
-    "aria-label": label
-  }, props, {
-    orientation: orientation,
-    isRotated: isMin,
-    ref: ref,
-    onClick: onClick,
-    onKeyDown: onKeyDown,
-    onMouseDown: onMouseDown
-  }))));
-});
-SplitterButtonComponent.displayName = 'Pane.SplitterButton';
-const SplitterButton = SplitterButtonComponent;
-
-const PaneComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  const [paneId, setPaneId] = useState();
-  const observerRef = useRef(null);
-  const {
-    width = 0,
-    height = 0
-  } = useResizeObserver({
-    ref: observerRef
-  });
-  const isVisible = useMemo(() => observerRef.current ? width > 0 && height > 0 : true, [width, height]);
-  const paneContext = useMemo(() => ({
-    isVisible,
-    id: paneId,
-    setId: id => setPaneId(id)
-  }), [paneId, isVisible]);
-  return React.createElement(PaneContext.Provider, {
-    value: paneContext
-  }, React.createElement(StyledPane, _extends({
-    id: paneId,
-    ref: mergeRefs([ref, observerRef])
-  }, props), children));
-});
-PaneComponent.displayName = 'Pane';
-const Pane = PaneComponent;
-Pane.Content = Content;
-Pane.Splitter = Splitter;
-Pane.SplitterButton = SplitterButton;
-
-export { ALIGN_ITEMS, ALIGN_SELF, Col, DIRECTION, Grid, JUSTIFY_CONTENT, Pane, PaneProvider, Row, SPACE, TEXT_ALIGN, WRAP };