@zendeskgarden/react-grid 8.53.1 → 8.54.0

package/dist/index.cjs.js

@@ -191,7 +191,7 @@ var WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
 var ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
 var COMPONENT_ID$6 = 'grid.col';
-var colorStyles$3 = function colorStyles(props) {
+var colorStyles$4 = function colorStyles(props) {
   var backgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.1);
   return styled.css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
@@ -242,7 +242,7 @@ var sizeStyles$4 = function sizeStyles(props) {
 };
 var StyledCol = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -251,7 +251,7 @@ var StyledCol = styled__default["default"].div.attrs({
 }, function (props) {
   return sizeStyles$4(props);
 }, function (props) {
-  return props.debug && colorStyles$3(props);
+  return props.debug && colorStyles$4(props);
 }, function (props) {
   return mediaStyles$1(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props);
 }, function (props) {
@@ -271,7 +271,7 @@ StyledCol.defaultProps = {
 };
 
 var COMPONENT_ID$5 = 'grid.grid';
-var colorStyles$2 = function colorStyles(props) {
+var colorStyles$3 = function colorStyles(props) {
   var borderColor = reactTheming.getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
   var borderWidth = polished.math("".concat(props.theme.borderWidths.sm, " * 2"));
   return styled.css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
@@ -282,7 +282,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledGrid = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -291,7 +291,7 @@ var StyledGrid = styled__default["default"].div.attrs({
 }, function (props) {
   return sizeStyles$3(props);
 }, function (props) {
-  return props.debug && colorStyles$2(props);
+  return props.debug && colorStyles$3(props);
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
 });
@@ -301,7 +301,7 @@ StyledGrid.defaultProps = {
 };
 
 var COMPONENT_ID$4 = 'grid.row';
-var colorStyles$1 = function colorStyles(props) {
+var colorStyles$2 = function colorStyles(props) {
   var borderColor = reactTheming.getColor(props.theme.palette.mint, 600, props.theme, 0.5);
   var borderWidth = props.theme.borderWidths.sm;
   return styled.css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
@@ -332,7 +332,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledRow = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -341,7 +341,7 @@ var StyledRow = styled__default["default"].div.attrs({
 }, function (props) {
   return sizeStyles$2(props);
 }, function (props) {
-  return props.debug && colorStyles$1(props);
+  return props.debug && colorStyles$2(props);
 }, function (props) {
   return mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs);
 }, function (props) {
@@ -363,7 +363,7 @@ StyledRow.defaultProps = {
 var COMPONENT_ID$3 = 'pane';
 var StyledPane = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -377,7 +377,7 @@ StyledPane.defaultProps = {
 var COMPONENT_ID$2 = 'pane.content';
 var StyledPaneContent = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -389,15 +389,16 @@ StyledPaneContent.defaultProps = {
 };
 
 var COMPONENT_ID$1 = 'pane.splitter';
-var colorStyles = function colorStyles(props) {
+var colorStyles$1 = function colorStyles(props) {
   var color = reactTheming.getColor('neutralHue', 300, props.theme);
   var hoverColor = reactTheming.getColor('primaryHue', 600, props.theme);
   var activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
   var boxShadow = props.theme.shadows.md(polished.rgba(hoverColor, 0.35));
-  return styled.css(["&::before{background-color:", ";}&:hover::before,&[data-garden-focus-visible]::before{background-color:", ";}&[data-garden-focus-visible]::before{box-shadow:", ";}&:active::before{background-color:", ";}"], color, hoverColor, boxShadow, activeColor);
+  return styled.css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}&[data-garden-focus-visible]::before{box-shadow:", ";background-color:", ";}&:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, boxShadow, hoverColor, props.isHovered && activeColor);
 };
 var sizeStyles$1 = function sizeStyles(props) {
   var size = polished.math("".concat(props.theme.shadowWidths.md, " * 2"));
+  var separatorSize = polished.math("".concat(props.theme.borderWidths.sm, " * 2"));
   var offset = polished.math("-".concat(size, " / 2"));
   var cursor;
   var top;
@@ -417,19 +418,6 @@ var sizeStyles$1 = function sizeStyles(props) {
       separatorWidth = width;
       separatorHeight = props.theme.borderWidths.sm;
       break;
-    case 'end':
-      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;
     case 'bottom':
       cursor = 'row-resize';
       bottom = offset;
@@ -451,16 +439,31 @@ var sizeStyles$1 = function sizeStyles(props) {
         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;
   }
-  return styled.css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before,&[data-garden-focus-visible]::before,&:focus::before{", ":", ";}&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, cursor, width, height, separatorWidth, separatorHeight, width === '100%' ? 'height' : 'width', polished.math("".concat(props.theme.borderWidths.sm, " * 2")), props.theme.borderRadii.md);
+  var dimensionProperty = width === '100%' ? 'height' : 'width';
+  return styled.css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&[data-garden-focus-visible]::before,&:focus::before{", ":", ";}&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
 };
 var StyledPaneSplitter = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";&:focus{outline:none;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, colorStyles, function (props) {
+})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";&:focus{outline:none;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, colorStyles$1, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
 });
 StyledPaneSplitter.defaultProps = {
@@ -482,42 +485,51 @@ var transformStyles = function transformStyles(props) {
   }
   return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
+var colorStyles = function colorStyles(_ref) {
+  var theme = _ref.theme;
+  var boxShadow = theme.shadows.lg("".concat(theme.space.base, "px"), "".concat(theme.space.base * 2, "px"), reactTheming.getColor('chromeHue', 600, theme, 0.15));
+  var focusBoxShadow = theme.shadows.md(reactTheming.getColor('primaryHue', 600, theme, 0.35));
+  return styled.css(["box-shadow:", ";&[data-garden-focus-visible]{box-shadow:", ",", ";}"], boxShadow, focusBoxShadow, boxShadow);
+};
 var sizeStyles = function sizeStyles(props) {
   var size = "".concat(props.theme.space.base * 6, "px");
+  var display = props.splitterSize <= polished.stripUnit(polished.math("".concat(props.theme.shadowWidths.md, " * 2 + ").concat(size))) && 'none';
   var isVertical = props.orientation === 'start' || props.orientation === 'end';
   var top;
   var left;
   var right;
   var bottom;
-  if (props.placement === 'start') {
-    if (isVertical) {
-      top = size;
-    } else if (props.theme.rtl) {
-      right = size;
-    } else {
-      left = size;
-    }
-  } else if (props.placement === 'end') {
-    if (isVertical) {
-      bottom = size;
-    } else if (props.theme.rtl) {
-      left = size;
-    } else {
-      right = size;
+  if (props.splitterSize >= polished.stripUnit(polished.math("".concat(size, " * 3")))) {
+    if (props.placement === 'start') {
+      if (isVertical) {
+        top = size;
+      } else if (props.theme.rtl) {
+        right = size;
+      } else {
+        left = size;
+      }
+    } else if (props.placement === 'end') {
+      if (isVertical) {
+        bottom = size;
+      } else if (props.theme.rtl) {
+        left = size;
+      } else {
+        right = size;
+      }
     }
   }
-  return styled.css(["top:", ";right:", ";bottom:", ";left:", ";width:", ";min-width:", ";height:", ";"], top, right, bottom, left, size, size, size);
+  return styled.css(["display:", ";top:", ";right:", ";bottom:", ";left:", ";width:", ";min-width:", ";height:", ";"], display, top, right, bottom, left, size, size, size);
 };
 var StyledPaneSplitterButton = styled__default["default"](reactButtons.ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.53.1',
+  'data-garden-version': '8.54.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;&[data-garden-focus-visible],", ":hover &,", "[data-garden-focus-visible] &{opacity:1;}", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";"], StyledPaneSplitter, StyledPaneSplitter, sizeStyles, transformStyles, function (props) {
+})(["position:absolute;transition:background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;&[data-garden-focus-visible],", ":hover &,", "[data-garden-focus-visible] &{opacity:1;}", ";", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";"], StyledPaneSplitter, StyledPaneSplitter, sizeStyles, transformStyles, colorStyles, function (props) {
   return props.theme.colors.background;
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
@@ -870,6 +882,7 @@ var PaneSplitterContext = React.createContext({
   max: 0,
   layoutKey: '',
   valueNow: 0,
+  size: 0,
   isRow: false
 });
 var usePaneSplitterContext = function usePaneSplitterContext() {
@@ -877,17 +890,11 @@ var usePaneSplitterContext = function usePaneSplitterContext() {
 };
 
 var _excluded$1 = ["providerId", "layoutKey", "min", "max", "orientation"];
-var orientationToPosition = {
-  start: containerSplitter.SplitterPosition.LEADS,
-  end: containerSplitter.SplitterPosition.TRAILS,
-  top: containerSplitter.SplitterPosition.LEADS,
-  bottom: containerSplitter.SplitterPosition.TRAILS
-};
 var paneToSplitterOrientation = {
-  start: containerSplitter.SplitterOrientation.VERTICAL,
-  end: containerSplitter.SplitterOrientation.VERTICAL,
-  top: containerSplitter.SplitterOrientation.HORIZONTAL,
-  bottom: containerSplitter.SplitterOrientation.HORIZONTAL
+  start: 'vertical',
+  end: 'vertical',
+  top: 'horizontal',
+  bottom: 'horizontal'
 };
 var orientationToDimension = {
   start: 'columns',
@@ -896,6 +903,7 @@ var orientationToDimension = {
   bottom: 'rows'
 };
 var SplitterComponent = React.forwardRef(function (_ref, ref) {
+  var _separatorRef$current, _separatorRef$current2;
   var providerId = _ref.providerId,
       layoutKey = _ref.layoutKey,
       min = _ref.min,
@@ -905,27 +913,32 @@ var SplitterComponent = React.forwardRef(function (_ref, ref) {
   var paneProviderContext = usePaneProviderContextData(providerId);
   var paneContext = usePaneContext();
   var themeContext = React.useContext(styled.ThemeContext);
-  var position = orientationToPosition[orientation];
+  var environment = reactTheming.useDocument(themeContext);
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
   var isRow = orientationToDimension[orientation] === 'rows';
-  var splitterOrientation = paneToSplitterOrientation[orientation];
+  var separatorRef = React.useRef(null);
+  var splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
   var pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
   var value = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey, true);
   var valueInFr = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey);
   var _useSplitter = containerSplitter.useSplitter({
-    type: containerSplitter.SplitterType.VARIABLE,
     orientation: splitterOrientation,
-    position: position,
+    isLeading: orientation === 'start' || orientation === 'top',
     min: min * pixelsPerFr,
     max: max * pixelsPerFr,
     rtl: themeContext.rtl,
-    environment: window,
+    environment: environment,
     onChange: function onChange(valueNow) {
       if (isRow) {
         return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
       return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
-    valueNow: value
+    valueNow: value,
+    separatorRef: separatorRef
   }),
       getSeparatorProps = _useSplitter.getSeparatorProps,
       getPrimaryPaneProps = _useSplitter.getPrimaryPaneProps;
@@ -934,9 +947,17 @@ var SplitterComponent = React.forwardRef(function (_ref, ref) {
       paneContext.setId(getPrimaryPaneProps().id);
     }
   }, [paneContext, getPrimaryPaneProps]);
+  var ariaLabel = reactTheming.useText(SplitterComponent, props, 'aria-label', "".concat(splitterOrientation, " splitter"));
   var separatorProps = getSeparatorProps({
-    'aria-controls': paneContext.id
+    'aria-controls': paneContext.id,
+    'aria-label': ariaLabel
   });
+  var size = isRow ? (_separatorRef$current = separatorRef.current) === null || _separatorRef$current === void 0 ? void 0 : _separatorRef$current.clientWidth : (_separatorRef$current2 = separatorRef.current) === null || _separatorRef$current2 === void 0 ? void 0 : _separatorRef$current2.clientHeight;
+  var onMouseOver = React.useMemo(function () {
+    return containerUtilities.composeEventHandlers(props.onMouseOver, function (event) {
+      return setIsHovered(event.target === separatorRef.current);
+    });
+  }, [props.onMouseOver, separatorRef]);
   return React__default["default"].createElement(PaneSplitterContext.Provider, {
     value: React.useMemo(function () {
       return {
@@ -945,13 +966,16 @@ var SplitterComponent = React.forwardRef(function (_ref, ref) {
         min: min,
         max: max,
         valueNow: valueInFr,
+        size: size,
         isRow: isRow
       };
-    }, [orientation, layoutKey, min, max, valueInFr, isRow])
+    }, [orientation, layoutKey, min, max, valueInFr, size, isRow])
   }, React__default["default"].createElement(StyledPaneSplitter, _extends({
+    isHovered: isHovered,
     orientation: orientation
   }, separatorProps, props, {
-    ref: mergeRefs__default["default"]([separatorProps.ref, ref])
+    onMouseOver: onMouseOver,
+    ref: mergeRefs__default["default"]([separatorRef, ref])
   })));
 });
 SplitterComponent.displayName = 'Pane.Splitter';
@@ -984,6 +1008,7 @@ var SplitterButtonComponent = React.forwardRef(function (props, ref) {
       max = _usePaneSplitterConte.max,
       isRow = _usePaneSplitterConte.isRow,
       valueNow = _usePaneSplitterConte.valueNow,
+      size = _usePaneSplitterConte.size,
       providerId = _usePaneSplitterConte.providerId;
   var paneProviderContext = usePaneProviderContextData(providerId);
   var isTop = orientation === 'top';
@@ -1000,9 +1025,9 @@ var SplitterButtonComponent = React.forwardRef(function (props, ref) {
   var setValue = React.useCallback(function (value) {
     if (isRow) {
       paneProviderContext.setRowValue(isTop, layoutKey, value);
-      return;
+    } else {
+      paneProviderContext.setColumnValue(isStart, layoutKey, value);
     }
-    paneProviderContext.setColumnValue(isStart, layoutKey, value);
   }, [isRow, isTop, isStart, layoutKey, paneProviderContext]);
   var onClick = containerUtilities.composeEventHandlers(props.onClick, function () {
     if (isMin) {
@@ -1015,17 +1040,29 @@ var SplitterButtonComponent = React.forwardRef(function (props, ref) {
     return event.stopPropagation();
   }
   );
+  var onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, function (event) {
+    return event.stopPropagation();
+  }
+  );
   return React__default["default"].createElement(reactTooltips.Tooltip, {
-    content: label
+    content: label,
+    style: {
+      cursor: 'default'
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    }
   }, React__default["default"].createElement(StyledPaneSplitterButton, _extends({
     "aria-label": label
   }, props, {
     placement: placement,
     orientation: orientation,
     isRotated: isMin,
+    splitterSize: size || 0,
     ref: ref,
     onClick: onClick,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown
   })));
 });
 SplitterButtonComponent.displayName = 'Pane.SplitterButton';

package/dist/index.esm.js

@@ -5,15 +5,15 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { createContext, useContext, useMemo, useState, useCallback, forwardRef, useEffect } from 'react';
+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, rgba } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { math, rgba, stripUnit } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, useDocument, useText } from '@zendeskgarden/react-theming';
 import { ChevronButton } from '@zendeskgarden/react-buttons';
 import { useId, composeEventHandlers } from '@zendeskgarden/container-utilities';
 import mergeRefs from 'react-merge-refs';
-import { SplitterPosition, SplitterOrientation, useSplitter, SplitterType } from '@zendeskgarden/container-splitter';
+import { useSplitter } from '@zendeskgarden/container-splitter';
 import { Tooltip } from '@zendeskgarden/react-tooltips';
 
 function ownKeys(object, enumerableOnly) {
@@ -180,7 +180,7 @@ var WRAP = ['nowrap', 'wrap', 'wrap-reverse'];
 var ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
 var COMPONENT_ID$6 = 'grid.col';
-var colorStyles$3 = function colorStyles(props) {
+var colorStyles$4 = function colorStyles(props) {
   var backgroundColor = getColor('primaryHue', 600, props.theme, 0.1);
   return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
@@ -231,7 +231,7 @@ var sizeStyles$4 = function sizeStyles(props) {
 };
 var StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -240,7 +240,7 @@ var StyledCol = styled.div.attrs({
 }, function (props) {
   return sizeStyles$4(props);
 }, function (props) {
-  return props.debug && colorStyles$3(props);
+  return props.debug && colorStyles$4(props);
 }, function (props) {
   return mediaStyles$1(props.theme.breakpoints.xs, props.xs, props.alignSelfXs, props.textAlignXs, props.offsetXs, props.orderXs, props);
 }, function (props) {
@@ -260,7 +260,7 @@ StyledCol.defaultProps = {
 };
 
 var COMPONENT_ID$5 = 'grid.grid';
-var colorStyles$2 = function colorStyles(props) {
+var colorStyles$3 = function colorStyles(props) {
   var borderColor = getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
   var borderWidth = math("".concat(props.theme.borderWidths.sm, " * 2"));
   return css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
@@ -271,7 +271,7 @@ var sizeStyles$3 = function sizeStyles(props) {
 };
 var StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -280,7 +280,7 @@ var StyledGrid = styled.div.attrs({
 }, function (props) {
   return sizeStyles$3(props);
 }, function (props) {
-  return props.debug && colorStyles$2(props);
+  return props.debug && colorStyles$3(props);
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID$5, props);
 });
@@ -290,7 +290,7 @@ StyledGrid.defaultProps = {
 };
 
 var COMPONENT_ID$4 = 'grid.row';
-var colorStyles$1 = function colorStyles(props) {
+var colorStyles$2 = function colorStyles(props) {
   var borderColor = getColor(props.theme.palette.mint, 600, props.theme, 0.5);
   var borderWidth = props.theme.borderWidths.sm;
   return css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
@@ -321,7 +321,7 @@ var sizeStyles$2 = function sizeStyles(props) {
 };
 var StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -330,7 +330,7 @@ var StyledRow = styled.div.attrs({
 }, function (props) {
   return sizeStyles$2(props);
 }, function (props) {
-  return props.debug && colorStyles$1(props);
+  return props.debug && colorStyles$2(props);
 }, function (props) {
   return mediaStyles(props.theme.breakpoints.xs, props.alignItemsXs, props.justifyContentXs, props.wrapXs);
 }, function (props) {
@@ -352,7 +352,7 @@ StyledRow.defaultProps = {
 var COMPONENT_ID$3 = 'pane';
 var StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -366,7 +366,7 @@ StyledPane.defaultProps = {
 var COMPONENT_ID$2 = 'pane.content';
 var StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -378,15 +378,16 @@ StyledPaneContent.defaultProps = {
 };
 
 var COMPONENT_ID$1 = 'pane.splitter';
-var colorStyles = function colorStyles(props) {
+var colorStyles$1 = function colorStyles(props) {
   var color = getColor('neutralHue', 300, props.theme);
   var hoverColor = getColor('primaryHue', 600, props.theme);
   var activeColor = getColor('primaryHue', 800, props.theme);
   var boxShadow = props.theme.shadows.md(rgba(hoverColor, 0.35));
-  return css(["&::before{background-color:", ";}&:hover::before,&[data-garden-focus-visible]::before{background-color:", ";}&[data-garden-focus-visible]::before{box-shadow:", ";}&:active::before{background-color:", ";}"], color, hoverColor, boxShadow, activeColor);
+  return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}&[data-garden-focus-visible]::before{box-shadow:", ";background-color:", ";}&:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, boxShadow, hoverColor, props.isHovered && activeColor);
 };
 var sizeStyles$1 = function sizeStyles(props) {
   var size = math("".concat(props.theme.shadowWidths.md, " * 2"));
+  var separatorSize = math("".concat(props.theme.borderWidths.sm, " * 2"));
   var offset = math("-".concat(size, " / 2"));
   var cursor;
   var top;
@@ -406,19 +407,6 @@ var sizeStyles$1 = function sizeStyles(props) {
       separatorWidth = width;
       separatorHeight = props.theme.borderWidths.sm;
       break;
-    case 'end':
-      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;
     case 'bottom':
       cursor = 'row-resize';
       bottom = offset;
@@ -440,16 +428,31 @@ var sizeStyles$1 = function sizeStyles(props) {
         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;
   }
-  return css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before,&[data-garden-focus-visible]::before,&:focus::before{", ":", ";}&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, cursor, width, height, separatorWidth, separatorHeight, width === '100%' ? 'height' : 'width', math("".concat(props.theme.borderWidths.sm, " * 2")), props.theme.borderRadii.md);
+  var dimensionProperty = width === '100%' ? 'height' : 'width';
+  return css(["top:", ";right:", ";bottom:", ";left:", ";cursor:", ";width:", ";height:", ";&::before{width:", ";height:", ";}&:hover::before{", ":", ";}&[data-garden-focus-visible]::before,&:focus::before{", ":", ";}&[data-garden-focus-visible]::before{border-radius:", ";}"], top, right, bottom, left, cursor, width, height, separatorWidth, separatorHeight, dimensionProperty, props.isHovered && separatorSize, dimensionProperty, separatorSize, props.theme.borderRadii.md);
 };
 var StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.53.1'
+  'data-garden-version': '8.54.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
-})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";&:focus{outline:none;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, colorStyles, function (props) {
+})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";&:focus{outline:none;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$1, colorStyles$1, function (props) {
   return retrieveComponentStyles(COMPONENT_ID$1, props);
 });
 StyledPaneSplitter.defaultProps = {
@@ -471,42 +474,51 @@ var transformStyles = function transformStyles(props) {
   }
   return css(["& > svg{transform:rotate(", "deg);}"], degrees);
 };
+var colorStyles = function colorStyles(_ref) {
+  var theme = _ref.theme;
+  var boxShadow = theme.shadows.lg("".concat(theme.space.base, "px"), "".concat(theme.space.base * 2, "px"), getColor('chromeHue', 600, theme, 0.15));
+  var focusBoxShadow = theme.shadows.md(getColor('primaryHue', 600, theme, 0.35));
+  return css(["box-shadow:", ";&[data-garden-focus-visible]{box-shadow:", ",", ";}"], boxShadow, focusBoxShadow, boxShadow);
+};
 var sizeStyles = function sizeStyles(props) {
   var size = "".concat(props.theme.space.base * 6, "px");
+  var display = props.splitterSize <= stripUnit(math("".concat(props.theme.shadowWidths.md, " * 2 + ").concat(size))) && 'none';
   var isVertical = props.orientation === 'start' || props.orientation === 'end';
   var top;
   var left;
   var right;
   var bottom;
-  if (props.placement === 'start') {
-    if (isVertical) {
-      top = size;
-    } else if (props.theme.rtl) {
-      right = size;
-    } else {
-      left = size;
-    }
-  } else if (props.placement === 'end') {
-    if (isVertical) {
-      bottom = size;
-    } else if (props.theme.rtl) {
-      left = size;
-    } else {
-      right = size;
+  if (props.splitterSize >= stripUnit(math("".concat(size, " * 3")))) {
+    if (props.placement === 'start') {
+      if (isVertical) {
+        top = size;
+      } else if (props.theme.rtl) {
+        right = size;
+      } else {
+        left = size;
+      }
+    } else if (props.placement === 'end') {
+      if (isVertical) {
+        bottom = size;
+      } else if (props.theme.rtl) {
+        left = size;
+      } else {
+        right = size;
+      }
     }
   }
-  return css(["top:", ";right:", ";bottom:", ";left:", ";width:", ";min-width:", ";height:", ";"], top, right, bottom, left, size, size, size);
+  return css(["display:", ";top:", ";right:", ";bottom:", ";left:", ";width:", ";min-width:", ";height:", ";"], display, top, right, bottom, left, size, size, size);
 };
 var StyledPaneSplitterButton = styled(ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.53.1',
+  'data-garden-version': '8.54.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;&[data-garden-focus-visible],", ":hover &,", "[data-garden-focus-visible] &{opacity:1;}", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";"], StyledPaneSplitter, StyledPaneSplitter, sizeStyles, transformStyles, function (props) {
+})(["position:absolute;transition:background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;&[data-garden-focus-visible],", ":hover &,", "[data-garden-focus-visible] &{opacity:1;}", ";", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";"], StyledPaneSplitter, StyledPaneSplitter, sizeStyles, transformStyles, colorStyles, function (props) {
   return props.theme.colors.background;
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID, props);
@@ -859,6 +871,7 @@ var PaneSplitterContext = createContext({
   max: 0,
   layoutKey: '',
   valueNow: 0,
+  size: 0,
   isRow: false
 });
 var usePaneSplitterContext = function usePaneSplitterContext() {
@@ -866,17 +879,11 @@ var usePaneSplitterContext = function usePaneSplitterContext() {
 };
 
 var _excluded$1 = ["providerId", "layoutKey", "min", "max", "orientation"];
-var orientationToPosition = {
-  start: SplitterPosition.LEADS,
-  end: SplitterPosition.TRAILS,
-  top: SplitterPosition.LEADS,
-  bottom: SplitterPosition.TRAILS
-};
 var paneToSplitterOrientation = {
-  start: SplitterOrientation.VERTICAL,
-  end: SplitterOrientation.VERTICAL,
-  top: SplitterOrientation.HORIZONTAL,
-  bottom: SplitterOrientation.HORIZONTAL
+  start: 'vertical',
+  end: 'vertical',
+  top: 'horizontal',
+  bottom: 'horizontal'
 };
 var orientationToDimension = {
   start: 'columns',
@@ -885,6 +892,7 @@ var orientationToDimension = {
   bottom: 'rows'
 };
 var SplitterComponent = forwardRef(function (_ref, ref) {
+  var _separatorRef$current, _separatorRef$current2;
   var providerId = _ref.providerId,
       layoutKey = _ref.layoutKey,
       min = _ref.min,
@@ -894,27 +902,32 @@ var SplitterComponent = forwardRef(function (_ref, ref) {
   var paneProviderContext = usePaneProviderContextData(providerId);
   var paneContext = usePaneContext();
   var themeContext = useContext(ThemeContext);
-  var position = orientationToPosition[orientation];
+  var environment = useDocument(themeContext);
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
   var isRow = orientationToDimension[orientation] === 'rows';
-  var splitterOrientation = paneToSplitterOrientation[orientation];
+  var separatorRef = useRef(null);
+  var splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
   var pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
   var value = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey, true);
   var valueInFr = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey);
   var _useSplitter = useSplitter({
-    type: SplitterType.VARIABLE,
     orientation: splitterOrientation,
-    position: position,
+    isLeading: orientation === 'start' || orientation === 'top',
     min: min * pixelsPerFr,
     max: max * pixelsPerFr,
     rtl: themeContext.rtl,
-    environment: window,
+    environment: environment,
     onChange: function onChange(valueNow) {
       if (isRow) {
         return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
       }
       return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
     },
-    valueNow: value
+    valueNow: value,
+    separatorRef: separatorRef
   }),
       getSeparatorProps = _useSplitter.getSeparatorProps,
       getPrimaryPaneProps = _useSplitter.getPrimaryPaneProps;
@@ -923,9 +936,17 @@ var SplitterComponent = forwardRef(function (_ref, ref) {
       paneContext.setId(getPrimaryPaneProps().id);
     }
   }, [paneContext, getPrimaryPaneProps]);
+  var ariaLabel = useText(SplitterComponent, props, 'aria-label', "".concat(splitterOrientation, " splitter"));
   var separatorProps = getSeparatorProps({
-    'aria-controls': paneContext.id
+    'aria-controls': paneContext.id,
+    'aria-label': ariaLabel
   });
+  var size = isRow ? (_separatorRef$current = separatorRef.current) === null || _separatorRef$current === void 0 ? void 0 : _separatorRef$current.clientWidth : (_separatorRef$current2 = separatorRef.current) === null || _separatorRef$current2 === void 0 ? void 0 : _separatorRef$current2.clientHeight;
+  var onMouseOver = useMemo(function () {
+    return composeEventHandlers(props.onMouseOver, function (event) {
+      return setIsHovered(event.target === separatorRef.current);
+    });
+  }, [props.onMouseOver, separatorRef]);
   return React.createElement(PaneSplitterContext.Provider, {
     value: useMemo(function () {
       return {
@@ -934,13 +955,16 @@ var SplitterComponent = forwardRef(function (_ref, ref) {
         min: min,
         max: max,
         valueNow: valueInFr,
+        size: size,
         isRow: isRow
       };
-    }, [orientation, layoutKey, min, max, valueInFr, isRow])
+    }, [orientation, layoutKey, min, max, valueInFr, size, isRow])
   }, React.createElement(StyledPaneSplitter, _extends({
+    isHovered: isHovered,
     orientation: orientation
   }, separatorProps, props, {
-    ref: mergeRefs([separatorProps.ref, ref])
+    onMouseOver: onMouseOver,
+    ref: mergeRefs([separatorRef, ref])
   })));
 });
 SplitterComponent.displayName = 'Pane.Splitter';
@@ -973,6 +997,7 @@ var SplitterButtonComponent = forwardRef(function (props, ref) {
       max = _usePaneSplitterConte.max,
       isRow = _usePaneSplitterConte.isRow,
       valueNow = _usePaneSplitterConte.valueNow,
+      size = _usePaneSplitterConte.size,
       providerId = _usePaneSplitterConte.providerId;
   var paneProviderContext = usePaneProviderContextData(providerId);
   var isTop = orientation === 'top';
@@ -989,9 +1014,9 @@ var SplitterButtonComponent = forwardRef(function (props, ref) {
   var setValue = useCallback(function (value) {
     if (isRow) {
       paneProviderContext.setRowValue(isTop, layoutKey, value);
-      return;
+    } else {
+      paneProviderContext.setColumnValue(isStart, layoutKey, value);
     }
-    paneProviderContext.setColumnValue(isStart, layoutKey, value);
   }, [isRow, isTop, isStart, layoutKey, paneProviderContext]);
   var onClick = composeEventHandlers(props.onClick, function () {
     if (isMin) {
@@ -1004,17 +1029,29 @@ var SplitterButtonComponent = forwardRef(function (props, ref) {
     return event.stopPropagation();
   }
   );
+  var onMouseDown = composeEventHandlers(props.onMouseDown, function (event) {
+    return event.stopPropagation();
+  }
+  );
   return React.createElement(Tooltip, {
-    content: label
+    content: label,
+    style: {
+      cursor: 'default'
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    }
   }, React.createElement(StyledPaneSplitterButton, _extends({
     "aria-label": label
   }, props, {
     placement: placement,
     orientation: orientation,
     isRotated: isMin,
+    splitterSize: size || 0,
     ref: ref,
     onClick: onClick,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown
   })));
 });
 SplitterButtonComponent.displayName = 'Pane.SplitterButton';

package/dist/typings/styled/pane/StyledPaneSplitter.d.ts

@@ -7,7 +7,8 @@
 import { DefaultTheme } from 'styled-components';
 import { Orientation } from '../../types';
 interface IStyledPaneSplitterProps {
-    orientation: Orientation;
+    isHovered: boolean;
+    orientation?: Orientation;
 }
 /**
  * 1. Elevated initial context to pickup full-width hover

package/dist/typings/styled/pane/StyledPaneSplitterButton.d.ts

@@ -11,6 +11,7 @@ interface IStyledSplitterButtonProps extends ISplitterButtonProps {
     orientation: Orientation;
     placement: typeof PLACEMENT[number];
     isRotated: boolean;
+    splitterSize: number;
 }
 /**
  * 1. Opaque "dish" behind transparent button

package/dist/typings/utils/usePaneSplitterContext.d.ts

@@ -12,6 +12,7 @@ interface IPaneSplitterContext {
     max: ISplitterProps['max'];
     layoutKey: ISplitterProps['layoutKey'];
     valueNow?: number;
+    size?: number;
     isRow: boolean;
     providerId?: ISplitterProps['providerId'];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "8.53.1",
+  "version": "8.54.0",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,10 +21,10 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-splitter": "^0.2.3",
-    "@zendeskgarden/container-utilities": "^0.7.1",
-    "@zendeskgarden/react-buttons": "^8.53.1",
-    "@zendeskgarden/react-tooltips": "^8.53.1",
+    "@zendeskgarden/container-splitter": "^2.0.0",
+    "@zendeskgarden/container-utilities": "^1.0.0",
+    "@zendeskgarden/react-buttons": "^8.54.0",
+    "@zendeskgarden/react-tooltips": "^8.54.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^1.1.0"
@@ -36,7 +36,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.53.1",
+    "@zendeskgarden/react-theming": "^8.54.0",
     "use-resize-observer": "9.0.0"
   },
   "keywords": [
@@ -48,6 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "zendeskgarden:src": "src/index.ts",
-  "gitHead": "79dee8e82b6f082e8d4a72ba95a5fb3982d63040"
+  "zendeskgarden:src": "src/index.ts"
 }

package/LICENSE.md

@@ -1,176 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS