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

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': '9.0.0-next.21'
+}).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,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 { getLineHeight, getColor, 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'] || '9.0.0-next.21'
+})).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 => getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), 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,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 styled from 'styled-components';
+import { hideVisually } from 'polished';
+import { getLineHeight, getColor, 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'] || '9.0.0-next.21'
+})).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 => getColor({
+  theme: props.theme,
+  variable: 'foreground.default'
+}), 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': '9.0.0-next.21'
+}).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,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 { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import { StyledMessageIcon } from './StyledMessageIcon.js';
+import { StyledLabel } from './StyledLabel.js';
+
+const COMPONENT_ID = 'forms.input_message';
+const colorStyles = _ref => {
+  let {
+    theme,
+    validation
+  } = _ref;
+  let variable;
+  if (validation === 'error') {
+    variable = 'foreground.danger';
+  } else if (validation === 'success') {
+    variable = 'foreground.success';
+  } else if (validation === 'warning') {
+    variable = 'foreground.warning';
+  } else {
+    variable = 'foreground.subtle';
+  }
+  const foregroundColor = getColor({
+    theme,
+    variable
+  });
+  return css(["color:", ";"], foregroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    validation
+  } = _ref2;
+  const fontSize = theme.fontSizes.sm;
+  const lineHeight = getLineHeight(theme.iconSizes.md, theme.fontSizes.sm);
+  const marginTop = `${theme.space.base}px`;
+  const paddingHorizontal = validation ? math(`${theme.space.base * 2} + ${theme.iconSizes.md}`) : undefined;
+  return css(["padding-", ":", ";line-height:", ";font-size:", ";", ":not([hidden]) + &{margin-top:", ";}"], theme.rtl ? 'right' : 'left', paddingHorizontal, lineHeight, fontSize, StyledLabel, marginTop);
+};
+const StyledMessage = styled.div.attrs(props => ({
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.21'
+})).withConfig({
+  displayName: "StyledMessage",
+  componentId: "sc-30hgg7-0"
+})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;}", ";"], props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, 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': '9.0.0-next.21',
+  '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,97 @@
+/**
+* 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, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { StyledFileClose } from './StyledFileClose.js';
+
+const COMPONENT_ID = 'forms.file';
+const colorStyles = _ref => {
+  let {
+    theme,
+    focusInset,
+    validation
+  } = _ref;
+  let borderVariable;
+  let focusBorderVariable;
+  let foregroundVariable;
+  if (validation === 'success') {
+    borderVariable = 'border.successEmphasis';
+    focusBorderVariable = borderVariable;
+    foregroundVariable = 'foreground.success';
+  } else if (validation === 'error') {
+    borderVariable = 'border.dangerEmphasis';
+    focusBorderVariable = borderVariable;
+    foregroundVariable = 'foreground.danger';
+  } else {
+    borderVariable = 'border.default';
+    focusBorderVariable = 'border.primaryEmphasis';
+    foregroundVariable = 'foreground.default';
+  }
+  const borderColor = getColor({
+    theme,
+    variable: borderVariable
+  });
+  const focusBorderColor = getColor({
+    theme,
+    variable: focusBorderVariable
+  });
+  const foregroundColor = getColor({
+    theme,
+    variable: foregroundVariable
+  });
+  return css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, focusStyles({
+    theme,
+    inset: focusInset,
+    color: {
+      variable: focusBorderVariable
+    },
+    styles: {
+      borderColor: focusBorderColor
+    }
+  }));
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const size = `${theme.space.base * (isCompact ? 7 : 10)}px`;
+  const spacing = `${theme.space.base * (isCompact ? 2 : 3)}px`;
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
+  return `
+    box-sizing: border-box;
+    border: ${theme.borders.sm};
+    border-radius: ${theme.borderRadii.md};
+    padding: 0 ${spacing};
+    height: ${size};
+    line-height: ${lineHeight};
+    font-size: ${fontSize};
+
+    & > span {
+      width: 100%;
+    }
+
+    & > ${StyledFileClose} {
+      width: ${size};
+      height: ${size};
+      margin-${theme.rtl ? 'left' : 'right'}: -${spacing};
+    }
+  `;
+};
+const StyledFile = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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,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 { getColor, 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': '9.0.0-next.21'
+}).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 => getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFileClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFileClose };

package/dist/esm/styled/file-list/StyledFileDelete.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 styled from 'styled-components';
+import { getColor, 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': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledFileDelete",
+  componentId: "sc-a8nnhx-0"
+})(["color:", ";", ";"], props => getColor({
+  theme: props.theme,
+  variable: 'foreground.danger'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFileDelete.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFileDelete };

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

@@ -0,0 +1,42 @@
+/**
+* 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 { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.file.icon';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $validation
+  } = _ref;
+  const color = $validation ? undefined : getColor({
+    theme,
+    variable: 'foreground.subtle'
+  });
+  return css(["color:", ";"], color);
+};
+const sizeStyles = _ref2 => {
+  let {
+    $isCompact,
+    theme
+  } = _ref2;
+  const width = $isCompact ? theme.iconSizes.sm : theme.iconSizes.md;
+  const margin = `${theme.space.base * 2}px`;
+  return css(["width:", ";margin-", ":", ";"], width, theme.rtl ? 'left' : 'right', margin);
+};
+const StyledFileIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledFileIcon",
+  componentId: "sc-7b3q0c-0"
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, 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': '9.0.0-next.21'
+}).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 };

package/dist/esm/styled/file-list/StyledFileListItem.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 { StyledFileList } from './StyledFileList.js';
+import { StyledFileUpload } from '../file-upload/StyledFileUpload.js';
+
+const COMPONENT_ID = 'forms.file_list.item';
+const StyledFileListItem = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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, props));
+StyledFileListItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFileListItem };

package/dist/esm/styled/file-upload/StyledFileUpload.js

@@ -0,0 +1,116 @@
+/**
+* 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, getLineHeight } from '@zendeskgarden/react-theming';
+import { StyledLabel } from '../common/StyledLabel.js';
+import { StyledHint } from '../common/StyledHint.js';
+import { StyledMessage } from '../common/StyledMessage.js';
+
+const COMPONENT_ID = 'forms.file_upload';
+const colorStyles = _ref => {
+  let {
+    theme,
+    isDragging
+  } = _ref;
+  const borderOptions = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const foregroundOptions = {
+    theme,
+    variable: 'foreground.primary'
+  };
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const borderColor = getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const foregroundColor = getColor(foregroundOptions);
+  const hoverBorderColor = getColor({
+    ...borderOptions,
+    ...offset100
+  });
+  const hoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverForegroundColor = getColor({
+    ...foregroundOptions,
+    ...offset100
+  });
+  const activeBorderColor = getColor({
+    ...borderOptions,
+    ...offset200
+  });
+  const activeBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
+  const activeForegroundColor = getColor({
+    ...foregroundOptions,
+    ...offset200
+  });
+  const disabledBorderColor = getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  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:", ";}"], isDragging ? activeBorderColor : borderColor, isDragging ? activeBackgroundColor : undefined, isDragging ? activeForegroundColor : foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
+    theme
+  }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
+  const paddingHorizontal = `${isCompact ? 2 : 4}em`;
+  const paddingVertical = math(`${theme.space.base * (isCompact ? 2.5 : 5)} - ${theme.borderWidths.sm}`);
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = getLineHeight(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,
+  'data-garden-version': '9.0.0-next.21'
+}).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, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFileUpload.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFileUpload };

package/dist/esm/styled/input-group/StyledInputGroup.js

@@ -0,0 +1,35 @@
+/**
+* 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 { StyledTextInput } from '../text/StyledTextInput.js';
+import { StyledLabel } from '../common/StyledLabel.js';
+import { StyledHint } from '../common/StyledHint.js';
+import { StyledMessage } from '../common/StyledMessage.js';
+
+const COMPONENT_ID = '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,& > ", ":active,& > button:active,& > button[aria-pressed='true'],& > button[aria-pressed='mixed']{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, startDirection, props.theme.borderWidths.sm, endDirection, endDirection, startDirection, startDirection);
+};
+const StyledInputGroup = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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, props));
+StyledInputGroup.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledInputGroup };

package/dist/esm/styled/radio/StyledRadioHint.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 { StyledHint } from '../common/StyledHint.js';
+
+const COMPONENT_ID = 'forms.radio_hint';
+const StyledRadioHint = styled(StyledHint).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).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, props));
+StyledRadioHint.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledRadioHint };