@zendeskgarden/react-forms 8.75.1 → 8.76.0

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/file-zip-stroke.svg.js

@@ -0,0 +1,27 @@
+/**
+* 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';
+
+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 SvgFileZipStroke = function SvgFileZipStroke(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: "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"
+  })));
+};
+
+export { SvgFileZipStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/trash-stroke.svg.js

@@ -0,0 +1,27 @@
+/**
+* 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';
+
+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 SvgTrashStroke = function SvgTrashStroke(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: "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"
+  })));
+};
+
+export { SvgTrashStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js

@@ -0,0 +1,26 @@
+/**
+* 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';
+
+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 SvgXStroke = function SvgXStroke(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", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 13L13 3m0 10L3 3"
+  })));
+};
+
+export { SvgXStroke as default };

package/dist/esm/styled/checkbox/StyledCheckHint.js

@@ -0,0 +1,23 @@
+/**
+* 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 { StyledRadioHint } from '../radio/StyledRadioHint.js';
+
+const COMPONENT_ID = 'forms.checkbox_hint';
+const StyledCheckHint = styled(StyledRadioHint).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledCheckHint",
+  componentId: "sc-1kl8e8c-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCheckHint.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCheckHint };

package/dist/esm/styled/checkbox/StyledCheckInput.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 { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledRadioInput } from '../radio/StyledRadioInput.js';
+import { StyledCheckLabel } from './StyledCheckLabel.js';
+
+const COMPONENT_ID = 'forms.checkbox';
+const colorStyles = 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,
+  'data-garden-version': '8.76.0',
+  type: 'checkbox'
+}).withConfig({
+  displayName: "StyledCheckInput",
+  componentId: "sc-176jxxe-0"
+})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCheckInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCheckInput };

package/dist/esm/styled/checkbox/StyledCheckLabel.js

@@ -0,0 +1,23 @@
+/**
+* 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 { StyledRadioLabel } from '../radio/StyledRadioLabel.js';
+
+const COMPONENT_ID = 'forms.checkbox_label';
+const StyledCheckLabel = styled(StyledRadioLabel).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledCheckLabel",
+  componentId: "sc-x7nr1-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCheckLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCheckLabel };

package/dist/esm/styled/checkbox/StyledCheckMessage.js

@@ -0,0 +1,23 @@
+/**
+* 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 { StyledRadioMessage } from '../radio/StyledRadioMessage.js';
+
+const COMPONENT_ID = 'forms.checkbox_message';
+const StyledCheckMessage = styled(StyledRadioMessage).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledCheckMessage",
+  componentId: "sc-s4p6kd-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCheckMessage.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCheckMessage };

package/dist/esm/styled/checkbox/StyledCheckSvg.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 SvgCheckSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.js';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledCheckInput } from './StyledCheckInput.js';
+import { StyledCheckLabel } from './StyledCheckLabel.js';
+
+const COMPONENT_ID = 'forms.check_svg';
+const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).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, props));
+StyledCheckSvg.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCheckSvg };

package/dist/esm/styled/checkbox/StyledDashSvg.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 SvgDashFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/dash-fill.svg.js';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledCheckInput } from './StyledCheckInput.js';
+import { StyledCheckLabel } from './StyledCheckLabel.js';
+
+const COMPONENT_ID = 'forms.dash_svg';
+const StyledDashSvg = styled(SvgDashFill).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).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, props));
+StyledDashSvg.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDashSvg };

package/dist/esm/styled/common/StyledField.js

@@ -0,0 +1,22 @@
+/**
+* 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';
+
+const COMPONENT_ID = 'forms.field';
+const StyledField = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).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, props));
+StyledField.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledField };

package/dist/esm/styled/common/StyledFieldset.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 { StyledField } from './StyledField.js';
+
+const COMPONENT_ID = 'forms.fieldset';
+const StyledFieldset = styled(StyledField).attrs({
+  as: 'fieldset',
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledFieldset",
+  componentId: "sc-1vr4mxv-0"
+})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFieldset.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFieldset };

package/dist/esm/styled/common/StyledHint.js

@@ -0,0 +1,22 @@
+/**
+* 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 { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.input_hint';
+const StyledHint = styled.div.attrs(props => ({
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
+  'data-garden-version': props['data-garden-version'] || '8.76.0'
+})).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, props));
+StyledHint.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHint };

package/dist/esm/styled/common/StyledLabel.js

@@ -0,0 +1,23 @@
+/**
+* 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 { hideVisually } from 'polished';
+import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.input_label';
+const StyledLabel = styled.label.attrs(props => ({
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
+  'data-garden-version': props['data-garden-version'] || '8.76.0'
+})).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, props));
+StyledLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLabel };

package/dist/esm/styled/common/StyledLegend.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 { StyledLabel } from './StyledLabel.js';
+
+const COMPONENT_ID = 'forms.fieldset_legend';
+const StyledLegend = styled(StyledLabel).attrs({
+  as: 'legend',
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledLegend",
+  componentId: "sc-6s0zwq-0"
+})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledLegend.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledLegend };

package/dist/esm/styled/common/StyledMessage.js

@@ -0,0 +1,40 @@
+/**
+* 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, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledMessageIcon } from './StyledMessageIcon.js';
+import { StyledLabel } from './StyledLabel.js';
+
+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 = 'forms.input_message';
+const StyledMessage = styled.div.attrs(props => ({
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
+  'data-garden-version': props['data-garden-version'] || '8.76.0'
+})).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, props));
+StyledMessage.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledMessage };

package/dist/esm/styled/common/StyledMessageIcon.js

@@ -0,0 +1,45 @@
+/**
+* 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 React__default, { Children } from 'react';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import SvgAlertErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
+import SvgAlertWarningStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
+import SvgCheckCircleStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js';
+
+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, props);
+  } else if (validation === 'warning') {
+    retVal = React__default.createElement(SvgAlertWarningStroke, props);
+  } else {
+    retVal = React__default.cloneElement(Children.only(children));
+  }
+  return retVal;
+};
+const COMPONENT_ID = 'forms.input_message_icon';
+const StyledMessageIcon = styled(MessageIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0',
+  '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, props));
+StyledMessageIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledMessageIcon };

package/dist/esm/styled/file-list/StyledFile.js

@@ -0,0 +1,74 @@
+/**
+* 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, getLineHeight } from '@zendeskgarden/react-theming';
+import { StyledFileClose } from './StyledFileClose.js';
+
+const COMPONENT_ID = 'forms.file';
+const colorStyles = 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 = 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,
+  'data-garden-version': '8.76.0'
+}).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, colorStyles, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFile.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFile };

package/dist/esm/styled/file-list/StyledFileClose.js

@@ -0,0 +1,22 @@
+/**
+* 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 { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.file.close';
+const StyledFileClose = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).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, props));
+StyledFileClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFileClose };

package/dist/esm/styled/file-list/StyledFileDelete.js

@@ -0,0 +1,23 @@
+/**
+* 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 { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledFileClose } from './StyledFileClose.js';
+
+const COMPONENT_ID = 'forms.file.delete';
+const StyledFileDelete = styled(StyledFileClose).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledFileDelete",
+  componentId: "sc-a8nnhx-0"
+})(["color:", ";", ";"], props => getColorV8('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFileDelete.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFileDelete };

package/dist/esm/styled/file-list/StyledFileIcon.js

@@ -0,0 +1,31 @@
+/**
+* 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 React__default, { Children } from 'react';
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = '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,
+  'data-garden-version': '8.76.0'
+}).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, props));
+StyledFileIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFileIcon };

package/dist/esm/styled/file-list/StyledFileList.js

@@ -0,0 +1,22 @@
+/**
+* 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';
+
+const COMPONENT_ID = 'forms.file_list';
+const StyledFileList = styled.ul.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledFileList",
+  componentId: "sc-gbahjg-0"
+})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFileList.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFileList };