text: var _FLEX_MAP;
  
  function _extends() { _extends = Object.assign || 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); }
  
  import styled, { css, keyframes } from 'styled-components';
  import { defaultProps } from '../../default-props';
  import { backgroundStyle, borderStyle, breakpointStyle, edgeStyle, focusStyle, genericStyles, getHoverIndicatorStyle, overflowStyle, parseMetricToNum } from '../../utils';
  var ALIGN_MAP = {
    baseline: 'baseline',
    center: 'center',
    end: 'flex-end',
    start: 'flex-start',
    stretch: 'stretch'
  };
  var alignStyle = css(["align-items:", ";"], function (props) {
    return ALIGN_MAP[props.align];
  });
  var ALIGN_CONTENT_MAP = {
    around: 'around',
    between: 'between',
    center: 'center',
    end: 'flex-end',
    start: 'flex-start',
    stretch: 'stretch'
  };
  var alignContentStyle = css(["align-content:", ";"], function (props) {
    return ALIGN_CONTENT_MAP[props.alignContent];
  });
  var BASIS_MAP = {
    auto: 'auto',
    full: '100%',
    '1/2': '50%',
    '1/4': '25%',
    '2/4': '50%',
    '3/4': '75%',
    '1/3': '33.33%',
    '2/3': '66.66%'
  };
  var basisStyle = css(["flex-basis:", ";"], function (props) {
    return BASIS_MAP[props.basis] || props.theme.global.size[props.basis] || props.basis;
  }); // min-width and min-height needed because of this
  // https://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size
  // we assume we are in the context of a Box going the other direction
  // TODO: revisit this
  
  var directionStyle = function directionStyle(direction, theme) {
    var styles = [css(["min-width:0;min-height:0;flex-direction:", ";"], direction === 'row-responsive' ? 'row' : direction)];
  
    if (direction === 'row-responsive' && theme.box.responsiveBreakpoint) {
      var breakpoint = theme.global.breakpoints[theme.box.responsiveBreakpoint];
  
      if (breakpoint) {
        styles.push(breakpointStyle(breakpoint, "\n        flex-direction: column;\n        flex-basis: auto;\n        justify-content: flex-start;\n        align-items: stretch;\n      "));
      }
    }
  
    return styles;
  };
  
  var elevationStyle = css(["box-shadow:", ";"], function (props) {
    return props.theme.global.elevation[props.theme.dark ? 'dark' : 'light'][props.elevationProp];
  });
  var FLEX_MAP = (_FLEX_MAP = {}, _FLEX_MAP[true] = '1 1', _FLEX_MAP[false] = '0 0', _FLEX_MAP.grow = '1 0', _FLEX_MAP.shrink = '0 1', _FLEX_MAP);
  
  var flexGrowShrinkProp = function flexGrowShrinkProp(flex) {
    if (typeof flex === 'boolean' || typeof flex === 'string') {
      return FLEX_MAP[flex];
    }
  
    return (flex.grow ? flex.grow : 0) + " " + (flex.shrink ? flex.shrink : 0);
  };
  
  var flexStyle = css(["flex:", ";"], function (props) {
    return "" + flexGrowShrinkProp(props.flex) + (props.flex !== true && !props.basis ? ' auto' : '');
  });
  
  var fillStyle = function fillStyle(fillProp) {
    if (fillProp === 'horizontal') {
      return 'width: 100%;';
    }
  
    if (fillProp === 'vertical') {
      return 'height: 100%;';
    }
  
    if (fillProp) {
      return "\n      width: 100%;\n      height: 100%;\n    ";
    }
  
    return undefined;
  };
  
  var JUSTIFY_MAP = {
    around: 'space-around',
    between: 'space-between',
    center: 'center',
    end: 'flex-end',
    evenly: 'space-evenly',
    start: 'flex-start'
  };
  var justifyStyle = css(["justify-content:", ";"], function (props) {
    return JUSTIFY_MAP[props.justify];
  });
  var WRAP_MAP = {
    "true": 'wrap',
    reverse: 'wrap-reverse'
  };
  var wrapStyle = css(["flex-wrap:", ";"], function (props) {
    return WRAP_MAP[props.wrapProp];
  });
  var ROUND_MAP = {
    full: '100%'
  };
  
  var roundStyle = function roundStyle(data, responsive, theme) {
    var breakpoint = theme.box.responsiveBreakpoint && theme.global.breakpoints[theme.box.responsiveBreakpoint];
    var styles = [];
  
    if (typeof data === 'object') {
      var size = ROUND_MAP[data.size] || theme.global.edgeSize[data.size || 'medium'] || data.size;
      var responsiveSize = responsive && breakpoint && breakpoint.edgeSize[data.size] && (breakpoint.edgeSize[data.size] || data.size);
  
      if (data.corner === 'top') {
        styles.push(css(["border-top-left-radius:", ";border-top-right-radius:", ";"], size, size));
  
        if (responsiveSize) {
          styles.push(breakpointStyle(breakpoint, "\n          border-top-left-radius: " + responsiveSize + ";\n          border-top-right-radius: " + responsiveSize + ";\n        "));
        }
      } else if (data.corner === 'bottom') {
        styles.push(css(["border-bottom-left-radius:", ";border-bottom-right-radius:", ";"], size, size));
  
        if (responsiveSize) {
          styles.push(breakpointStyle(breakpoint, "\n          border-bottom-left-radius: " + responsiveSize + ";\n          border-bottom-right-radius: " + responsiveSize + ";\n        "));
        }
      } else if (data.corner === 'left') {
        styles.push(css(["border-top-left-radius:", ";border-bottom-left-radius:", ";"], size, size));
  
        if (responsiveSize) {
          styles.push(breakpointStyle(breakpoint, "\n          border-top-left-radius: " + responsiveSize + ";\n          border-bottom-left-radius: " + responsiveSize + ";\n        "));
        }
      } else if (data.corner === 'right') {
        styles.push(css(["border-top-right-radius:", ";border-bottom-right-radius:", ";"], size, size));
  
        if (responsiveSize) {
          styles.push(breakpointStyle(breakpoint, "\n          border-top-right-radius: " + responsiveSize + ";\n          border-bottom-right-radius: " + responsiveSize + ";\n        "));
        }
      } else if (data.corner) {
        styles.push(css(["border-", "-radius:", ";"], data.corner, size));
  
        if (responsiveSize) {
          styles.push(breakpointStyle(breakpoint, "\n          border-" + data.corner + "-radius: " + responsiveSize + ";\n        "));
        }
      } else {
        styles.push(css(["border-radius:", ";"], size));
  
        if (responsiveSize) {
          styles.push(breakpointStyle(breakpoint, "\n          border-radius: " + responsiveSize + ";\n        "));
        }
      }
    } else {
      var _size = data === true ? 'medium' : data;
  
      styles.push(css(["border-radius:", ";"], ROUND_MAP[_size] || theme.global.edgeSize[_size] || _size));
  
      var _responsiveSize = breakpoint && breakpoint.edgeSize[_size];
  
      if (_responsiveSize) {
        styles.push(breakpointStyle(breakpoint, "\n        border-radius: " + _responsiveSize + ";\n      "));
      }
    }
  
    return styles;
  };
  
  var SLIDE_SIZES = {
    xsmall: 1,
    small: 5,
    medium: 10,
    large: 50,
    xlarge: 200
  };
  var PULSE_SIZES = {
    xsmall: 1.001,
    small: 1.01,
    medium: 1.1,
    large: 1.5,
    xlarge: 2
  };
  var JIGGLE_SIZES = {
    xsmall: 0.1,
    small: 1,
    medium: 5,
    large: 400,
    xlarge: 1000
  };
  var ZOOM_SIZES = {
    xsmall: 0.001,
    small: 0.01,
    medium: 0.05,
    large: 0.1,
    xlarge: 0.5
  };
  
  var animationBounds = function animationBounds(type, size) {
    if (size === void 0) {
      size = 'medium';
    }
  
    if (type === 'fadeIn') {
      return ['opacity: 0;', 'opacity: 1;'];
    }
  
    if (type === 'fadeOut') {
      return ['opacity: 1;', 'opacity: 0;'];
    }
  
    if (type === 'jiggle') {
      var deg = JIGGLE_SIZES[size];
      return ["transform: rotate(-" + deg + "deg);", "transform: rotate(" + deg + "deg);"];
    }
  
    if (type === 'pulse') {
      return ['transform: scale(1);', "transform: scale(" + PULSE_SIZES[size] + ")"];
    }
  
    if (type === 'flipIn') {
      return ['transform: rotateY(90deg);', 'transform: rotateY(0);'];
    }
  
    if (type === 'flipOut') {
      return ['transform: rotateY(0);', 'transform: rotateY(90deg);'];
    }
  
    if (type === 'slideDown') {
      return ["transform: translateY(-" + SLIDE_SIZES[size] + "%);", 'transform: none;'];
    }
  
    if (type === 'slideLeft') {
      return ["transform: translateX(" + SLIDE_SIZES[size] + "%);", 'transform: none;'];
    }
  
    if (type === 'slideRight') {
      return ["transform: translateX(-" + SLIDE_SIZES[size] + "%);", 'transform: none;'];
    }
  
    if (type === 'slideUp') {
      return ["transform: translateY(" + SLIDE_SIZES[size] + "%);", 'transform: none;'];
    }
  
    if (type === 'zoomIn') {
      return ["transform: scale(" + (1 - ZOOM_SIZES[size]) + ");", 'transform: none;'];
    }
  
    if (type === 'zoomOut') {
      return ["transform: scale(" + (1 + ZOOM_SIZES[size]) + ");", 'transform: none;'];
    }
  
    return [];
  };
  
  var normalizeTiming = function normalizeTiming(time, defaultTiming) {
    return time ? time / 1000.0 + "s" : defaultTiming;
  };
  
  var animationEnding = function animationEnding(type) {
    if (type === 'jiggle') {
      return 'alternate infinite';
    }
  
    if (type === 'pulse') {
      return 'alternate infinite';
    }
  
    return 'forwards';
  };
  
  var animationObjectStyle = function animationObjectStyle(animation, theme) {
    var bounds = animationBounds(animation.type, animation.size);
  
    if (bounds) {
      var animationTransition = css(["from{", ";}to{", ";}"], bounds[0], bounds[1]);
      return css(["", " ", " ", " ", ""], keyframes(["", ""], animationTransition), normalizeTiming(animation.duration, (theme.global.animation[animation.type] ? theme.global.animation[animation.type].duration : undefined) || theme.global.animation.duration), normalizeTiming(animation.delay, '0s'), animationEnding(animation.type));
    }
  
    return '';
  };
  
  var animationItemStyle = function animationItemStyle(item, theme) {
    if (typeof item === 'string') {
      return animationObjectStyle({
        type: item
      }, theme);
    }
  
    if (Array.isArray(item)) {
      return item.reduce(function (style, a, index) {
        return css(["", "", " ", ""], style, index > 0 ? ',' : '', animationItemStyle(a, theme));
      }, '');
    }
  
    if (typeof item === 'object') {
      return animationObjectStyle(item, theme);
    }
  
    return '';
  };
  
  var animationAncilaries = function animationAncilaries(animation) {
    if (animation.type === 'flipIn' || animation.type === 'flipOut') {
      return 'perspective: 1000px; transform-style: preserve-3d;';
    }
  
    return '';
  };
  
  var animationObjectInitialStyle = function animationObjectInitialStyle(animation) {
    var bounds = animationBounds(animation.type, animation.size);
  
    if (bounds) {
      return bounds[0] + " " + animationAncilaries(animation);
    }
  
    return '';
  };
  
  var animationInitialStyle = function animationInitialStyle(item) {
    if (typeof item === 'string') {
      return animationObjectInitialStyle({
        type: item
      });
    }
  
    if (Array.isArray(item)) {
      return item.map(function (a) {
        return typeof a === 'string' ? animationObjectInitialStyle({
          type: a
        }) : animationObjectInitialStyle(a);
      }).join('');
    }
  
    if (typeof item === 'object') {
      return animationObjectInitialStyle(item);
    }
  
    return '';
  };
  
  var animationStyle = css(["", ";"], function (props) {
    return css(["", " animation:", ";"], animationInitialStyle(props.animation), animationItemStyle(props.animation, props.theme));
  });
  var interactiveStyle = css(["cursor:pointer;&:hover{", "}"], function (props) {
    return props.hoverIndicator && getHoverIndicatorStyle(props.hoverIndicator, props.theme);
  });
  
  var getSize = function getSize(props, size) {
    return props.theme.global.size[size] || size;
  };
  
  var heightObjectStyle = css(["", ";", ";"], function (props) {
    return props.heightProp.max && css(["max-height:", ";"], getSize(props, props.heightProp.max));
  }, function (props) {
    return props.heightProp.min && css(["min-height:", ";"], getSize(props, props.heightProp.min));
  });
  var heightStyle = css(["height:", ";"], function (props) {
    return getSize(props, props.heightProp);
  });
  var widthObjectStyle = css(["", ";", ";"], function (props) {
    return props.widthProp.max && css(["max-width:", ";"], getSize(props, props.widthProp.max));
  }, function (props) {
    return props.widthProp.min && css(["min-width:", ";"], getSize(props, props.widthProp.min));
  });
  var widthStyle = css(["width:", ";"], function (props) {
    return getSize(props, props.widthProp);
  }); // NOTE: basis must be after flex! Otherwise, flex overrides basis
  
  var StyledBox = styled.div.withConfig({
    displayName: "StyledBox",
    componentId: "sc-13pk1d4-0"
  })(["display:flex;box-sizing:border-box;outline:none;", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
    return !props.basis && 'max-width: 100%;';
  }, genericStyles, function (props) {
    return props.align && alignStyle;
  }, function (props) {
    return props.alignContent && alignContentStyle;
  }, function (props) {
    return props.background && backgroundStyle(props.background, props.theme);
  }, function (props) {
    return props.border && (Array.isArray(props.border) ? props.border.map(function (border) {
      return borderStyle(border, props.responsive, props.theme);
    }) : borderStyle(props.border, props.responsive, props.theme));
  }, function (props) {
    return props.directionProp && directionStyle(props.directionProp, props.theme);
  }, function (props) {
    return props.heightProp && (typeof props.heightProp === 'object' ? heightObjectStyle : heightStyle);
  }, function (props) {
    return props.widthProp && (typeof props.widthProp === 'object' ? widthObjectStyle : widthStyle);
  }, function (props) {
    return props.flex !== undefined && flexStyle;
  }, function (props) {
    return props.basis && basisStyle;
  }, function (props) {
    return props.fillProp && fillStyle(props.fillProp);
  }, function (props) {
    return props.justify && justifyStyle;
  }, function (props) {
    return props.pad && edgeStyle('padding', props.pad, props.responsive, props.theme.box.responsiveBreakpoint, props.theme);
  }, function (props) {
    return props.round && roundStyle(props.round, props.responsive, props.theme);
  }, function (props) {
    return props.wrapProp && wrapStyle;
  }, function (props) {
    return props.overflowProp && overflowStyle(props.overflowProp);
  }, function (props) {
    return props.elevationProp && elevationStyle;
  }, function (props) {
    return props.animation && animationStyle;
  }, function (props) {
    return props.onClick && interactiveStyle;
  }, function (props) {
    return props.onClick && props.focus && props.focusIndicator !== false && focusStyle;
  }, function (props) {
    return props.theme.box && props.theme.box.extend;
  });
  
  var gapStyle = function gapStyle(directionProp, gap, responsive, border, theme) {
    var breakpoint = theme.box.responsiveBreakpoint && theme.global.breakpoints[theme.box.responsiveBreakpoint];
    var responsiveSize = breakpoint && breakpoint.edgeSize[gap] && breakpoint.edgeSize[gap];
    var hasBetweenBorder = border === 'between' || border && border.side === 'between';
    var styles = [];
  
    if (directionProp === 'column' || directionProp === 'column-reverse') {
      var height = theme.global.edgeSize[gap] || gap;
      styles.push(css(["height:", ";"], height));
  
      if (responsiveSize) {
        styles.push(breakpointStyle(breakpoint, "height: " + responsiveSize + ";"));
      }
  
      if (hasBetweenBorder) {
        var adjustedBorder = typeof border === 'string' ? 'top' : _extends({}, border, {
          side: 'top'
        });
        var borderSize = border.size || 'xsmall';
        var borderHeight = theme.global.borderSize[borderSize] || borderSize;
        styles.push(css(["position:relative;&:after{content:'';position:absolute;width:100%;top:", "px;", "}"], parseMetricToNum(height) / 2 - parseMetricToNum(borderHeight) / 2, borderStyle(adjustedBorder, responsive, theme)));
      }
    } else {
      var width = theme.global.edgeSize[gap] || gap;
      styles.push("width: " + width + ";");
  
      if (responsive && directionProp === 'row-responsive') {
        styles.push(breakpointStyle(breakpoint, "\n        width: auto;\n        height: " + responsiveSize + ";\n      "));
      }
  
      if (hasBetweenBorder) {
        var _adjustedBorder = typeof border === 'string' ? 'left' : _extends({}, border, {
          side: 'left'
        });
  
        var _borderSize = border.size || 'xsmall';
  
        var borderWidth = theme.global.borderSize[_borderSize] || _borderSize;
        styles.push(css(["position:relative;&:after{content:'';position:absolute;height:100%;left:", "px;", "}"], parseMetricToNum(width) / 2 - parseMetricToNum(borderWidth) / 2, borderStyle(_adjustedBorder, responsive, theme)));
      }
    }
  
    return styles;
  };
  
  StyledBox.defaultProps = {};
  Object.setPrototypeOf(StyledBox.defaultProps, defaultProps);
  var StyledBoxGap = styled.div.withConfig({
    displayName: "StyledBox__StyledBoxGap",
    componentId: "sc-13pk1d4-1"
  })(["flex:0 0 auto;", ";"], function (props) {
    return props.gap && gapStyle(props.directionProp, props.gap, props.responsive, props.border, props.theme);
  });
  StyledBoxGap.defaultProps = {};
  Object.setPrototypeOf(StyledBoxGap.defaultProps, defaultProps);
  export { StyledBox, StyledBoxGap };