@zendeskgarden/react-forms 9.0.0-next.6 → 9.0.0-next.8

package/dist/index.esm.js

@@ -1,2720 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import * as React from 'react';
-import React__default, { createContext, useContext, Children, useEffect, useState, useMemo, forwardRef, useRef, useCallback, useLayoutEffect } from 'react';
-import { useField } from '@zendeskgarden/container-field';
-import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColorV8, focusStyles, SELECTOR_FOCUS_VISIBLE, getFocusBoxShadow, useText } from '@zendeskgarden/react-theming';
-import { hideVisually, math, em, rgba } from 'polished';
-import PropTypes from 'prop-types';
-import { composeEventHandlers, getControlledValue } from '@zendeskgarden/container-utilities';
-import { mergeRefs } from 'react-merge-refs';
-
-function _extends$t() {
-  _extends$t = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$t.apply(this, arguments);
-}
-
-const FieldContext = createContext(undefined);
-const useFieldContext = () => {
-  const fieldContext = useContext(FieldContext);
-  return fieldContext;
-};
-
-const COMPONENT_ID$G = 'forms.field';
-const StyledField = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledField",
-  componentId: "sc-12gzfsu-0"
-})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID$G, props));
-StyledField.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$F = 'forms.fieldset';
-const StyledFieldset = styled(StyledField).attrs({
-  as: 'fieldset',
-  'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledFieldset",
-  componentId: "sc-1vr4mxv-0"
-})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID$F, props));
-StyledFieldset.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$E = 'forms.input_label';
-const StyledLabel = styled.label.attrs(props => ({
-  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.6'
-})).withConfig({
-  displayName: "StyledLabel",
-  componentId: "sc-2utmsz-0"
-})(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$E, props));
-StyledLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$D = 'forms.fieldset_legend';
-const StyledLegend = styled(StyledLabel).attrs({
-  as: 'legend',
-  'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledLegend",
-  componentId: "sc-6s0zwq-0"
-})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$D, props));
-StyledLegend.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$C = 'forms.input_hint';
-const StyledHint = styled.div.attrs(props => ({
-  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$C,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.6'
-})).withConfig({
-  displayName: "StyledHint",
-  componentId: "sc-17c2wu8-0"
-})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$C, props));
-StyledHint.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-var _g$2, _circle$5;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
-var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: 7.5,
-    cy: 8.5,
-    r: 7
-  }), /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    d: "M7.5 4.5V9"
-  }))), _circle$5 || (_circle$5 = /*#__PURE__*/React.createElement("circle", {
-    cx: 7.5,
-    cy: 12,
-    r: 1,
-    fill: "currentColor"
-  })));
-};
-
-var _path$n, _circle$4;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
-var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
-  })), _circle$4 || (_circle$4 = /*#__PURE__*/React.createElement("circle", {
-    cx: 7.5,
-    cy: 12,
-    r: 1,
-    fill: "currentColor"
-  })));
-};
-
-var _g$1;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
-var SvgCheckCircleStroke$1 = function SvgCheckCircleStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M4 9l2.5 2.5 5-5"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 7.5,
-    cy: 8.5,
-    r: 7
-  }))));
-};
-
-const MessageIcon = _ref => {
-  let {
-    children,
-    validation,
-    ...props
-  } = _ref;
-  let retVal;
-  if (validation === 'error') {
-    retVal = React__default.createElement(SvgAlertErrorStroke, props);
-  } else if (validation === 'success') {
-    retVal = React__default.createElement(SvgCheckCircleStroke$1, props);
-  } else if (validation === 'warning') {
-    retVal = React__default.createElement(SvgAlertWarningStroke, props);
-  } else {
-    retVal = React__default.cloneElement(Children.only(children));
-  }
-  return retVal;
-};
-const COMPONENT_ID$B = 'forms.input_message_icon';
-const StyledMessageIcon = styled(MessageIcon).attrs({
-  'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.0.0-next.6',
-  'aria-hidden': null
-}).withConfig({
-  displayName: "StyledMessageIcon",
-  componentId: "sc-1ph2gba-0"
-})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID$B, props));
-StyledMessageIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const validationStyles = props => {
-  const rtl = props.theme.rtl;
-  const padding = math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`);
-  let color;
-  if (props.validation === 'error') {
-    color = getColorV8('dangerHue', 600, props.theme);
-  } else if (props.validation === 'success') {
-    color = getColorV8('successHue', 600, props.theme);
-  } else if (props.validation === 'warning') {
-    color = getColorV8('warningHue', 700, props.theme);
-  } else {
-    color = getColorV8('neutralHue', 700, props.theme);
-  }
-  return css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
-};
-const COMPONENT_ID$A = 'forms.input_message';
-const StyledMessage = styled.div.attrs(props => ({
-  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$A,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.6'
-})).withConfig({
-  displayName: "StyledMessage",
-  componentId: "sc-30hgg7-0"
-})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => validationStyles(props), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => math(`${props.theme.space.base} * 1px`), props => retrieveComponentStyles(COMPONENT_ID$A, props));
-StyledMessage.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$z = 'forms.input';
-const isInvalid = validation => {
-  return validation === 'warning' || validation === 'error';
-};
-const colorStyles$a = props => {
-  const HUE = 'primaryHue';
-  const SHADE = 600;
-  const placeholderColor = getColorV8('neutralHue', SHADE - 200, props.theme);
-  let borderColor;
-  let hoverBorderColor;
-  let focusBorderColor;
-  let focusRingHue = HUE;
-  let focusRingShade = SHADE;
-  if (props.validation) {
-    let hue = HUE;
-    if (props.validation === 'success') {
-      hue = 'successHue';
-    } else if (props.validation === 'warning') {
-      hue = 'warningHue';
-      focusRingShade = 700;
-    } else if (props.validation === 'error') {
-      hue = 'dangerHue';
-    }
-    borderColor = getColorV8(hue, SHADE, props.theme);
-    hoverBorderColor = borderColor;
-    focusBorderColor = borderColor;
-    focusRingHue = hue;
-  } else {
-    borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-    hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
-    focusBorderColor = hoverBorderColor;
-  }
-  const readOnlyBackgroundColor = getColorV8('neutralHue', SHADE - 500, props.theme);
-  const readOnlyBorderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-  const disabledBackgroundColor = readOnlyBackgroundColor;
-  const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme);
-  let controlledBorderColor = borderColor;
-  if (props.isFocused) {
-    controlledBorderColor = focusBorderColor;
-  }
-  if (props.isHovered) {
-    controlledBorderColor = hoverBorderColor;
-  }
-  return css(["border-color:", ";background-color:", ";color:", ";&::placeholder{color:", ";}&[readonly],&[aria-readonly='true']{border-color:", ";background-color:", ";}&:hover{border-color:", ";}", " &:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], controlledBorderColor, props.isBare ? 'transparent' : getColorV8('background', 600 , props.theme), getColorV8('foreground', 600 , props.theme), placeholderColor, readOnlyBorderColor, !props.isBare && readOnlyBackgroundColor, hoverBorderColor, focusStyles({
-    theme: props.theme,
-    inset: props.focusInset,
-    condition: !props.isBare,
-    hue: focusRingHue,
-    shade: focusRingShade,
-    styles: {
-      borderColor: focusBorderColor
-    }
-  }), disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor);
-};
-const sizeStyles$c = props => {
-  const fontSize = props.theme.fontSizes.md;
-  const paddingHorizontal = `${props.theme.space.base * 3}px`;
-  let height;
-  let paddingVertical;
-  let browseFontSize;
-  let swatchHeight;
-  if (props.isCompact) {
-    height = `${props.theme.space.base * 8}px`;
-    paddingVertical = `${props.theme.space.base * 1.5}px`;
-    browseFontSize = math(`${props.theme.fontSizes.sm} - 1`);
-    swatchHeight = `${props.theme.space.base * 6}px`;
-  } else {
-    height = `${props.theme.space.base * 10}px`;
-    paddingVertical = `${props.theme.space.base * 2.5}px`;
-    browseFontSize = props.theme.fontSizes.sm;
-    swatchHeight = `${props.theme.space.base * 7}px`;
-  }
-  const lineHeight = math(`${height} - (${paddingVertical} * 2) - (${props.theme.borderWidths.sm} * 2)`);
-  const padding = props.isBare ? '0' : `${em(paddingVertical, fontSize)} ${em(paddingHorizontal, fontSize)}`;
-  const swatchMarginVertical = math(`(${lineHeight} - ${swatchHeight}) / 2`);
-  const swatchMarginHorizontal = math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`);
-  return css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", "px;}"], padding, props.isBare ? '1em' : height, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math(`${swatchMarginHorizontal} * -2`), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
-};
-const StyledTextInput = styled.input.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.6',
-  'aria-invalid': isInvalid(props.validation)
-})).withConfig({
-  displayName: "StyledTextInput",
-  componentId: "sc-k12n8x-0"
-})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::placeholder{opacity:1;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', props => sizeStyles$c(props), props => colorStyles$a(props), props => retrieveComponentStyles(COMPONENT_ID$z, props));
-StyledTextInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$y = 'forms.textarea';
-const hiddenStyles = `
-  visibility: hidden;
-  position: absolute;
-  overflow: hidden;
-  height: 0;
-  top: 0;
-  left: 0;
-  transform: translateZ(0);
-`;
-const StyledTextarea = styled(StyledTextInput).attrs({
-  as: 'textarea',
-  'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledTextarea",
-  componentId: "sc-wxschl-0"
-})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => retrieveComponentStyles(COMPONENT_ID$y, props));
-StyledTextarea.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$x = 'forms.media_figure';
-const colorStyles$9 = props => {
-  let shade = 600;
-  if (props.isDisabled) {
-    shade = 400;
-  } else if (props.isHovered || props.isFocused) {
-    shade = 700;
-  }
-  return css(["color:", ";"], getColorV8('neutralHue', shade, props.theme));
-};
-const sizeStyles$b = props => {
-  const size = props.theme.iconSizes.md;
-  const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
-  const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
-  let margin;
-  if (props.position === 'start') {
-    margin = props.theme.rtl ? marginLast : marginFirst;
-  } else {
-    margin = props.theme.rtl ? marginFirst : marginLast;
-  }
-  return css(["margin:", ";width:", ";height:", ";"], margin, size, size);
-};
-const StyledTextMediaFigure = styled(
-_ref => {
-  let {
-    children,
-    position,
-    isHovered,
-    isFocused,
-    isDisabled,
-    isRotated,
-    theme,
-    ...props
-  } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
-  'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledTextMediaFigure",
-  componentId: "sc-1qepknj-0"
-})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => colorStyles$9(props), props => sizeStyles$b(props), props => retrieveComponentStyles(COMPONENT_ID$x, props));
-StyledTextMediaFigure.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$w = 'forms.faux_input';
-const VALIDATION_HUES = {
-  success: 'successHue',
-  warning: 'warningHue',
-  error: 'dangerHue'
-};
-function getValidationHue(validation) {
-  let defaultHue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'primaryHue';
-  if (validation) {
-    return VALIDATION_HUES[validation];
-  }
-  return defaultHue;
-}
-const colorStyles$8 = props => {
-  const {
-    theme,
-    validation,
-    focusInset,
-    isBare,
-    isFocused
-  } = props;
-  return css(["", ""], focusStyles({
-    theme,
-    inset: focusInset,
-    condition: !isBare,
-    hue: getValidationHue(validation),
-    shade: validation === 'warning' ? 700 : 600,
-    selector: isFocused ? '&' : '&:focus-within',
-    styles: {
-      borderColor: getColorV8(getValidationHue(validation), 600, theme)
-    }
-  }));
-};
-const StyledTextFauxInput = styled(StyledTextInput).attrs(props => ({
-  as: 'div',
-  'aria-readonly': props.isReadOnly,
-  'aria-disabled': props.isDisabled,
-  'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.6'
-})).withConfig({
-  displayName: "StyledTextFauxInput",
-  componentId: "sc-yqw7j9-0"
-})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;", " & > ", "{vertical-align:", ";", "{box-shadow:unset;}}& > ", "{flex-shrink:", ";}", ";"], props => props.mediaLayout ? 'inline-flex' : 'inline-block', props => props.mediaLayout && 'baseline', props => props.mediaLayout && !props.isDisabled ? 'text' : 'default', colorStyles$8, StyledTextInput, props => !props.mediaLayout && 'baseline', SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.mediaLayout && '0', props => retrieveComponentStyles(COMPONENT_ID$w, props));
-StyledTextFauxInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$v = 'forms.media_input';
-const StyledTextMediaInput = styled(StyledTextInput).attrs({
-  'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.6',
-  isBare: true
-}).withConfig({
-  displayName: "StyledTextMediaInput",
-  componentId: "sc-12i9xfi-0"
-})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$v, props));
-StyledTextMediaInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$u = 'forms.input_group';
-const positionStyles = props => {
-  const topMargin = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
-  return css(["", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}& > ", "{position:relative;flex:1 1 auto;margin-top:0;margin-bottom:0;width:auto;min-width:0;}"], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, topMargin, StyledTextInput);
-};
-const itemStyles = props => {
-  const startDirection = props.theme.rtl ? 'right' : 'left';
-  const endDirection = props.theme.rtl ? 'left' : 'right';
-  return css(["& > *{z-index:-1;}& > ", "{z-index:0;}& > ", ":disabled{z-index:-2;}& > ", ":hover,& > button:hover,& > ", ":focus-visible,& > button:focus-visible,& > ", "[data-garden-focus-visible],& > button[data-garden-focus-visible],& > ", ":active,& > button:active{z-index:1;}& > button:disabled{border-top-width:0;border-bottom-width:0;}& > *:not(:first-child){margin-", ":-", ";}& > *:first-child:not(:last-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:last-child:not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:not(:first-child):not(:last-child){border-radius:0;}"], StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection);
-};
-const StyledInputGroup = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledInputGroup",
-  componentId: "sc-kjh1f0-0"
-})(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], props => positionStyles(props), props => itemStyles(props), props => retrieveComponentStyles(COMPONENT_ID$u, props));
-StyledInputGroup.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$t = 'forms.radio_label';
-const sizeStyles$a = props => {
-  const size = props.theme.space.base * 4;
-  const padding = size + props.theme.space.base * 2;
-  const lineHeight = props.theme.space.base * 5;
-  return css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;line-height:", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size, lineHeight);
-};
-const StyledRadioLabel = styled(StyledLabel).attrs({
-  'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.6',
-  isRadio: true
-}).withConfig({
-  displayName: "StyledRadioLabel",
-  componentId: "sc-1aq2e5t-0"
-})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$a(props), props => retrieveComponentStyles(COMPONENT_ID$t, props));
-StyledRadioLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$s = 'forms.checkbox_label';
-const StyledCheckLabel = styled(StyledRadioLabel).attrs({
-  'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledCheckLabel",
-  componentId: "sc-x7nr1-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$s, props));
-StyledCheckLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$r = 'forms.radio_hint';
-const StyledRadioHint = styled(StyledHint).attrs({
-  'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledRadioHint",
-  componentId: "sc-eo8twg-0"
-})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$r, props));
-StyledRadioHint.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$q = 'forms.checkbox_hint';
-const StyledCheckHint = styled(StyledRadioHint).attrs({
-  'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledCheckHint",
-  componentId: "sc-1kl8e8c-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$q, props));
-StyledCheckHint.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$p = 'forms.radio';
-const colorStyles$7 = props => {
-  const SHADE = 600;
-  const borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-  const backgroundColor = getColorV8('background', 600 , props.theme);
-  const iconColor = backgroundColor;
-  const hoverBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
-  const focusBorderColor = hoverBorderColor;
-  const activeBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.2);
-  const activeBorderColor = focusBorderColor;
-  const checkedBorderColor = focusBorderColor;
-  const checkedBackgroundColor = checkedBorderColor;
-  const checkedHoverBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
-  const checkedHoverBackgroundColor = checkedHoverBorderColor;
-  const checkedActiveBorderColor = getColorV8('primaryHue', SHADE + 200, props.theme);
-  const checkedActiveBackgroundColor = checkedActiveBorderColor;
-  const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
-  return css(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}", " & ~ ", ":active::before{border-color:", ";background-color:", ";}&:checked ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":hover::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledRadioLabel, borderColor, backgroundColor, StyledRadioLabel, iconColor, StyledRadioLabel, hoverBorderColor, hoverBackgroundColor, focusStyles({
-    theme: props.theme,
-    styles: {
-      borderColor: focusBorderColor
-    },
-    selector: `&:focus-visible ~ ${StyledRadioLabel}::before, &[data-garden-focus-visible='true'] ~ ${StyledRadioLabel}::before`
-  }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
-};
-const sizeStyles$9 = props => {
-  const lineHeight = `${props.theme.space.base * 5}px`;
-  const size = `${props.theme.space.base * 4}px`;
-  const top = math(`(${lineHeight} - ${size}) / 2`);
-  const iconSize = props.theme.iconSizes.sm;
-  const iconPosition = math(`(${size} - ${iconSize}) / 2`);
-  const iconTop = math(`${iconPosition} + ${top}`);
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
-  return css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
-};
-const StyledRadioInput = styled.input.attrs({
-  'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.6',
-  type: 'radio'
-}).withConfig({
-  displayName: "StyledRadioInput",
-  componentId: "sc-qsavpv-0"
-})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, StyledRadioLabel, props => sizeStyles$9(props), StyledRadioLabel, StyledRadioLabel, props => colorStyles$7(props), StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$p, props));
-StyledRadioInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$o = 'forms.checkbox';
-const colorStyles$6 = props => {
-  const SHADE = 600;
-  const indeterminateBorderColor = getColorV8('primaryHue', SHADE, props.theme);
-  const indeterminateBackgroundColor = indeterminateBorderColor;
-  const indeterminateActiveBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
-  const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
-  const indeterminateDisabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
-  return css(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled:indeterminate ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledCheckLabel, indeterminateBorderColor, indeterminateBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor);
-};
-const StyledCheckInput = styled(StyledRadioInput).attrs({
-  'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.6',
-  type: 'checkbox'
-}).withConfig({
-  displayName: "StyledCheckInput",
-  componentId: "sc-176jxxe-0"
-})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles$6(props), props => retrieveComponentStyles(COMPONENT_ID$o, props));
-StyledCheckInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$n = 'forms.radio_message';
-const StyledRadioMessage = styled(StyledMessage).attrs({
-  'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledRadioMessage",
-  componentId: "sc-1pmi0q8-0"
-})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID$n, props));
-StyledRadioMessage.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$m = 'forms.checkbox_message';
-const StyledCheckMessage = styled(StyledRadioMessage).attrs({
-  'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledCheckMessage",
-  componentId: "sc-s4p6kd-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$m, props));
-StyledCheckMessage.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-var _path$m;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
-var SvgCheckSmFill = function SvgCheckSmFill(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M3 6l2 2 4-4"
-  })));
-};
-
-const COMPONENT_ID$l = 'forms.check_svg';
-const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
-  'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledCheckSvg",
-  componentId: "sc-fvxetk-0"
-})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID$l, props));
-StyledCheckSvg.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-var _path$l;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
-var SvgDashFill = function SvgDashFill(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeWidth: 2,
-    d: "M3 6h6"
-  })));
-};
-
-const COMPONENT_ID$k = 'forms.dash_svg';
-const StyledDashSvg = styled(SvgDashFill).attrs({
-  'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledDashSvg",
-  componentId: "sc-z3vq71-0"
-})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID$k, props));
-StyledDashSvg.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$j = 'forms.file_upload';
-const colorStyles$5 = props => {
-  const baseColor = getColorV8('primaryHue', 600, props.theme);
-  const hoverColor = getColorV8('primaryHue', 700, props.theme);
-  const activeColor = getColorV8('primaryHue', 800, props.theme);
-  const disabledBackgroundColor = getColorV8('neutralHue', 200, props.theme);
-  const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme);
-  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : getColorV8('neutralHue', 600, props.theme), props.isDragging && rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, rgba(baseColor, 0.08), hoverColor, focusStyles({
-    theme: props.theme,
-    hue: baseColor
-  }), activeColor, rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
-};
-const sizeStyles$8 = props => {
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
-  const paddingHorizontal = `${props.isCompact ? 2 : 4}em`;
-  const paddingVertical = math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`);
-  const fontSize = props.theme.fontSizes.md;
-  const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
-  return css(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
-};
-const StyledFileUpload = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledFileUpload",
-  componentId: "sc-1rodjgn-0"
-})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles$8, colorStyles$5, props => retrieveComponentStyles(COMPONENT_ID$j, props));
-StyledFileUpload.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$i = 'forms.file.close';
-const StyledFileClose = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledFileClose",
-  componentId: "sc-1m31jbf-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:none;background:transparent;cursor:pointer;color:", ";appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => getColorV8('foreground', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID$i, props));
-StyledFileClose.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$h = 'forms.file';
-const colorStyles$4 = props => {
-  let borderColor;
-  let focusBorderColor;
-  let foregroundColor;
-  if (props.validation === 'success') {
-    borderColor = getColorV8('successHue', 600, props.theme);
-    focusBorderColor = borderColor;
-    foregroundColor = borderColor;
-  } else if (props.validation === 'error') {
-    borderColor = getColorV8('dangerHue', 600, props.theme);
-    focusBorderColor = borderColor;
-    foregroundColor = borderColor;
-  } else {
-    borderColor = getColorV8('neutralHue', 300, props.theme);
-    focusBorderColor = getColorV8('primaryHue', 600, props.theme);
-    foregroundColor = getColorV8('foreground', 600 , props.theme);
-  }
-  return css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, focusStyles({
-    theme: props.theme,
-    inset: props.focusInset,
-    hue: focusBorderColor,
-    styles: {
-      borderColor: focusBorderColor
-    }
-  }));
-};
-const sizeStyles$7 = props => {
-  const size = `${props.theme.space.base * (props.isCompact ? 7 : 10)}px`;
-  const spacing = `${props.theme.space.base * (props.isCompact ? 2 : 3)}px`;
-  const fontSize = props.theme.fontSizes.md;
-  const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
-  return `
-    box-sizing: border-box;
-    border: ${props.theme.borders.sm};
-    border-radius: ${props.theme.borderRadii.md};
-    padding: 0 ${spacing};
-    height: ${size};
-    line-height: ${lineHeight};
-    font-size: ${fontSize};
-
-    & > span {
-      width: 100%;
-    }
-
-    & > ${StyledFileClose} {
-      width: ${size};
-      height: ${size};
-      margin-${props.theme.rtl ? 'left' : 'right'}: -${spacing};
-    }
-  `;
-};
-const StyledFile = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledFile",
-  componentId: "sc-195lzp1-0"
-})(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;transition:box-shadow 0.1s ease-in-out;", ";", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles$7, colorStyles$4, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID$h, props));
-StyledFile.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$g = 'forms.file.delete';
-const StyledFileDelete = styled(StyledFileClose).attrs({
-  'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledFileDelete",
-  componentId: "sc-a8nnhx-0"
-})(["color:", ";", ";"], props => getColorV8('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$g, props));
-StyledFileDelete.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$f = 'forms.file.icon';
-const StyledFileIcon = styled(_ref => {
-  let {
-    children,
-    isCompact,
-    theme,
-    ...props
-  } = _ref;
-  return React__default.cloneElement(Children.only(children), props);
-}).attrs({
-  'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledFileIcon",
-  componentId: "sc-7b3q0c-0"
-})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$f, props));
-StyledFileIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$e = 'forms.file_list';
-const StyledFileList = styled.ul.attrs({
-  'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledFileList",
-  componentId: "sc-gbahjg-0"
-})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID$e, props));
-StyledFileList.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$d = 'forms.file_list.item';
-const StyledFileListItem = styled.li.attrs({
-  'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledFileListItem",
-  componentId: "sc-1ova3lo-0"
-})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$d, props));
-StyledFileListItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-var _circle$3;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
-var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _circle$3 || (_circle$3 = /*#__PURE__*/React.createElement("circle", {
-    cx: 6,
-    cy: 6,
-    r: 2,
-    fill: "currentColor"
-  })));
-};
-
-const COMPONENT_ID$c = 'forms.radio_svg';
-const StyledRadioSvg = styled(SvgCircleSmFill$1).attrs({
-  'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledRadioSvg",
-  componentId: "sc-1r1qtr1-0"
-})(["transition:opacity 0.25s ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID$c, props));
-StyledRadioSvg.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$b = 'forms.toggle_label';
-const sizeStyles$6 = props => {
-  const size = props.theme.space.base * 10;
-  const padding = size + props.theme.space.base * 2;
-  return css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size);
-};
-const StyledToggleLabel = styled(StyledCheckLabel).attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledToggleLabel",
-  componentId: "sc-e0asdk-0"
-})(["", ";", ";"], props => sizeStyles$6(props), props => retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledToggleLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$a = 'forms.toggle_hint';
-const StyledToggleHint = styled(StyledHint).attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledToggleHint",
-  componentId: "sc-nziggu-0"
-})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), props => retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledToggleHint.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$9 = 'forms.toggle';
-const colorStyles$3 = props => {
-  const SHADE = 600;
-  const backgroundColor = getColorV8('neutralHue', SHADE - 100, props.theme);
-  const hoverBackgroundColor = getColorV8('neutralHue', SHADE, props.theme);
-  const activeBackgroundColor = getColorV8('neutralHue', SHADE + 100, props.theme);
-  return css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
-};
-const sizeStyles$5 = props => {
-  const height = `${props.theme.space.base * 5}px`;
-  const width = `${props.theme.space.base * 10}px`;
-  const iconSize = props.theme.iconSizes.md;
-  const iconPosition = math(`(${height} - ${iconSize}) / 2`);
-  const checkedIconPosition = math(`${width} - ${iconSize} - ${iconPosition}`);
-  return css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, props.theme.rtl ? 'right' : 'left', checkedIconPosition);
-};
-const StyledToggleInput = styled(StyledCheckInput).attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledToggleInput",
-  componentId: "sc-sgp47s-0"
-})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, props => sizeStyles$5(props), props => colorStyles$3(props), props => retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledToggleInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$8 = 'forms.toggle_message';
-const StyledToggleMessage = styled(StyledMessage).attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledToggleMessage",
-  componentId: "sc-13vuvl1-0"
-})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledToggleMessage.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-var _circle$2;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
-var SvgCircleSmFill = function SvgCircleSmFill(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _circle$2 || (_circle$2 = /*#__PURE__*/React.createElement("circle", {
-    cx: 8,
-    cy: 8,
-    r: 6,
-    fill: "currentColor"
-  })));
-};
-
-const COMPONENT_ID$7 = 'forms.toggle_svg';
-const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledToggleSvg",
-  componentId: "sc-162xbyx-0"
-})(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledToggleSvg.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$6 = 'forms.select';
-const colorStyles$2 = props => {
-  const color = getColorV8('neutralHue', 700, props.theme);
-  return css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
-};
-const sizeStyles$4 = props => {
-  const padding = math(`${props.theme.iconSizes.md} + ${props.theme.space.base * 5}`);
-  const iconVerticalPosition = `${props.theme.space.base * (props.isCompact ? 1.5 : 2.5) + 1}px`;
-  const iconHorizontalPosition = `${props.theme.space.base * 3}px`;
-  return css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], props.theme.rtl ? 'left' : 'right', !props.isBare && padding, StyledTextMediaFigure, iconVerticalPosition, props.theme.rtl ? 'left' : 'right', iconHorizontalPosition);
-};
-const StyledSelect = styled(StyledTextInput).attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.6',
-  as: 'select'
-}).withConfig({
-  displayName: "StyledSelect",
-  componentId: "sc-8xdxpt-0"
-})(["cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], props => sizeStyles$4(props), props => colorStyles$2(props), props => getColorV8('foreground', 600 , props.theme), StyledTextMediaFigure);
-StyledSelect.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = 'forms.select_wrapper';
-const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledSelectWrapper",
-  componentId: "sc-i7b6hw-0"
-})(["position:relative;padding:0;overflow:visible;& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], StyledSelect, SELECTOR_FOCUS_VISIBLE);
-StyledSelectWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$4 = 'forms.range';
-const thumbStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return `
-    &${modifier}::-moz-range-thumb {
-      ${styles}
-    }
-
-    &${modifier}::-ms-thumb {
-      ${styles}
-    }
-
-    &${modifier}::-webkit-slider-thumb {
-      ${styles}
-    }
-  `;
-};
-const trackStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return `
-    &${modifier}::-moz-range-track {
-      ${styles}
-    }
-
-    &${modifier}::-ms-track {
-      ${styles}
-    }
-
-    &${modifier}::-webkit-slider-runnable-track {
-      ${styles}
-    }
-  `;
-};
-const trackLowerStyles = function (styles) {
-  let modifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return `
-    &${modifier}::-moz-range-progress {
-      ${styles}
-    }
-
-    &${modifier}::-ms-fill-lower {
-      ${styles}
-    }
-  `;
-};
-const colorStyles$1 = props => {
-  const SHADE = 600;
-  const thumbBackgroundColor = getColorV8('primaryHue', SHADE, props.theme);
-  const thumbBorderColor = thumbBackgroundColor;
-  const thumbBoxShadow = props.theme.shadows.lg(math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), getColorV8('neutralHue', SHADE + 200, props.theme, 0.24));
-  const thumbFocusBoxShadow = getFocusBoxShadow({
-    theme: props.theme
-  });
-  const thumbActiveBackgroundColor = getColorV8('primaryHue', SHADE + 100, props.theme);
-  const thumbActiveBorderColor = thumbBorderColor;
-  const thumbDisabledBackgroundColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-  const thumbDisabledBorderColor = thumbDisabledBackgroundColor;
-  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
-  const thumbHoverBorderColor = thumbHoverBackgroundColor;
-  const trackBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
-  const trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : '';
-  const trackBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
-  const trackDisabledLowerBackgroundColor = props.hasLowerTrack ? thumbDisabledBackgroundColor : '';
-  const trackDisabledBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
-  return css(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles(`
-      background-color: ${trackBackgroundColor};
-      background-image: ${trackBackgroundImage}; /* provide means for styling lower range on WebKit */
-    `), thumbStyles(`
-      border-color: ${thumbBorderColor};
-      box-shadow: ${thumbBoxShadow};
-      background-color: ${thumbBackgroundColor};
-    `), trackLowerStyles(`
-      background-color: ${trackLowerBackgroundColor};
-    `), thumbStyles(`
-        transition:
-          border-color .25s ease-in-out,
-          background-color .25s ease-in-out;
-        border-color: ${thumbHoverBorderColor};
-        background-color: ${thumbHoverBackgroundColor};
-      `, ':hover'), thumbStyles(`
-        box-shadow: ${thumbFocusBoxShadow};
-      `, '[data-garden-focus-visible="true"]'), thumbStyles(`
-        border-color: ${thumbActiveBorderColor};
-        background-color: ${thumbActiveBackgroundColor};
-      `, ':active'), trackStyles(`
-        background-image: ${trackDisabledBackgroundImage};
-      `, ':disabled'), thumbStyles(`
-        border-color: ${thumbDisabledBorderColor};
-        box-shadow: none;
-        background-color: ${thumbDisabledBackgroundColor};
-      `, ':disabled'), trackLowerStyles(`
-        background-color: ${trackDisabledLowerBackgroundColor};
-      `, ':disabled'));
-};
-const sizeStyles$3 = props => {
-  const thumbSize = math(`${props.theme.space.base} * 5px`);
-  const trackHeight = math(`${props.theme.space.base} * 1.5px`);
-  const trackBorderRadius = trackHeight;
-  const trackMargin = math(`(${thumbSize} - ${trackHeight}) / 2 + ${props.theme.shadowWidths.md}`);
-  const thumbMargin = math(`(${trackHeight} - ${thumbSize}) / 2`);
-  return css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, math(`${props.theme.space.base} * 2px`), trackStyles(`
-      margin: ${trackMargin} 0;
-      border-radius: ${trackBorderRadius};
-      height: ${trackHeight};
-    `), thumbStyles(`
-      margin: ${thumbMargin} 0; /* reset for IE */
-      width: ${thumbSize};
-      height: ${thumbSize};
-    `), trackLowerStyles(`
-      border-top-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
-      border-bottom-${props.theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
-      height: ${trackHeight};
-    `));
-};
-const StyledRangeInput = styled.input.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.6',
-  type: 'range',
-  style: {
-    backgroundSize: props.hasLowerTrack && props.backgroundSize
-  }
-})).withConfig({
-  displayName: "StyledRangeInput",
-  componentId: "sc-1iv2yqp-0"
-})(["appearance:none;direction:", ";margin:0;background-color:inherit;cursor:pointer;padding:0;width:100%;vertical-align:middle;", " &::-webkit-slider-container,&::-webkit-slider-runnable-track{background-size:inherit;}", ";", " ", ";&::-moz-focus-outer{border:0;}&::-ms-tooltip{display:none;}&:focus{outline:none;}&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => trackStyles(`
-      appearance: none;
-      border-color: transparent; /* reset for IE */
-      background-repeat: repeat-y;
-      background-size: 0;
-      background-position: ${props.theme.rtl ? '100% 100%' : '0% 0%'};
-      width: 99.8%; /* fix for IE which cuts off the upper track's border radius */
-      color: transparent; /* reset for IE */
-      box-sizing: border-box; /* reset for IE */
-    `), props => sizeStyles$3(props), props => thumbStyles(`
-      appearance: none;
-      transition: box-shadow .1s ease-in-out;
-      border: ${props.theme.borders.md};
-      border-radius: 100%;
-      box-sizing: border-box;
-    `), props => colorStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledRangeInput.defaultProps = {
-  backgroundSize: '0%',
-  hasLowerTrack: true,
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'forms.tile_icon';
-const sizeStyles$2 = props => {
-  const iconSize = math(`${props.theme.iconSizes.md} * 2`);
-  let position;
-  let top;
-  let horizontalValue;
-  if (!props.isCentered) {
-    position = 'absolute';
-    top = `${props.theme.space.base * 6}px`;
-    horizontalValue = `left: ${props.theme.space.base * 5}px`;
-    if (props.theme.rtl) {
-      horizontalValue = `right: ${props.theme.space.base * 5}px`;
-    }
-  }
-  return css(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize);
-};
-const StyledTileIcon = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledTileIcon",
-  componentId: "sc-1wazhg4-0"
-})(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], props => sizeStyles$2(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledTileIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'forms.tile';
-const colorStyles = props => {
-  const SHADE = 600;
-  const iconColor = getColorV8('neutralHue', SHADE, props.theme);
-  const color = getColorV8('neutralHue', SHADE + 200, props.theme);
-  const borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-  const hoverBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
-  const focusBorderColor = hoverBorderColor;
-  const activeBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.2);
-  const activeBorderColor = focusBorderColor;
-  const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme);
-  const disabledColor = getColorV8('neutralHue', SHADE - 200, props.theme);
-  const selectedBorderColor = focusBorderColor;
-  const selectedBackgroundColor = selectedBorderColor;
-  const selectedHoverBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
-  const selectedHoverBackgroundColor = selectedHoverBorderColor;
-  const selectedActiveBorderColor = getColorV8('primaryHue', SHADE + 200, props.theme);
-  const selectedActiveBackgroundColor = selectedActiveBorderColor;
-  const selectedDisabledBackgroundColor = disabledBorderColor;
-  return css(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}", " &:active:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-selected='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):hover{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):active{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true'][aria-disabled='true']{background-color:", ";color:", ";", "{color:", ";}}"], props.theme.borders.sm, getColorV8('neutralHue', SHADE - 300, props.theme), borderColor, getColorV8('background', 600 , props.theme), color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, focusStyles({
-    theme: props.theme,
-    hue: focusBorderColor,
-    styles: {
-      borderColor: focusBorderColor
-    },
-    selector: `&:focus-within`
-  }), activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, getColorV8('background', 600 , props.theme), StyledTileIcon, getColorV8('background', 600 , props.theme), selectedHoverBorderColor, selectedHoverBackgroundColor, getColorV8('background', 600 , props.theme), StyledTileIcon, getColorV8('background', 600 , props.theme), selectedActiveBorderColor, selectedActiveBackgroundColor, getColorV8('background', 600 , props.theme), StyledTileIcon, getColorV8('background', 600 , props.theme), disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor);
-};
-const StyledTile = styled.label.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.6',
-  'data-garden-selected': props.isSelected
-})).withConfig({
-  displayName: "StyledTile",
-  componentId: "sc-1jjvmxs-0"
-})(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";cursor:", ";padding:", "px;direction:", ";min-width:132px;word-break:break-word;", ";", ";"], props => props.theme.borderRadii.md, props => !props.isDisabled && 'pointer', props => props.theme.space.base * 5, props => props.theme.rtl && 'rtl', props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledTile.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'forms.tile_description';
-const sizeStyles$1 = props => {
-  let marginDirection = 'left';
-  let marginValue;
-  if (props.theme.rtl) {
-    marginDirection = 'right';
-  }
-  if (!props.isCentered) {
-    marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
-  }
-  return css(["margin-top:", "px;margin-", ":", ";"], props.theme.space.base, marginDirection, marginValue);
-};
-const StyledTileDescription = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledTileDescription",
-  componentId: "sc-xfuu7u-0"
-})(["display:block;text-align:", ";line-height:", ";font-size:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => sizeStyles$1(props), props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledTileDescription.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const StyledTileInput = styled.input.withConfig({
-  displayName: "StyledTileInput",
-  componentId: "sc-1nq2m6q-0"
-})(["position:absolute;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
-StyledTileInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'forms.tile_label';
-const sizeStyles = props => {
-  let marginDirection = 'left';
-  let marginTop = `${props.theme.space.base * 2}px`;
-  let marginValue;
-  if (props.theme.rtl) {
-    marginDirection = 'right';
-  }
-  if (!props.isCentered) {
-    marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
-    marginTop = '0';
-  }
-  return css(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue);
-};
-const StyledTileLabel = styled.span.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledTileLabel",
-  componentId: "sc-1mypv27-0"
-})(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTileLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const InputContext = createContext(undefined);
-const useInputContext = () => {
-  return useContext(InputContext);
-};
-
-const Hint = React__default.forwardRef((props, ref) => {
-  const {
-    hasHint,
-    setHasHint,
-    getHintProps
-  } = useFieldContext() || {};
-  const type = useInputContext();
-  useEffect(() => {
-    if (!hasHint && setHasHint) {
-      setHasHint(true);
-    }
-    return () => {
-      if (hasHint && setHasHint) {
-        setHasHint(false);
-      }
-    };
-  }, [hasHint, setHasHint]);
-  let HintComponent;
-  if (type === 'checkbox') {
-    HintComponent = StyledCheckHint;
-  } else if (type === 'radio') {
-    HintComponent = StyledRadioHint;
-  } else if (type === 'toggle') {
-    HintComponent = StyledToggleHint;
-  } else {
-    HintComponent = StyledHint;
-  }
-  let combinedProps = props;
-  if (getHintProps) {
-    combinedProps = getHintProps(combinedProps);
-  }
-  return React__default.createElement(HintComponent, _extends$t({
-    ref: ref
-  }, combinedProps));
-});
-Hint.displayName = 'Hint';
-
-const VALIDATION = ['success', 'warning', 'error'];
-const FILE_VALIDATION = ['success', 'error'];
-const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
-
-const Message = React__default.forwardRef((_ref, ref) => {
-  let {
-    validation,
-    validationLabel,
-    children,
-    ...props
-  } = _ref;
-  const {
-    hasMessage,
-    setHasMessage,
-    getMessageProps
-  } = useFieldContext() || {};
-  const type = useInputContext();
-  useEffect(() => {
-    if (!hasMessage && setHasMessage) {
-      setHasMessage(true);
-    }
-    return () => {
-      if (hasMessage && setHasMessage) {
-        setHasMessage(false);
-      }
-    };
-  }, [hasMessage, setHasMessage]);
-  let MessageComponent;
-  if (type === 'checkbox') {
-    MessageComponent = StyledCheckMessage;
-  } else if (type === 'radio') {
-    MessageComponent = StyledRadioMessage;
-  } else if (type === 'toggle') {
-    MessageComponent = StyledToggleMessage;
-  } else {
-    MessageComponent = StyledMessage;
-  }
-  let combinedProps = {
-    validation,
-    validationLabel,
-    ...props
-  };
-  if (getMessageProps) {
-    combinedProps = getMessageProps(combinedProps);
-  }
-  const ariaLabel = useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
-  return React__default.createElement(MessageComponent, _extends$t({
-    ref: ref
-  }, combinedProps), validation && React__default.createElement(StyledMessageIcon, {
-    validation: validation,
-    "aria-label": ariaLabel
-  }), children);
-});
-Message.displayName = 'Message';
-Message.propTypes = {
-  validation: PropTypes.oneOf(VALIDATION),
-  validationLabel: PropTypes.string
-};
-
-const FieldsetContext = createContext(undefined);
-const useFieldsetContext = () => {
-  const fieldsetContext = useContext(FieldsetContext);
-  return fieldsetContext;
-};
-
-const Label$1 = React__default.forwardRef((props, ref) => {
-  const fieldContext = useFieldContext();
-  const fieldsetContext = useFieldsetContext();
-  const type = useInputContext();
-  let combinedProps = props;
-  if (fieldContext) {
-    combinedProps = fieldContext.getLabelProps(combinedProps);
-    if (type === undefined) {
-      const {
-        setIsLabelActive,
-        setIsLabelHovered
-      } = fieldContext;
-      combinedProps = {
-        ...combinedProps,
-        onMouseUp: composeEventHandlers(props.onMouseUp, () => {
-          setIsLabelActive(false);
-        }),
-        onMouseDown: composeEventHandlers(props.onMouseDown, () => {
-          setIsLabelActive(true);
-        }),
-        onMouseEnter: composeEventHandlers(props.onMouseEnter, () => {
-          setIsLabelHovered(true);
-        }),
-        onMouseLeave: composeEventHandlers(props.onMouseLeave, () => {
-          setIsLabelHovered(false);
-        })
-      };
-    }
-  }
-  if (fieldsetContext) {
-    combinedProps = {
-      ...combinedProps,
-      isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular
-    };
-  }
-  if (type === 'radio') {
-    return React__default.createElement(StyledRadioLabel, _extends$t({
-      ref: ref
-    }, combinedProps), React__default.createElement(StyledRadioSvg, null), props.children);
-  } else if (type === 'checkbox') {
-    const onLabelSelect = e => {
-      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-      if (fieldContext && isFirefox && e.target instanceof Element) {
-        const inputId = e.target.getAttribute('for');
-        if (!inputId) return;
-        const input = document.getElementById(inputId);
-        if (input && input.type === 'checkbox') {
-          if (e.shiftKey) {
-            input.click();
-            input.checked = true;
-          }
-          input.focus();
-        }
-      }
-    };
-    combinedProps = {
-      ...combinedProps,
-      onClick: composeEventHandlers(combinedProps.onClick, onLabelSelect)
-    };
-    return React__default.createElement(StyledCheckLabel, _extends$t({
-      ref: ref
-    }, combinedProps), React__default.createElement(StyledCheckSvg, null), React__default.createElement(StyledDashSvg, null), props.children);
-  } else if (type === 'toggle') {
-    return React__default.createElement(StyledToggleLabel, _extends$t({
-      ref: ref
-    }, combinedProps), React__default.createElement(StyledToggleSvg, null), props.children);
-  }
-  return React__default.createElement(StyledLabel, _extends$t({
-    ref: ref
-  }, combinedProps));
-});
-Label$1.displayName = 'Label';
-Label$1.propTypes = {
-  isRegular: PropTypes.bool
-};
-
-const FieldComponent = React__default.forwardRef((props, ref) => {
-  const [hasHint, setHasHint] = useState(false);
-  const [hasMessage, setHasMessage] = useState(false);
-  const [isLabelActive, setIsLabelActive] = useState(false);
-  const [isLabelHovered, setIsLabelHovered] = useState(false);
-  const {
-    getInputProps,
-    getMessageProps,
-    ...propGetters
-  } = useField({
-    idPrefix: props.id,
-    hasHint,
-    hasMessage
-  });
-  const fieldProps = useMemo(() => ({
-    ...propGetters,
-    getInputProps,
-    getMessageProps,
-    isLabelActive,
-    setIsLabelActive,
-    isLabelHovered,
-    setIsLabelHovered,
-    hasHint,
-    setHasHint,
-    hasMessage,
-    setHasMessage
-  }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
-  return React__default.createElement(FieldContext.Provider, {
-    value: fieldProps
-  }, React__default.createElement(StyledField, _extends$t({}, props, {
-    ref: ref
-  })));
-});
-FieldComponent.displayName = 'Field';
-const Field = FieldComponent;
-Field.Hint = Hint;
-Field.Label = Label$1;
-Field.Message = Message;
-
-const LegendComponent = forwardRef((props, ref) => {
-  const fieldsetContext = useFieldsetContext();
-  return React__default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
-    ref: ref
-  }));
-});
-LegendComponent.displayName = 'Fieldset.Legend';
-const Legend = LegendComponent;
-
-const FieldsetComponent = forwardRef((props, ref) => {
-  const fieldsetContext = useMemo(() => ({
-    isCompact: props.isCompact
-  }), [props.isCompact]);
-  return React__default.createElement(FieldsetContext.Provider, {
-    value: fieldsetContext
-  }, React__default.createElement(StyledFieldset, _extends$t({}, props, {
-    ref: ref
-  })));
-});
-FieldsetComponent.displayName = 'Fieldset';
-FieldsetComponent.propTypes = {
-  isCompact: PropTypes.bool
-};
-const Fieldset = FieldsetComponent;
-Fieldset.Legend = Legend;
-
-const Checkbox = React__default.forwardRef((_ref, ref) => {
-  let {
-    indeterminate,
-    children,
-    ...props
-  } = _ref;
-  const fieldsetContext = useFieldsetContext();
-  const fieldContext = useFieldContext();
-  const inputRef = inputElement => {
-    inputElement && (inputElement.indeterminate = indeterminate);
-  };
-  const combinedRef = inputElement => {
-    [inputRef, ref].forEach(targetRef => {
-      if (targetRef) {
-        if (typeof targetRef === 'function') {
-          targetRef(inputElement);
-        } else {
-          targetRef.current = inputElement;
-        }
-      }
-    });
-  };
-  let combinedProps = {
-    ref: combinedRef,
-    ...props,
-    ...fieldsetContext
-  };
-  if (fieldContext) {
-    combinedProps = fieldContext.getInputProps(combinedProps);
-  }
-  return React__default.createElement(InputContext.Provider, {
-    value: "checkbox"
-  }, React__default.createElement(StyledCheckInput, combinedProps), children);
-});
-Checkbox.displayName = 'Checkbox';
-Checkbox.propTypes = {
-  isCompact: PropTypes.bool,
-  indeterminate: PropTypes.bool
-};
-
-const InputGroupContext = createContext(undefined);
-const useInputGroupContext = () => {
-  return useContext(InputGroupContext);
-};
-
-const Input = React__default.forwardRef((_ref, ref) => {
-  let {
-    onSelect,
-    ...props
-  } = _ref;
-  const fieldContext = useFieldContext();
-  const inputGroupContext = useInputGroupContext();
-  const onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, event => {
-    event.currentTarget.select();
-  }) : onSelect;
-  let combinedProps = {
-    ref,
-    onSelect: onSelectHandler,
-    ...props
-  };
-  if (inputGroupContext) {
-    combinedProps = {
-      ...combinedProps,
-      isCompact: inputGroupContext.isCompact || combinedProps.isCompact,
-      focusInset: props.focusInset === undefined ? true : props.focusInset
-    };
-  }
-  if (fieldContext) {
-    combinedProps = fieldContext.getInputProps(combinedProps);
-  }
-  return React__default.createElement(StyledTextInput, combinedProps);
-});
-Input.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  validation: PropTypes.oneOf(VALIDATION)
-};
-Input.displayName = 'Input';
-
-const Radio = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  const fieldsetContext = useFieldsetContext();
-  const fieldContext = useFieldContext();
-  let combinedProps = {
-    ref,
-    ...props,
-    ...fieldsetContext
-  };
-  if (fieldContext) {
-    combinedProps = fieldContext.getInputProps(combinedProps);
-  }
-  return React__default.createElement(InputContext.Provider, {
-    value: "radio"
-  }, React__default.createElement(StyledRadioInput, combinedProps), children);
-});
-Radio.displayName = 'Radio';
-Radio.propTypes = {
-  isCompact: PropTypes.bool
-};
-
-const Range = React__default.forwardRef((_ref, ref) => {
-  let {
-    hasLowerTrack,
-    min,
-    max,
-    step,
-    ...props
-  } = _ref;
-  const [backgroundSize, setBackgroundSize] = useState('0');
-  const rangeRef = useRef();
-  const fieldContext = useFieldContext();
-  const updateBackgroundWidthFromInput = useCallback(rangeTarget => {
-    let relativeMax = max;
-    const {
-      value
-    } = rangeTarget;
-    if (parseFloat(relativeMax) < parseFloat(min)) {
-      relativeMax = 100;
-    }
-    const percentage = 100 * (value - min) / (relativeMax - min);
-    setBackgroundSize(`${percentage}%`);
-  },
-  [max, min, step]);
-  useEffect(() => {
-    updateBackgroundWidthFromInput(rangeRef.current);
-  }, [rangeRef, updateBackgroundWidthFromInput, props.value]);
-  const onChange = hasLowerTrack ? composeEventHandlers(props.onChange, event => {
-    updateBackgroundWidthFromInput(event.target);
-  }) : props.onChange;
-  let combinedProps = {
-    ref: mergeRefs([rangeRef, ref]),
-    hasLowerTrack,
-    min,
-    max,
-    step,
-    backgroundSize,
-    ...props,
-    onChange
-  };
-  if (fieldContext) {
-    combinedProps = fieldContext.getInputProps(combinedProps);
-  }
-  return React__default.createElement(StyledRangeInput, combinedProps);
-});
-Range.defaultProps = {
-  hasLowerTrack: true,
-  min: 0,
-  max: 100,
-  step: 1
-};
-Range.displayName = 'Range';
-
-const parseStyleValue = value => {
-  return parseInt(value, 10) || 0;
-};
-const Textarea = React__default.forwardRef((_ref, ref) => {
-  let {
-    minRows,
-    maxRows,
-    style,
-    onChange,
-    onSelect,
-    ...props
-  } = _ref;
-  const fieldContext = useFieldContext();
-  const textAreaRef = useRef();
-  const shadowTextAreaRef = useRef(null);
-  const [state, setState] = useState({
-    overflow: false,
-    height: 0
-  });
-  const isControlled = props.value !== null && props.value !== undefined;
-  const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable;
-  const calculateHeight = useCallback(() => {
-    if (!isAutoResizable) {
-      return;
-    }
-    const textarea = textAreaRef.current;
-    const computedStyle = window.getComputedStyle(textarea);
-    const shadowTextArea = shadowTextAreaRef.current;
-    shadowTextArea.style.width = computedStyle.width;
-    shadowTextArea.value = textarea.value || textarea.placeholder || ' ';
-    const boxSizing = computedStyle.boxSizing;
-    const padding = parseStyleValue(computedStyle.paddingBottom) + parseStyleValue(computedStyle.paddingTop);
-    const border = parseStyleValue(computedStyle.borderTopWidth) + parseStyleValue(computedStyle.borderBottomWidth);
-    const innerHeight = shadowTextArea.scrollHeight - padding;
-    shadowTextArea.value = 'x';
-    const singleRowHeight = shadowTextArea.scrollHeight - padding;
-    let outerHeight = innerHeight;
-    if (minRows) {
-      outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
-    }
-    if (maxRows) {
-      outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
-    }
-    outerHeight = Math.max(outerHeight, singleRowHeight);
-    const updatedHeight = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
-    const overflow = Math.abs(outerHeight - innerHeight) <= 1;
-    setState(prevState => {
-      if (updatedHeight > 0 && Math.abs((prevState.height || 0) - updatedHeight) > 1 || prevState.overflow !== overflow) {
-        return {
-          overflow,
-          height: updatedHeight
-        };
-      }
-      return prevState;
-    });
-  }, [maxRows, minRows, textAreaRef, isAutoResizable]);
-  const onChangeHandler = useCallback(e => {
-    if (!isControlled) {
-      calculateHeight();
-    }
-    if (onChange) {
-      onChange(e);
-    }
-  }, [calculateHeight, isControlled, onChange]);
-  useLayoutEffect(() => {
-    calculateHeight();
-  });
-  const computedStyle = {};
-  if (isAutoResizable) {
-    computedStyle.height = state.height;
-    computedStyle.overflow = state.overflow ? 'hidden' : undefined;
-  }
-  const onSelectHandler = props.readOnly ? composeEventHandlers(onSelect, event => {
-    event.currentTarget.select();
-  }) : onSelect;
-  let combinedProps = {
-    ref: mergeRefs([textAreaRef, ref]),
-    rows: minRows,
-    onChange: onChangeHandler,
-    onSelect: onSelectHandler,
-    style: {
-      ...computedStyle,
-      ...style
-    },
-    ...props
-  };
-  if (fieldContext) {
-    combinedProps = fieldContext.getInputProps(combinedProps);
-  }
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTextarea, combinedProps), isAutoResizable && React__default.createElement(StyledTextarea, {
-    "aria-hidden": true,
-    readOnly: true,
-    isHidden: true,
-    className: props.className,
-    ref: shadowTextAreaRef,
-    tabIndex: -1,
-    isBare: props.isBare,
-    isCompact: props.isCompact,
-    style: style
-  }));
-});
-Textarea.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  isResizable: PropTypes.bool,
-  minRows: PropTypes.number,
-  maxRows: PropTypes.number,
-  validation: PropTypes.oneOf(VALIDATION)
-};
-Textarea.displayName = 'Textarea';
-
-const Toggle = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  const fieldsetContext = useFieldsetContext();
-  const fieldContext = useFieldContext();
-  let combinedProps = {
-    ref,
-    ...props,
-    ...fieldsetContext
-  };
-  if (fieldContext) {
-    combinedProps = fieldContext.getInputProps(combinedProps);
-  }
-  return React__default.createElement(InputContext.Provider, {
-    value: "toggle"
-  }, React__default.createElement(StyledToggleInput, combinedProps), children);
-});
-Toggle.displayName = 'Toggle';
-Toggle.propTypes = {
-  isCompact: PropTypes.bool
-};
-
-var _path$k;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
-var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
-  })));
-};
-
-const StartIconComponent = props => React__default.createElement(StyledTextMediaFigure, _extends$t({
-  position: "start"
-}, props));
-StartIconComponent.displayName = 'FauxInput.StartIcon';
-const StartIcon = StartIconComponent;
-
-const EndIconComponent = props => React__default.createElement(StyledTextMediaFigure, _extends$t({
-  position: "end"
-}, props));
-EndIconComponent.displayName = 'FauxInput.EndIcon';
-const EndIcon = EndIconComponent;
-
-const FauxInputComponent = forwardRef((_ref, ref) => {
-  let {
-    onFocus,
-    onBlur,
-    disabled,
-    readOnly,
-    isFocused: controlledIsFocused,
-    ...props
-  } = _ref;
-  const [isFocused, setIsFocused] = useState(false);
-  const onFocusHandler = composeEventHandlers(onFocus, () => {
-    setIsFocused(true);
-  });
-  const onBlurHandler = composeEventHandlers(onBlur, () => {
-    setIsFocused(false);
-  });
-  return React__default.createElement(StyledTextFauxInput, _extends$t({
-    onFocus: onFocusHandler,
-    onBlur: onBlurHandler,
-    isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
-    isReadOnly: readOnly,
-    isDisabled: disabled,
-    tabIndex: disabled ? undefined : 0
-  }, props, {
-    ref: ref
-  }));
-});
-FauxInputComponent.displayName = 'FauxInput';
-FauxInputComponent.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  validation: PropTypes.oneOf(VALIDATION),
-  isFocused: PropTypes.bool,
-  isHovered: PropTypes.bool
-};
-const FauxInput = FauxInputComponent;
-FauxInput.EndIcon = EndIcon;
-FauxInput.StartIcon = StartIcon;
-
-const Select = React__default.forwardRef((_ref, ref) => {
-  let {
-    disabled,
-    isCompact,
-    validation,
-    focusInset,
-    isBare,
-    ...props
-  } = _ref;
-  const fieldContext = useFieldContext();
-  let combinedProps = {
-    disabled,
-    isBare,
-    isCompact,
-    validation,
-    focusInset,
-    ref,
-    ...props
-  };
-  if (fieldContext) {
-    combinedProps = fieldContext.getInputProps(combinedProps);
-  }
-  return React__default.createElement(StyledSelectWrapper, {
-    isCompact: isCompact,
-    isBare: isBare,
-    validation: validation,
-    focusInset: focusInset
-  }, React__default.createElement(StyledSelect, combinedProps), !isBare && React__default.createElement(FauxInput.EndIcon, {
-    isDisabled: disabled
-  }, React__default.createElement(SvgChevronDownStroke, null)));
-});
-Select.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  validation: PropTypes.oneOf(VALIDATION)
-};
-Select.displayName = 'Select';
-
-const TilesContext = createContext(undefined);
-const useTilesContext = () => {
-  return useContext(TilesContext);
-};
-
-const TileComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    value,
-    disabled,
-    ...props
-  } = _ref;
-  const tilesContext = useTilesContext();
-  const inputRef = useRef(null);
-  let inputProps;
-  if (tilesContext) {
-    inputProps = {
-      name: tilesContext.name,
-      checked: tilesContext.value === value,
-      onChange: tilesContext.onChange
-    };
-  }
-  return React__default.createElement(StyledTile, _extends$t({
-    ref: ref,
-    "aria-disabled": disabled,
-    isDisabled: disabled,
-    isSelected: tilesContext && tilesContext.value === value
-  }, props), children, React__default.createElement(StyledTileInput, _extends$t({}, inputProps, {
-    disabled: disabled,
-    value: value,
-    type: "radio",
-    ref: inputRef
-  })));
-});
-TileComponent.displayName = 'Tiles.Tile';
-TileComponent.propTypes = {
-  value: PropTypes.string,
-  disabled: PropTypes.bool
-};
-const Tile = TileComponent;
-
-const DescriptionComponent = forwardRef((props, ref) => {
-  const tilesContext = useTilesContext();
-  return React__default.createElement(StyledTileDescription, _extends$t({
-    ref: ref,
-    isCentered: tilesContext && tilesContext.isCentered
-  }, props));
-});
-DescriptionComponent.displayName = 'Tiles.Description';
-const Description = DescriptionComponent;
-
-const IconComponent = forwardRef((props, ref) => {
-  const tileContext = useTilesContext();
-  return React__default.createElement(StyledTileIcon, _extends$t({
-    ref: ref,
-    isCentered: tileContext && tileContext.isCentered
-  }, props));
-});
-IconComponent.displayName = 'Tiles.Icon';
-const Icon = IconComponent;
-
-const LabelComponent = forwardRef((props, forwardedRef) => {
-  const [title, setTitle] = useState('');
-  const ref = useRef();
-  const tilesContext = useTilesContext();
-  useEffect(() => {
-    if (ref.current) {
-      setTitle(ref.current.textContent || undefined);
-    }
-  }, [ref]);
-  return React__default.createElement(StyledTileLabel, _extends$t({
-    ref: mergeRefs([ref, forwardedRef]),
-    title: title,
-    isCentered: tilesContext && tilesContext.isCentered
-  }, props));
-});
-LabelComponent.displayName = 'Tiles.Label';
-const Label = LabelComponent;
-
-const TilesComponent = forwardRef((_ref, ref) => {
-  let {
-    onChange,
-    value: controlledValue,
-    name,
-    isCentered,
-    ...props
-  } = _ref;
-  const [value, setValue] = useState(controlledValue);
-  const handleOnChange = useCallback(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    setValue(args[0].target.value);
-    if (onChange) {
-      onChange(...args);
-    }
-  }, [onChange]);
-  const selectedValue = getControlledValue(controlledValue, value);
-  const tileContext = useMemo(() => ({
-    onChange: handleOnChange,
-    value: selectedValue,
-    name,
-    isCentered
-  }), [handleOnChange, selectedValue, name, isCentered]);
-  return React__default.createElement(TilesContext.Provider, {
-    value: tileContext
-  }, React__default.createElement("div", _extends$t({
-    ref: ref,
-    role: "radiogroup"
-  }, props)));
-});
-TilesComponent.displayName = 'Tiles';
-TilesComponent.propTypes = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  name: PropTypes.string.isRequired,
-  isCentered: PropTypes.bool
-};
-TilesComponent.defaultProps = {
-  isCentered: true
-};
-const Tiles = TilesComponent;
-Tiles.Description = Description;
-Tiles.Icon = Icon;
-Tiles.Label = Label;
-Tiles.Tile = Tile;
-
-const InputGroup = React__default.forwardRef((_ref, ref) => {
-  let {
-    isCompact,
-    ...props
-  } = _ref;
-  const contextValue = useMemo(() => ({
-    isCompact
-  }), [isCompact]);
-  return React__default.createElement(InputGroupContext.Provider, {
-    value: contextValue
-  }, React__default.createElement(StyledInputGroup, _extends$t({
-    ref: ref,
-    isCompact: isCompact
-  }, props)));
-});
-InputGroup.displayName = 'InputGroup';
-InputGroup.propTypes = {
-  isCompact: PropTypes.bool
-};
-
-const FileUpload = React__default.forwardRef((_ref, ref) => {
-  let {
-    disabled,
-    ...props
-  } = _ref;
-  return (
-    React__default.createElement(StyledFileUpload, _extends$t({
-      ref: ref,
-      "aria-disabled": disabled
-    }, props, {
-      role: "button"
-    }))
-  );
-});
-FileUpload.propTypes = {
-  isDragging: PropTypes.bool,
-  isCompact: PropTypes.bool,
-  disabled: PropTypes.bool
-};
-FileUpload.displayName = 'FileUpload';
-
-const ItemComponent = forwardRef((_ref, ref) => {
-  let {
-    ...props
-  } = _ref;
-  return React__default.createElement(StyledFileListItem, _extends$t({}, props, {
-    ref: ref
-  }));
-});
-ItemComponent.displayName = 'FileList.Item';
-const Item = ItemComponent;
-
-const FileListComponent = forwardRef((_ref, ref) => {
-  let {
-    ...props
-  } = _ref;
-  return React__default.createElement(StyledFileList, _extends$t({}, props, {
-    ref: ref
-  }));
-});
-FileListComponent.displayName = 'FileList';
-const FileList = FileListComponent;
-FileList.Item = Item;
-
-var _path$j;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
-var SvgXStroke$1 = function SvgXStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M3 9l6-6m0 6L3 3"
-  })));
-};
-
-var _path$i;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
-var SvgXStroke = function SvgXStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M3 13L13 3m0 10L3 3"
-  })));
-};
-
-const FileContext = createContext(undefined);
-const useFileContext = () => {
-  return useContext(FileContext);
-};
-
-const CloseComponent = React__default.forwardRef((props, ref) => {
-  const fileContext = useFileContext();
-  const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.preventDefault()
-  );
-  const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close');
-  return React__default.createElement(StyledFileClose, _extends$t({
-    ref: ref,
-    "aria-label": ariaLabel
-  }, props, {
-    type: "button",
-    tabIndex: -1,
-    onMouseDown: onMouseDown
-  }), fileContext && fileContext.isCompact ? React__default.createElement(SvgXStroke$1, null) : React__default.createElement(SvgXStroke, null));
-});
-CloseComponent.displayName = 'File.Close';
-const Close = CloseComponent;
-
-var _path$h;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
-var SvgTrashStroke$1 = function SvgTrashStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M4.5 2.5V1c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v1.5M2 2.5h8m-5.5 7V5m3 4.5V5m-5-.5V11c0 .3.2.5.5.5h6c.3 0 .5-.2.5-.5V4.5"
-  })));
-};
-
-var _path$g;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
-var SvgTrashStroke = function SvgTrashStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M6.5 2.5V1c0-.3.2-.5.5-.5h2c.3 0 .5.2.5.5v1.5M3 2.5h10m-6.5 11v-8m3 8v-8m-6-1V15c0 .3.2.5.5.5h8c.3 0 .5-.2.5-.5V4.5"
-  })));
-};
-
-const DeleteComponent = React__default.forwardRef((props, ref) => {
-  const fileContext = useFileContext();
-  const onMouseDown = composeEventHandlers(props.onMouseDown, event => event.preventDefault()
-  );
-  const ariaLabel = useText(DeleteComponent, props, 'aria-label', 'Delete');
-  return React__default.createElement(StyledFileDelete, _extends$t({
-    ref: ref,
-    "aria-label": ariaLabel
-  }, props, {
-    type: "button",
-    tabIndex: -1,
-    onMouseDown: onMouseDown
-  }), fileContext && fileContext.isCompact ? React__default.createElement(SvgTrashStroke$1, null) : React__default.createElement(SvgTrashStroke, null));
-});
-DeleteComponent.displayName = 'File.Delete';
-const Delete = DeleteComponent;
-
-var _path$f, _rect$1;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
-var SvgFilePdfStroke$1 = function SvgFilePdfStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M10.5 3.21V11a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h5.79a.5.5 0 01.35.15l2.21 2.21a.5.5 0 01.15.35zM7.5.5V3a.5.5 0 00.5.5h2.5m-7 6h5"
-  })), _rect$1 || (_rect$1 = /*#__PURE__*/React.createElement("rect", {
-    width: 6,
-    height: 3,
-    x: 3,
-    y: 5,
-    fill: "currentColor",
-    rx: 0.5,
-    ry: 0.5
-  })));
-};
-
-var _path$e;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
-var SvgFileZipStroke$1 = function SvgFileZipStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M4.5.5v8m0-6h1m-2 1h1m0 1h1m-2 1h1m0 1h1m-2 1h1m6-4.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
-  })));
-};
-
-var _path$d, _circle$1;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
-var SvgFileImageStroke$1 = function SvgFileImageStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5m-7 6L5 8l1.5 1.5 1-1 1 1"
-  })), _circle$1 || (_circle$1 = /*#__PURE__*/React.createElement("circle", {
-    cx: 8,
-    cy: 6,
-    r: 1,
-    fill: "currentColor"
-  })));
-};
-
-var _path$c;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
-var SvgFileDocumentStroke$1 = function SvgFileDocumentStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M3.5 5.5h5m-5 2h5m-5 2h5m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
-  })));
-};
-
-var _path$b;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
-var SvgFileSpreadsheetStroke$1 = function SvgFileSpreadsheetStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M3.5 5.5h1m-1 2h1m-1 2h1m2-4h2m-2 2h2m-2 2h2m2-6.29V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
-  })));
-};
-
-var _path$a;
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
-var SvgFilePresentationStroke$1 = function SvgFilePresentationStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM6 9.5h2c.28 0 .5-.22.5-.5V8c0-.28-.22-.5-.5-.5H6c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm-2-2h2c.28 0 .5-.22.5-.5V6c0-.28-.22-.5-.5-.5H4c-.28 0-.5.22-.5.5v1c0 .28.22.5.5.5zm3.5-7V3c0 .28.22.5.5.5h2.5"
-  })));
-};
-
-var _path$9;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
-var SvgFileGenericStroke$1 = function SvgFileGenericStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5"
-  })));
-};
-
-var _g;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
-var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M3.5 6l2 2L9 4.5"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 6,
-    cy: 6,
-    r: 5.5
-  }))));
-};
-
-var _path$8;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
-var SvgFileErrorStroke$1 = function SvgFileErrorStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M10.5 3.21V11c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h5.79c.13 0 .26.05.35.15l2.21 2.21c.1.09.15.21.15.35zM7.5.5V3c0 .28.22.5.5.5h2.5M4 9.5l4-4m0 4l-4-4"
-  })));
-};
-
-var _path$7, _rect;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
-var SvgFilePdfStroke = function SvgFilePdfStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M14.5 4.2V15a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h8.85a.5.5 0 01.36.15l3.15 3.2a.5.5 0 01.14.35zm-10 8.3h7m-7-2h7m-1-10V4a.5.5 0 00.5.5h3.5"
-  })), _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
-    width: 8,
-    height: 2,
-    x: 4,
-    y: 7,
-    fill: "currentColor",
-    rx: 0.5,
-    ry: 0.5
-  })));
-};
-
-var _path$6;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
-var SvgFileZipStroke = function SvgFileZipStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M6.5.5v11M5 2.5h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m8-6.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"
-  })));
-};
-
-var _path$5, _circle;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
-var SvgFileImageStroke = function SvgFileImageStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5m-11 9l2.65-2.65c.2-.2.51-.2.71 0l1.79 1.79c.2.2.51.2.71 0l.79-.79c.2-.2.51-.2.71 0l1.65 1.65"
-  })), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
-    cx: 10.5,
-    cy: 8.5,
-    r: 1.5,
-    fill: "currentColor"
-  })));
-};
-
-var _path$4;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
-var SvgFileDocumentStroke = function SvgFileDocumentStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M4.5 7.5h7m-7 1.97h7m-7 2h7m3-7.27V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"
-  })));
-};
-
-var _path$3;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var SvgFileSpreadsheetStroke = function SvgFileSpreadsheetStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M4.5 7.5h2m-2 2h2m-2 2h2m2-4h3m-3 2h3m-3 2h3m3-7.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"
-  })));
-};
-
-var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var SvgFilePresentationStroke = function SvgFilePresentationStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5M7 9.5h4c.28 0 .5.22.5.5v3c0 .28-.22.5-.5.5H7c-.28 0-.5-.22-.5-.5v-3c0-.28.22-.5.5-.5zm-.5 2H5c-.28 0-.5-.22-.5-.5V8c0-.28.22-.5.5-.5h4c.28 0 .5.22.5.5v1.5"
-  })));
-};
-
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var SvgFileGenericStroke = function SvgFileGenericStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    d: "M14.5 4.2V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"
-  })));
-};
-
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M14.5 4.205V15a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V1A.5.5 0 012 .5h8.853a.5.5 0 01.356.15l3.148 3.204a.5.5 0 01.143.35zM10.5.5V4a.5.5 0 00.5.5h3.5m-9 8l5-5m0 5l-5-5"
-  })));
-};
-
-const fileIconsDefault = {
-  pdf: React__default.createElement(SvgFilePdfStroke, null),
-  zip: React__default.createElement(SvgFileZipStroke, null),
-  image: React__default.createElement(SvgFileImageStroke, null),
-  document: React__default.createElement(SvgFileDocumentStroke, null),
-  spreadsheet: React__default.createElement(SvgFileSpreadsheetStroke, null),
-  presentation: React__default.createElement(SvgFilePresentationStroke, null),
-  generic: React__default.createElement(SvgFileGenericStroke, null),
-  success: React__default.createElement(SvgCheckCircleStroke$1, null),
-  error: React__default.createElement(SvgFileErrorStroke, null)
-};
-const fileIconsCompact = {
-  pdf: React__default.createElement(SvgFilePdfStroke$1, null),
-  zip: React__default.createElement(SvgFileZipStroke$1, null),
-  image: React__default.createElement(SvgFileImageStroke$1, null),
-  document: React__default.createElement(SvgFileDocumentStroke$1, null),
-  spreadsheet: React__default.createElement(SvgFileSpreadsheetStroke$1, null),
-  presentation: React__default.createElement(SvgFilePresentationStroke$1, null),
-  generic: React__default.createElement(SvgFileGenericStroke$1, null),
-  success: React__default.createElement(SvgCheckCircleStroke, null),
-  error: React__default.createElement(SvgFileErrorStroke$1, null)
-};
-
-const FileComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    type,
-    isCompact,
-    focusInset,
-    validation,
-    ...props
-  } = _ref;
-  const fileContextValue = useMemo(() => ({
-    isCompact
-  }), [isCompact]);
-  const validationType = validation || type;
-  return React__default.createElement(FileContext.Provider, {
-    value: fileContextValue
-  }, React__default.createElement(StyledFile, _extends$t({}, props, {
-    isCompact: isCompact,
-    focusInset: focusInset,
-    validation: validation,
-    ref: ref
-  }), validationType && React__default.createElement(StyledFileIcon, {
-    isCompact: isCompact
-  }, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), Children.map(children, child => typeof child === 'string' ? React__default.createElement("span", null, child) : child)));
-});
-FileComponent.displayName = 'File';
-FileComponent.propTypes = {
-  focusInset: PropTypes.bool,
-  isCompact: PropTypes.bool,
-  type: PropTypes.oneOf(FILE_TYPE),
-  validation: PropTypes.oneOf(FILE_VALIDATION)
-};
-const File = FileComponent;
-File.Close = Close;
-File.Delete = Delete;
-
-const MediaInput = React__default.forwardRef((_ref, ref) => {
-  let {
-    start,
-    end,
-    disabled,
-    isCompact,
-    isBare,
-    focusInset,
-    readOnly,
-    validation,
-    wrapperProps = {},
-    wrapperRef,
-    onSelect,
-    ...props
-  } = _ref;
-  const fieldContext = useFieldContext();
-  const inputRef = useRef();
-  const [isFocused, setIsFocused] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const {
-    onClick,
-    onFocus,
-    onBlur,
-    onMouseOver,
-    onMouseOut,
-    ...otherWrapperProps
-  } = wrapperProps;
-  const onFauxInputClickHandler = composeEventHandlers(onClick, () => {
-    inputRef.current && inputRef.current.focus();
-  });
-  const onFauxInputFocusHandler = composeEventHandlers(onFocus, () => {
-    setIsFocused(true);
-  });
-  const onFauxInputBlurHandler = composeEventHandlers(onBlur, () => {
-    setIsFocused(false);
-  });
-  const onFauxInputMouseOverHandler = composeEventHandlers(onMouseOver, () => {
-    setIsHovered(true);
-  });
-  const onFauxInputMouseOutHandler = composeEventHandlers(onMouseOut, () => {
-    setIsHovered(false);
-  });
-  const onSelectHandler = readOnly ? composeEventHandlers(onSelect, event => {
-    event.currentTarget.select();
-  }) : onSelect;
-  let combinedProps = {
-    disabled,
-    readOnly,
-    ref: mergeRefs([inputRef, ref]),
-    onSelect: onSelectHandler,
-    ...props
-  };
-  let isLabelHovered;
-  if (fieldContext) {
-    combinedProps = fieldContext.getInputProps(combinedProps);
-    isLabelHovered = fieldContext.isLabelHovered;
-  }
-  return React__default.createElement(FauxInput, _extends$t({
-    tabIndex: null,
-    onClick: onFauxInputClickHandler,
-    onFocus: onFauxInputFocusHandler,
-    onBlur: onFauxInputBlurHandler,
-    onMouseOver: onFauxInputMouseOverHandler,
-    onMouseOut: onFauxInputMouseOutHandler,
-    disabled: disabled,
-    isFocused: isFocused,
-    isHovered: isHovered || isLabelHovered,
-    isCompact: isCompact,
-    isBare: isBare,
-    focusInset: focusInset,
-    readOnly: readOnly,
-    validation: validation,
-    mediaLayout: true
-  }, otherWrapperProps, {
-    ref: wrapperRef
-  }), start && React__default.createElement(FauxInput.StartIcon, {
-    isDisabled: disabled,
-    isFocused: isFocused,
-    isHovered: isHovered || isLabelHovered
-  }, start), React__default.createElement(StyledTextMediaInput, combinedProps), end && React__default.createElement(FauxInput.EndIcon, {
-    isDisabled: disabled,
-    isFocused: isFocused,
-    isHovered: isHovered || isLabelHovered
-  }, end));
-});
-MediaInput.propTypes = {
-  isCompact: PropTypes.bool,
-  isBare: PropTypes.bool,
-  focusInset: PropTypes.bool,
-  validation: PropTypes.oneOf(VALIDATION),
-  start: PropTypes.any,
-  end: PropTypes.any,
-  wrapperProps: PropTypes.object,
-  wrapperRef: PropTypes.any
-};
-MediaInput.displayName = 'MediaInput';
-
-export { Checkbox, FauxInput, Field, Fieldset, File, FileList, FileUpload, Hint, Input, InputGroup, Label$1 as Label, MediaInput, Message, Radio, Range, Select, Textarea, Tiles, Toggle, VALIDATION };