@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/utils.js

@@ -0,0 +1,870 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.cloneChildren = cloneChildren;
+exports.composeEvents = composeEvents;
+exports.composeMultipleEvents = composeMultipleEvents;
+exports.createCSSProperty = createCSSProperty;
+exports.deselectCurrentTextRange = deselectCurrentTextRange;
+exports.generateId = generateId;
+exports.getCSSProperty = getCSSProperty;
+exports.getClosestFocusableElement = getClosestFocusableElement;
+exports.getClosestViewport = getClosestViewport;
+exports.getInteractiveChildElements = getInteractiveChildElements;
+exports.getRect = getRect;
+exports.getScrollbarWidth = getScrollbarWidth;
+exports.getTabbableSiblings = getTabbableSiblings;
+exports.getTextWidth = getTextWidth;
+exports.insertAtIndex = insertAtIndex;
+exports.isArray = isArray;
+exports.isElementInteractive = isElementInteractive;
+exports.isFunction = isFunction;
+exports.isValueInArray = isValueInArray;
+exports.joinChildren = joinChildren;
+exports.lockScroll = lockScroll;
+exports.mergeProps = mergeProps;
+exports.noop = noop;
+exports.objectToCSSProperties = objectToCSSProperties;
+exports.padNumber = padNumber;
+exports.pageViewChange = pageViewChange;
+exports.range = range;
+exports.removeAtIndex = removeAtIndex;
+exports.renderIndexedGroup = renderIndexedGroup;
+exports.reorderArray = reorderArray;
+exports.shallowEqual = shallowEqual;
+exports.selectFullTextRange = selectFullTextRange;
+exports.stopImmediatePropagation = stopImmediatePropagation;
+exports.stopPropagationClick = stopPropagationClick;
+exports.trapFocus = trapFocus;
+exports.supportsPassiveEvents = exports.isIOS = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _tabbable = require("tabbable");
+
+var _camelToKebab = _interopRequireDefault(require("camel-to-kebab"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/**
+ * Returns true if user platform is an iOS device
+ * https://stackoverflow.com/a/9039885/1461204
+ * @return {Boolean}
+ */
+var isIOS = typeof window !== 'undefined' ? !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform) : false;
+/**
+ * Returns true if user platform supports passive events
+ * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
+ * @return {Boolean}
+ */
+
+exports.isIOS = isIOS;
+var supportsPassiveEvents = false;
+exports.supportsPassiveEvents = supportsPassiveEvents;
+
+if (typeof window !== 'undefined') {
+  try {
+    var options = {
+      get passive() {
+        exports.supportsPassiveEvents = supportsPassiveEvents = true;
+        return true;
+      }
+
+    };
+    window.addEventListener('test', options, options);
+    window.removeEventListener('test', options, options);
+  } catch (err) {
+    exports.supportsPassiveEvents = supportsPassiveEvents = false;
+  }
+}
+/**
+ * Used to clone and apply props to children
+ * @param {Function} children accepts valid React children
+ * @param {Function} callback return the props that should be applied to the cloned child
+ * @return {Function} the cloned set of children
+ */
+
+
+function cloneChildren(children, callback) {
+  var childrenArray = _react.Children.toArray(children).filter(function (child) {
+    return child === 0 || Boolean(child);
+  });
+
+  var childrenCount = childrenArray.length;
+  return childrenArray.map(function (child, index) {
+    return typeof child === 'string' || typeof child === 'number' ? child : /*#__PURE__*/(0, _react.cloneElement)(child, callback(child, {
+      index: index,
+      childrenCount: childrenCount,
+      firstChild: index === 0,
+      lastChild: index === Math.max(0, childrenCount - 1),
+      isEven: index % 2 === 0,
+      isOdd: Math.abs(index % 2) === 1
+    }));
+  });
+}
+/**
+ * This is intended to be used to compose event handlers
+ * @param {Function} internal the internal event handler
+ * @param {Function} external the external event handler
+ * @return {Function} the event handler to add to an element
+ */
+
+
+function composeEvents(internal, external) {
+  return external ? function (event) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    internal.apply(void 0, [event].concat(args));
+    external.apply(void 0, [event].concat(args));
+  } : internal;
+}
+/**
+ * Similar to composeEvents, but allows an object of events to be composed together
+ * @param {Function} internalEvents the internal event handlers
+ * @param {Function} externalEvents the external event handlers
+ * @return {Function} the event handler to add to an element
+ */
+
+
+function composeMultipleEvents(internalEvents, externalEvents) {
+  return Object.keys(externalEvents).reduce(function (composedEvents, key) {
+    var _objectSpread2;
+
+    var internal = internalEvents[key];
+    var external = externalEvents[key];
+    return _objectSpread(_objectSpread({}, composedEvents), {}, (_objectSpread2 = {}, _objectSpread2[key] = internal ? function (event) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      internal.apply(void 0, [event].concat(args));
+      external.apply(void 0, [event].concat(args));
+    } : external, _objectSpread2));
+  }, {});
+}
+/**
+ * Deselects any currently selected text
+ */
+
+
+function deselectCurrentTextRange() {
+  window.getSelection().removeAllRanges();
+}
+/**
+ * Get the closest focusable element
+ * @param {HTMLElement} node - the element to start searching from
+ * @return {HTMLElement} the closest element that is focusable
+ */
+
+
+function getClosestFocusableElement(node) {
+  if (node instanceof Element) {
+    if (node.getAttribute('tabindex') === '-1' || isElementInteractive(node)) {
+      return node;
+    } else {
+      return getClosestFocusableElement(node.parentNode);
+    }
+  } else {
+    return document.body;
+  }
+}
+/**
+ * Get the closest element that scrolls
+ * @param {HTMLElement} node - the element to start searching from
+ * @return {HTMLElement} the closest parentNode that scrolls
+ */
+
+
+function getClosestViewport(node, includeHidden) {
+  if (node) {
+    var _getComputedStyle = getComputedStyle(node),
+        overflow = _getComputedStyle.overflow,
+        overflowX = _getComputedStyle.overflowX,
+        overflowY = _getComputedStyle.overflowY;
+
+    var canScroll = (includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/).test(overflow + overflowX + overflowY);
+
+    if (node === document.body || canScroll) {
+      return node;
+    } else {
+      return getClosestViewport(node.parentNode, includeHidden);
+    }
+  } else {
+    return document.body;
+  }
+}
+/**
+ * Determines which child elements are interactive according to:
+ * https://html.spec.whatwg.org/dev/dom.html#interactive-content
+ * @param parent The parent element used to determine which children are interactive
+ */
+
+
+function getInteractiveChildElements(parent) {
+  var interactiveElements = [];
+  parent.querySelectorAll('*').forEach(function (element) {
+    if (isElementInteractive(element)) {
+      interactiveElements.push(element);
+    }
+  });
+  return interactiveElements;
+}
+/**
+ * Get element's bounding client rect with an option to get cloned dimensions
+ */
+
+
+var getRectObject = function getRectObject(node) {
+  var bounds = node.getBoundingClientRect();
+  return {
+    width: bounds.width,
+    height: bounds.height,
+    top: bounds.top,
+    right: bounds.right,
+    bottom: bounds.bottom,
+    left: bounds.left,
+    x: bounds.x,
+    y: bounds.y
+  };
+};
+
+function getRect(node, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      clone = _ref.clone;
+
+  if (clone) {
+    var _context = document.createElement('div');
+
+    var nodeClone = node.cloneNode(true);
+    var rect;
+
+    _context.appendChild(nodeClone);
+
+    document.body.appendChild(_context);
+    rect = getRectObject(nodeClone);
+    document.body.removeChild(_context);
+    return rect;
+  } else {
+    return node ? getRectObject(node) : {};
+  }
+}
+/**
+ * Get scrollbar width
+ */
+
+
+var scrollbarWidth;
+
+function getScrollbarWidth() {
+  if (scrollbarWidth === undefined) {
+    var div = document.createElement('div');
+    div.setAttribute('style', "\n      width: 100px;\n      height: 100px;\n      position: absolute;\n      opacity: 0;\n      overflow: scroll;\n    ");
+    document.body.appendChild(div);
+    scrollbarWidth = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+  }
+
+  return scrollbarWidth;
+}
+/**
+ * Returns { previous, next } tabbable siblings
+ */
+
+
+function getTabbableSiblings(node, _startNode) {
+  var tabbables = (0, _tabbable.tabbable)(node.parentNode);
+  var startNode = _startNode || node;
+  var startIndex = tabbables.indexOf(startNode);
+  var previousTabbable = tabbables[startIndex - 1];
+  var nextTabbable = tabbables[startIndex + 1];
+
+  if (node !== document.body && (!previousTabbable || !nextTabbable)) {
+    return getTabbableSiblings(node.parentNode, startNode);
+  }
+
+  return {
+    previous: previousTabbable,
+    next: nextTabbable
+  };
+}
+/**
+ * Generates a simple unique ID
+ * @return {String} the unique ID
+ */
+
+
+var idCounter = 1;
+
+function generateId(prefix) {
+  return prefix + "-" + idCounter++;
+}
+/**
+ * Get the width for a single line of text
+ * @param {String} text - the string of text to be measured
+ * @param {Object|HTMLElement} font - optional font styles or node to pull font styles from
+ * @return {Number} the width of the text passed in
+ */
+
+
+var expando = 'text-width' + new Date().getTime();
+var canvas = typeof document === 'undefined' ? null : document.createElement('canvas');
+var context = canvas && canvas.getContext('2d');
+var fontDefaults = {
+  fontStyle: 'normal',
+  fontVariant: 'normal',
+  fontWeight: 'normal',
+  fontSize: 'medium',
+  fontFamily: 'sans-serif'
+};
+
+function getTextWidth(text, font) {
+  if (!context) {
+    return -1;
+  }
+
+  if (font instanceof HTMLElement) {
+    font = font[expando] || (font[expando] = getComputedStyle(font));
+  } else {
+    font = _objectSpread(_objectSpread({}, fontDefaults), font);
+  }
+
+  context.font = [font.fontStyle, font.fontVariant, font.fontWeight, font.fontSize, font.fontFamily].join(' ');
+  return context.measureText(text).width;
+}
+/**
+ * Inserts an item in a list at a specific index returning a new array
+ */
+
+
+function insertAtIndex(_ref2) {
+  var list = _ref2.list,
+      index = _ref2.index,
+      value = _ref2.value;
+  var nextList = [].concat(list);
+  nextList.splice(index, 0, value);
+  return nextList;
+}
+/**
+ * Determines if a given element is interactive according to:
+ * https://html.spec.whatwg.org/dev/dom.html#interactive-content
+ * @param element Element that may be interactive (focusable)
+ */
+
+
+function isTypeOfElementNativelyFocusable(element) {
+  var nodeName = element.nodeName.toLowerCase();
+  var validInput = nodeName === 'input' && element.type !== 'hidden';
+  var validAnchor = nodeName === 'a' && element.hasAttribute('href');
+  var validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
+  var validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
+  var validNativelyFocusable = ['button', 'details', 'embed', 'iframe', 'label', 'select', 'textarea'].includes(nodeName);
+  return validInput || validAnchor || validAudioVideo || validImgObject || validNativelyFocusable;
+}
+
+function isElementInteractive(element) {
+  var hidden = element.style.display === 'none' || element.style.visibility === 'hidden';
+  var disabled = element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false'; // If the element is not visible or interactive, fail fast
+
+  if (hidden || disabled) {
+    return false;
+  }
+
+  var hasTabIndex = element.hasAttribute('tabindex');
+  var tabIndexNonNegative = Number(element.getAttribute('tabindex')) >= 0;
+  var tabbableElement = hasTabIndex && tabIndexNonNegative;
+  var tabbableNativeElement = isTypeOfElementNativelyFocusable(element) && (!hasTabIndex || tabIndexNonNegative);
+  return tabbableElement || tabbableNativeElement;
+}
+/**
+ * Determines if value is an array or not
+ */
+
+
+function isArray(value) {
+  return value && value.constructor === Array;
+}
+/**
+ * Determines if value is a function or not
+ */
+
+
+function isFunction(value) {
+  return value && value.constructor === Function;
+}
+/**
+ * Determines if a value is present in an array by
+ * performing a shallow equal check on each item.
+ */
+
+
+function isValueInArray(collection, value) {
+  var index = -1;
+  collection.some(function (v, i) {
+    return shallowEqual(v, value) ? index = i : false;
+  });
+  return index;
+}
+/**
+ * Joins React children using a separator.
+ */
+
+
+function joinChildren(children, separator) {
+  if (separator === void 0) {
+    separator = ', ';
+  }
+
+  var childrenArray = _react.Children.toArray(children);
+
+  var lastChildIndex = childrenArray.length - 1;
+  return childrenArray.reduce(function (result, child, index) {
+    if (child.type === separator.type) {
+      var nextResult = [].concat(result);
+      nextResult.pop();
+      return nextResult.concat(child);
+    } else if (index < lastChildIndex) {
+      return result.concat([child, typeof separator === 'string' ? separator : /*#__PURE__*/(0, _react.cloneElement)(separator, {
+        key: index + '-separator'
+      })]);
+    } else {
+      return result.concat(child);
+    }
+  }, []);
+}
+/**
+ * Lock all scrollbars by disabling mousewheel and locking scrollbars in position
+ * Optionally provide an element to allow it to scroll when hovered
+ */
+
+
+var listenerOptions = supportsPassiveEvents ? {
+  capture: true,
+  passive: false
+} : true;
+var lockedScrolls = [];
+
+function lockScroll(node) {
+  var scrollCoords = new WeakMap();
+
+  var preventDefault = function preventDefault(event) {
+    return event.preventDefault();
+  };
+
+  var mouseOver = function mouseOver() {
+    return window.removeEventListener('wheel', preventDefault, listenerOptions);
+  };
+
+  var mouseOut = function mouseOut() {
+    return window.addEventListener('wheel', preventDefault, listenerOptions);
+  };
+
+  var mouseDown = function mouseDown(event) {
+    if (event.target !== node) {
+      scrollCoords.set(event.target, {
+        x: event.target.scrollLeft,
+        y: event.target.scrollTop
+      });
+    }
+  };
+
+  var wheelLock = function wheelLock(event) {
+    var scrollableDistance = node.scrollHeight - node.offsetHeight;
+
+    if (event.deltaY > 0 && node.scrollTop >= scrollableDistance || event.deltaY < 0 && node.scrollTop <= 0) {
+      event.preventDefault();
+    }
+  };
+
+  var scrollLock = function scrollLock(event) {
+    var scrollElement = event.target === document ? document.documentElement : event.target;
+    var scrollElementCoords = scrollCoords.get(scrollElement);
+
+    if (scrollElementCoords) {
+      scrollElement.scrollLeft = scrollElementCoords.x;
+      scrollElement.scrollTop = scrollElementCoords.y;
+    }
+  };
+
+  var addListeners = function addListeners() {
+    if (node) {
+      node.addEventListener('mouseover', mouseOver, true);
+      node.addEventListener('mouseout', mouseOut, true);
+      mouseOut();
+    }
+
+    window.addEventListener('mousedown', mouseDown, true);
+    window.addEventListener('wheel', wheelLock, listenerOptions);
+    window.addEventListener('scroll', scrollLock, true);
+  };
+
+  var removeListeners = function removeListeners() {
+    if (node) {
+      node.removeEventListener('mouseover', mouseOver, true);
+      node.removeEventListener('mouseout', mouseOut, true);
+      mouseOver();
+    }
+
+    window.removeEventListener('mousedown', mouseDown, true);
+    window.removeEventListener('wheel', wheelLock, listenerOptions);
+    window.removeEventListener('scroll', scrollLock, true);
+  };
+
+  if (lockedScrolls.length > 0) {
+    // check if we need to remove any current scroll locks
+    lockedScrolls[lockedScrolls.length - 1].removeListeners(); // filter any nodes that may be gone from the DOM now
+
+    lockedScrolls = lockedScrolls.filter(function (lockedScroll) {
+      return document.body.contains(lockedScroll.node);
+    });
+  } // store the scroll lock enable/disable methods so we can disable them when
+  // new ones are created or enable them when old ones are destroyed
+
+
+  if (document.body.contains(node)) {
+    lockedScrolls.push({
+      node: node,
+      addListeners: addListeners,
+      removeListeners: removeListeners
+    });
+    addListeners();
+  }
+
+  return function () {
+    var index = lockedScrolls.findIndex(function (scroll) {
+      return scroll.node === node;
+    });
+
+    if (index > -1) {
+      removeListeners(); // remove this scroll lock from stored scroll locks
+
+      lockedScrolls.splice(index, 1); // again, filter any nodes that may be gone from the DOM now
+
+      lockedScrolls = lockedScrolls.filter(function (lockedScroll) {
+        var containsLockedScrollNode = document.body.contains(lockedScroll.node); // as a side effect, make sure to remove listeners from this node
+
+        if (containsLockedScrollNode === false) {
+          lockedScroll.removeListeners();
+        }
+
+        return containsLockedScrollNode;
+      }); // enable the previous scroll lock if any are left
+
+      if (lockedScrolls.length > 0) {
+        lockedScrolls[lockedScrolls.length - 1].addListeners();
+      }
+    }
+  };
+}
+/**
+ * No op function used to stub function props
+ */
+
+
+function noop() {
+  return null;
+}
+/**
+ * Pad a number with 0's
+ */
+
+
+function padNumber(number, size) {
+  return Array(Math.max(size - String(number).length + 1, 0)).join(0) + number;
+}
+/**
+ * Listen for window visibility and focus/blur changes
+ */
+
+
+function pageViewChange(callback) {
+  if (typeof window !== 'undefined') {
+    var handleFocus = function handleFocus() {
+      return callback(true);
+    };
+
+    var handleBlur = function handleBlur() {
+      return callback(false);
+    };
+
+    var handleVisibilityChange = function handleVisibilityChange() {
+      return callback(!document.hidden);
+    };
+
+    window.addEventListener('focus', handleFocus);
+    window.addEventListener('blur', handleBlur);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return function () {
+      window.removeEventListener('focus', handleFocus);
+      window.removeEventListener('blur', handleBlur);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  } else {
+    return function () {};
+  }
+}
+/**
+ * Create a range of numbers
+ */
+
+
+function range(start, stop) {
+  var arr = [];
+
+  for (var i = start; i < stop; i++) {
+    arr.push(i);
+  }
+
+  return arr;
+}
+/**
+ * Removes an item in a list at a specific index returning a new array
+ */
+
+
+function removeAtIndex(_ref3) {
+  var list = _ref3.list,
+      index = _ref3.index;
+  var nextList = [].concat(list);
+  nextList.splice(index, 1);
+  return nextList;
+}
+/**
+ * Helps with rendering a nested group of data that needs an ordered index.
+ */
+
+
+function renderIndexedGroup(_ref4) {
+  var group = _ref4.group,
+      renderGroup = _ref4.renderGroup,
+      _ref4$renderEmpty = _ref4.renderEmpty,
+      renderEmpty = _ref4$renderEmpty === void 0 ? 'No items found' : _ref4$renderEmpty;
+  return group.length > 0 ? group.reduce(function (_ref5, data, dataIndex) {
+    var collection = _ref5.collection,
+        index = _ref5.index;
+    collection.push(renderGroup(data, function () {
+      return index++;
+    }));
+    return dataIndex === group.length - 1 ? collection : {
+      collection: collection,
+      index: index
+    };
+  }, {
+    collection: [],
+    index: 0
+  }) : renderEmpty;
+}
+/**
+ * Reorder a result in an array by its index
+ */
+
+
+function reorderArray(_ref6) {
+  var list = _ref6.list,
+      startIndex = _ref6.startIndex,
+      endIndex = _ref6.endIndex;
+  var result = Array.from(list);
+
+  var _result$splice = result.splice(startIndex, 1),
+      removed = _result$splice[0];
+
+  result.splice(endIndex, 0, removed);
+  return result;
+}
+/**
+ * Shallow compare two items
+ */
+
+
+function shallowEqual(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+/**
+ * Selects the full text range including number inputs
+ */
+
+
+function selectFullTextRange(node) {
+  if (node.type === 'number') {
+    node.select();
+  } else {
+    node.setSelectionRange(0, 9999);
+  }
+}
+/**
+ * Stop an event from propagating
+ */
+
+
+function stopImmediatePropagation(e) {
+  e.nativeEvent.stopImmediatePropagation();
+}
+/**
+ * Adds event.stopPropagation() to a component's onClick event.
+ * Used to prevent element's onClick from bubbling up the tree.
+ */
+
+
+function stopPropagationClick(onClick) {
+  return function (event) {
+    event.stopPropagation();
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+}
+/**
+ * Simple focus trap that only traps focus when focused on first/last elements.
+ * This allows focus traps to work with third-party modals.
+ */
+
+
+var TAB_KEY = 9;
+
+function trapFocus(node) {
+  function handleKeyDown(event) {
+    var tabbables = (0, _tabbable.tabbable)(node);
+    var firstTabbable = tabbables[0];
+
+    var _tabbables$reverse = tabbables.reverse(),
+        lastTabbable = _tabbables$reverse[0];
+
+    if (event.shiftKey && event.target === firstTabbable && event.keyCode === TAB_KEY) {
+      event.preventDefault();
+      lastTabbable.focus();
+    }
+
+    if (!event.shiftKey && event.target === lastTabbable && event.keyCode === TAB_KEY) {
+      event.preventDefault();
+      firstTabbable.focus();
+    }
+  }
+
+  var tabbables = (0, _tabbable.tabbable)(node);
+  var currentTabbable = tabbables[0];
+  var currentIndex = 0; // skip over HelperDrawer toggles and move to the first interactive element
+
+  while ((_currentTabbable = currentTabbable) != null && _currentTabbable.hasAttribute('data-helper-drawer-toggle')) {
+    var _currentTabbable;
+
+    currentTabbable = tabbables[currentIndex++];
+  }
+
+  var lastActiveElement = document.activeElement;
+
+  if (currentTabbable) {
+    currentTabbable.focus();
+  }
+
+  node.addEventListener('keydown', handleKeyDown);
+  return function () {
+    if (lastActiveElement) {
+      lastActiveElement.focus();
+    }
+
+    node.removeEventListener('keydown', handleKeyDown);
+  };
+}
+/**
+ * Utilities to create and manage CSS properties
+ */
+
+
+var createdCSSProperties = new Set();
+
+function createCSSProperty(key, value) {
+  if (!createdCSSProperties.has(key)) {
+    createdCSSProperties.add(key);
+  }
+
+  return "--" + (0, _camelToKebab["default"])(key) + "-" + (0, _camelToKebab["default"])(value);
+}
+
+function getCSSProperty(key, value) {
+  return key && value ? "var(--" + (0, _camelToKebab["default"])(key) + "-" + (0, _camelToKebab["default"])(value) + ")" : undefined;
+}
+
+function objectToCSSProperties(themeKey, props) {
+  var properties = {};
+
+  for (var propKey in props) {
+    var propValue = props[propKey];
+    properties[createCSSProperty(themeKey, propKey)] = typeof propValue === 'number' ? propValue + "px" : createdCSSProperties.has(propValue) ? getCSSProperty(themeKey, propValue) : propValue;
+  }
+
+  return properties;
+}
+
+function callRef(ref, node) {
+  if (ref.current === undefined) {
+    if (typeof ref === 'function') {
+      ref(node);
+    }
+  } else {
+    ref.current = node;
+  }
+}
+
+function pushProp(target, key, value, mergeValue) {
+  if (mergeValue === void 0) {
+    mergeValue = function mergeValue(nextValue, currentValue) {
+      return nextValue;
+    };
+  }
+
+  if (key === 'className') {
+    target.className = [target.className, value].join(' ').trim();
+  } else if (key === 'style') {
+    target.style = _objectSpread(_objectSpread({}, target.style), value);
+  } else if (key === 'ref' || key === 'innerRef') {
+    var oldRef = target[key];
+    target[key] = oldRef ? function (node) {
+      callRef(oldRef, node);
+      callRef(value, node);
+    } : value;
+  } else if (typeof value === 'function') {
+    var oldFn = target[key];
+    target[key] = oldFn ? function () {
+      oldFn.apply(void 0, arguments);
+      value.apply(void 0, arguments);
+    } : value;
+  } else if (!(key in target)) {
+    target[key] = value;
+  } else {
+    target[key] = mergeValue(value, target[key]);
+  }
+}
+/**
+ * Merges sets of props together:
+ *  - duplicate `className` props get concatenated
+ *  - duplicate `style` props get shallow merged (later props have precedence for conflicting rules)
+ *  - duplicate refs or functions (to be used for event handlers) get called in order from left to right
+ * @param propGroup Sets of props to merge together. Later props have precedence.
+ */
+
+
+function mergeProps() {
+  for (var _len3 = arguments.length, propGroup = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    propGroup[_key3] = arguments[_key3];
+  }
+
+  if (propGroup.length === 1) {
+    return propGroup[0];
+  }
+
+  return propGroup.reduce(function (mergedProps, props) {
+    for (var key in props) {
+      pushProp(mergedProps, key, props[key]);
+    }
+
+    return mergedProps;
+  }, {});
+}