@zendeskgarden/react-forms 9.0.0-next.2 → 9.0.0-next.20

package/dist/esm/styled/radio/StyledRadioInput.js

@@ -0,0 +1,122 @@
+/**
+* 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, getColor, focusStyles } from '@zendeskgarden/react-theming';
+import { StyledRadioLabel } from './StyledRadioLabel.js';
+import { StyledMessage } from '../common/StyledMessage.js';
+
+const COMPONENT_ID = 'forms.radio';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const iconColor = getColor({
+    theme,
+    variable: 'foreground.onEmphasis'
+  });
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const borderOptions = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const hoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverBorderColor = getColor(borderOptions);
+  const focusBorderColor = hoverBorderColor;
+  const activeBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
+  const activeBorderColor = focusBorderColor;
+  const checkedBackgroundColor = getColor(backgroundOptions);
+  const checkedBorderColor = focusBorderColor;
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const checkedHoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset100
+  });
+  const checkedHoverBorderColor = getColor({
+    ...borderOptions,
+    ...offset100
+  });
+  const checkedActiveBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset200
+  });
+  const checkedActiveBorderColor = getColor({
+    ...borderOptions,
+    ...offset200
+  });
+  const disabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled',
+    transparency: theme.opacity[300]
+  });
+  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,
+    styles: {
+      borderColor: focusBorderColor
+    },
+    selector: `&:focus-visible ~ ${StyledRadioLabel}::before`
+  }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const lineHeight = `${theme.space.base * 5}px`;
+  const size = `${theme.space.base * 4}px`;
+  const top = math(`(${lineHeight} - ${size}) / 2`);
+  const iconSize = theme.iconSizes.sm;
+  const iconPosition = math(`(${size} - ${iconSize}) / 2`);
+  const iconTop = math(`${iconPosition} + ${top}`);
+  const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
+  return css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";border:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, theme.borders.sm, theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
+};
+const StyledRadioInput = styled.input.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20',
+  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-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', StyledRadioLabel, sizeStyles, StyledRadioLabel, StyledRadioLabel, colorStyles, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRadioInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledRadioInput };

package/dist/esm/styled/radio/StyledRadioLabel.js

@@ -0,0 +1,30 @@
+/**
+* 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 { StyledLabel } from '../common/StyledLabel.js';
+
+const COMPONENT_ID = 'forms.radio_label';
+const sizeStyles = 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,
+  'data-garden-version': '9.0.0-next.20',
+  isRadio: true
+}).withConfig({
+  displayName: "StyledRadioLabel",
+  componentId: "sc-1aq2e5t-0"
+})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledRadioLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledRadioLabel };

package/dist/esm/styled/radio/StyledRadioMessage.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 { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledMessage } from '../common/StyledMessage.js';
+
+const COMPONENT_ID = 'forms.radio_message';
+const StyledRadioMessage = styled(StyledMessage).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).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, props));
+StyledRadioMessage.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledRadioMessage };

package/dist/esm/styled/radio/StyledRadioSvg.js

@@ -0,0 +1,25 @@
+/**
+* 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 SvgCircleSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/circle-sm-fill.svg.js';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledRadioInput } from './StyledRadioInput.js';
+import { StyledRadioLabel } from './StyledRadioLabel.js';
+
+const COMPONENT_ID = 'forms.radio_svg';
+const StyledRadioSvg = styled(SvgCircleSmFill).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).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, props));
+StyledRadioSvg.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledRadioSvg };

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

@@ -0,0 +1,210 @@
+/**
+* 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, getColor, 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 = _ref => {
+  let {
+    theme,
+    hasLowerTrack
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const thumbBackgroundColor = getColor(options);
+  const thumbBorderColor = thumbBackgroundColor;
+  const thumbBoxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor({
+    variable: 'shadow.small',
+    theme
+  }));
+  const thumbFocusBoxShadow = getFocusBoxShadow({
+    theme
+  });
+  const thumbActiveBackgroundColor = getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
+  const thumbActiveBorderColor = thumbBorderColor;
+  const thumbDisabledBackgroundColor = getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const thumbDisabledBorderColor = thumbDisabledBackgroundColor;
+  const thumbHoverBackgroundColor = getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const thumbHoverBorderColor = thumbHoverBackgroundColor;
+  const trackBackgroundColor = getColor({
+    theme,
+    variable: 'border.emphasis',
+    dark: {
+      offset: 100
+    },
+    light: {
+      offset: -200
+    }
+  });
+  const trackLowerBackgroundColor = hasLowerTrack ? thumbBackgroundColor : '';
+  const trackBackgroundImage = hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
+  const trackDisabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled',
+    transparency: theme.opacity[200]
+  });
+  const trackDisabledLowerBackgroundColor = hasLowerTrack ? getColor({
+    theme,
+    variable: 'border.emphasis'
+  }) : '';
+  const trackDisabledBackgroundImage = hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : '';
+  return css(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], trackStyles(`
+      background-color: ${trackBackgroundColor};
+      background-image: ${trackBackgroundImage}; /* [1] */
+    `), 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-color: ${trackDisabledBackgroundColor};
+        background-image: ${trackDisabledBackgroundImage};
+      `, ':disabled'), thumbStyles(`
+        border-color: ${thumbDisabledBorderColor};
+        box-shadow: none;
+        background-color: ${thumbDisabledBackgroundColor};
+      `, ':disabled'), trackLowerStyles(`
+        background-color: ${trackDisabledLowerBackgroundColor};
+      `, ':disabled'));
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const thumbSize = `${theme.space.base * 5}px`;
+  const trackHeight = `${theme.space.base * 1.5}px`;
+  const trackBorderRadius = trackHeight;
+  const trackMargin = math(`(${thumbSize} - ${trackHeight}) / 2 + ${theme.shadowWidths.md}`);
+  const thumbMargin = math(`(${trackHeight} - ${thumbSize}) / 2`);
+  return css(["", ":not([hidden]) + &,", " + &,", " + &,& + ", ",& + ", "{margin-top:", ";}", ";", " ", ""], StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, `${theme.space.base * 2}px`, trackStyles(`
+      margin: ${trackMargin} 0;
+      border-radius: ${trackBorderRadius};
+      height: ${trackHeight};
+    `), thumbStyles(`
+      margin: ${thumbMargin} 0; /* [1] */
+      width: ${thumbSize};
+      height: ${thumbSize};
+    `), trackLowerStyles(`
+      border-top-${theme.rtl ? 'right' : 'left'}-radius: ${trackBorderRadius};
+      border-bottom-${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.20',
+  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 */
+    `), sizeStyles, props => thumbStyles(`
+      appearance: none;
+      transition: box-shadow .1s ease-in-out;
+      border: ${props.theme.borders.md};
+      border-radius: 100%;
+      box-sizing: border-box;
+    `), colorStyles, 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,60 @@
+/**
+* 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 { getColor, 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 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const color = getColor({
+    theme,
+    variable: 'foreground.subtle',
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const disabledColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", "{color:", ";}&:disabled + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color, StyledTextMediaFigure, disabledColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isBare,
+    isCompact
+  } = _ref2;
+  const padding = isBare ? undefined : math(`${theme.iconSizes.md} + ${theme.space.base * 5}`);
+  const iconVerticalPosition = `${theme.space.base * (isCompact ? 1.5 : 2.5) + 1}px`;
+  const iconHorizontalPosition = `${theme.space.base * 3}px`;
+  return css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], theme.rtl ? 'left' : 'right', padding, StyledTextMediaFigure, iconVerticalPosition, theme.rtl ? 'left' : 'right', iconHorizontalPosition);
+};
+const StyledSelect = styled(StyledTextInput).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20',
+  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;}"], sizeStyles, colorStyles, props => getColor({
+  theme: props.theme,
+  variable: 'foreground.default'
+}), StyledTextMediaFigure);
+StyledSelect.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSelect };

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

@@ -0,0 +1,32 @@
+/**
+* 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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledTextFauxInput } from '../text/StyledTextFauxInput.js';
+import { StyledSelect } from './StyledSelect.js';
+
+const COMPONENT_ID = 'forms.select_wrapper';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    isCompact
+  } = _ref;
+  const height = `${theme.space.base * (isCompact ? 8 : 10)}px`;
+  return css(["max-height:", ";"], height);
+};
+const StyledSelectWrapper = styled(StyledTextFauxInput).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledSelectWrapper",
+  componentId: "sc-i7b6hw-0"
+})(["position:relative;padding:0;overflow:visible;", ";& > ", "{border-color:transparent;background-color:transparent;", "{box-shadow:unset;}}"], sizeStyles, StyledSelect, SELECTOR_FOCUS_VISIBLE);
+StyledSelectWrapper.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSelectWrapper };

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

@@ -0,0 +1,69 @@
+/**
+* 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, getColor, focusStyles } from '@zendeskgarden/react-theming';
+import { StyledTextInput } from './StyledTextInput.js';
+import { StyledTextMediaFigure } from './StyledTextMediaFigure.js';
+
+const COMPONENT_ID = 'forms.faux_input';
+const colorStyles = _ref => {
+  let {
+    theme,
+    validation,
+    focusInset,
+    isBare,
+    isFocused
+  } = _ref;
+  let borderVariable;
+  let focusBorderColor;
+  if (validation) {
+    if (validation === 'success') {
+      borderVariable = 'border.successEmphasis';
+    } else if (validation === 'warning') {
+      borderVariable = 'border.warningEmphasis';
+    } else if (validation === 'error') {
+      borderVariable = 'border.dangerEmphasis';
+    }
+    focusBorderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
+  } else {
+    borderVariable = 'border.primaryEmphasis';
+    focusBorderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
+  }
+  return css(["", ""], focusStyles({
+    theme,
+    inset: focusInset,
+    color: {
+      variable: borderVariable
+    },
+    selector: isFocused ? '&' : '&:focus-within',
+    styles: {
+      borderColor: focusBorderColor
+    },
+    condition: !isBare
+  }));
+};
+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.20'
+})).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 };