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

package/dist/esm/styled/range/StyledRangeInput.js

@@ -0,0 +1,160 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, getFocusBoxShadow } from '@zendeskgarden/react-theming';
+import { StyledHint } from '../common/StyledHint.js';
+import { StyledLabel } from '../common/StyledLabel.js';
+import { StyledMessage } from '../common/StyledMessage.js';
+
+const COMPONENT_ID = '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 = 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};
+      `, ':focus-visible'), 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 = 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,
+  'data-garden-version': '9.0.0-next.8',
+  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(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(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRangeInput.defaultProps = {
+  backgroundSize: '0%',
+  hasLowerTrack: true,
+  theme: DEFAULT_THEME
+};
+
+export { StyledRangeInput };

package/dist/esm/styled/select/StyledSelect.js

@@ -0,0 +1,36 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledTextInput } from '../text/StyledTextInput.js';
+import { StyledTextMediaFigure } from '../text/StyledTextMediaFigure.js';
+
+const COMPONENT_ID = 'forms.select';
+const colorStyles = props => {
+  const color = getColorV8('neutralHue', 700, props.theme);
+  return css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
+};
+const sizeStyles = 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,
+  'data-garden-version': '9.0.0-next.8',
+  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(props), props => colorStyles(props), props => getColorV8('foreground', 600 , props.theme), StyledTextMediaFigure);
+StyledSelect.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSelect };

package/dist/esm/styled/select/StyledSelectWrapper.js

@@ -0,0 +1,24 @@
+/**
+* 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 styled from 'styled-components';
+import { SELECTOR_FOCUS_VISIBLE, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledTextFauxInput } from '../text/StyledTextFauxInput.js';
+import { StyledSelect } from './StyledSelect.js';
+
+const COMPONENT_ID = 'forms.select_wrapper';
+const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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
+};
+
+export { StyledSelectWrapper };

package/dist/esm/styled/text/StyledTextFauxInput.js

@@ -0,0 +1,61 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledTextInput } from './StyledTextInput.js';
+import { StyledTextMediaFigure } from './StyledTextMediaFigure.js';
+
+const COMPONENT_ID = '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 = props => {
+  const {
+    theme,
+    validation,
+    focusInset,
+    isBare,
+    isFocused
+  } = props;
+  return css(["", ""], focusStyles({
+    theme,
+    inset: focusInset,
+    condition: !isBare,
+    color: {
+      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,
+  'data-garden-version': '9.0.0-next.8'
+})).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, StyledTextInput, props => !props.mediaLayout && 'baseline', SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.mediaLayout && '0', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTextFauxInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTextFauxInput, getValidationHue };

package/dist/esm/styled/text/StyledTextInput.js

@@ -0,0 +1,107 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math, em } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { StyledHint } from '../common/StyledHint.js';
+import { StyledLabel } from '../common/StyledLabel.js';
+import { StyledMessage } from '../common/StyledMessage.js';
+
+const COMPONENT_ID = 'forms.input';
+const isInvalid = validation => {
+  return validation === 'warning' || validation === 'error';
+};
+const colorStyles = 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,
+    color: {
+      hue: focusRingHue,
+      shade: focusRingShade
+    },
+    styles: {
+      borderColor: focusBorderColor
+    }
+  }), disabledBorderColor, !props.isBare && disabledBackgroundColor, disabledForegroundColor);
+};
+const sizeStyles = 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,
+  'data-garden-version': '9.0.0-next.8',
+  '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(props), props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTextInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTextInput };

package/dist/esm/styled/text/StyledTextMediaFigure.js

@@ -0,0 +1,57 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import React__default, { Children } from 'react';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.media_figure';
+const colorStyles = 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 = 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,
+  'data-garden-version': '9.0.0-next.8'
+}).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(props), props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTextMediaFigure.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTextMediaFigure };

package/dist/esm/styled/text/StyledTextMediaInput.js

@@ -0,0 +1,24 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledTextInput } from './StyledTextInput.js';
+
+const COMPONENT_ID = 'forms.media_input';
+const StyledTextMediaInput = styled(StyledTextInput).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  isBare: true
+}).withConfig({
+  displayName: "StyledTextMediaInput",
+  componentId: "sc-12i9xfi-0"
+})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTextMediaInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTextMediaInput };

package/dist/esm/styled/text/StyledTextarea.js

@@ -0,0 +1,33 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledTextInput } from './StyledTextInput.js';
+
+const COMPONENT_ID = '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,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTextarea",
+  componentId: "sc-wxschl-0"
+})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTextarea.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTextarea };

package/dist/esm/styled/tiles/StyledTile.js

@@ -0,0 +1,55 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { StyledTileIcon } from './StyledTileIcon.js';
+
+const COMPONENT_ID = '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,
+    color: {
+      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,
+  'data-garden-version': '9.0.0-next.8',
+  '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, props));
+StyledTile.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTile };

package/dist/esm/styled/tiles/StyledTileDescription.js

@@ -0,0 +1,34 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.tile_description';
+const sizeStyles = 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,
+  'data-garden-version': '9.0.0-next.8'
+}).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(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTileDescription.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTileDescription };

package/dist/esm/styled/tiles/StyledTileIcon.js

@@ -0,0 +1,38 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { math } from 'polished';
+
+const COMPONENT_ID = 'forms.tile_icon';
+const sizeStyles = 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,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTileIcon",
+  componentId: "sc-1wazhg4-0"
+})(["display:block;transition:color 0.25s ease-in-out;text-align:center;line-height:0;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTileIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTileIcon };

package/dist/esm/styled/tiles/StyledTileInput.js

@@ -0,0 +1,18 @@
+/**
+* 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 styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+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
+};
+
+export { StyledTileInput };