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

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'] || '9.0.0-next.8'
+})).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': '9.0.0-next.8'
+}).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'] || '9.0.0-next.8'
+})).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': '9.0.0-next.8',
+  '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,76 @@
+/**
+* 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,
+    color: {
+      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': '9.0.0-next.8'
+}).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': '9.0.0-next.8'
+}).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': '9.0.0-next.8'
+}).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': '9.0.0-next.8'
+}).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': '9.0.0-next.8'
+}).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.8'
+}).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,47 @@
+/**
+* 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 { rgba, math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, 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 = props => {
+  const baseColor = getColorV8('primaryHue', 600, props.theme);
+  const hoverColor = getColorV8('primaryHue', 700, props.theme);
+  const activeColor = getColorV8('primaryHue', 800, props.theme);
+  const disabledBackgroundColor = getColorV8('neutralHue', 200, props.theme);
+  const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme);
+  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : getColorV8('neutralHue', 600, props.theme), props.isDragging && rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, rgba(baseColor, 0.08), hoverColor, focusStyles({
+    theme: props.theme,
+    color: {
+      hue: baseColor
+    }
+  }), activeColor, rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
+};
+const sizeStyles = props => {
+  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
+  const paddingHorizontal = `${props.isCompact ? 2 : 4}em`;
+  const paddingVertical = math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`);
+  const fontSize = props.theme.fontSizes.md;
+  const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
+  return css(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
+};
+const StyledFileUpload = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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.8'
+}).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.8'
+}).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 };

package/dist/esm/styled/radio/StyledRadioInput.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 { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { StyledRadioLabel } from './StyledRadioLabel.js';
+import { StyledMessage } from '../common/StyledMessage.js';
+
+const COMPONENT_ID = 'forms.radio';
+const colorStyles = props => {
+  const SHADE = 600;
+  const borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
+  const backgroundColor = getColorV8('background', 600 , props.theme);
+  const iconColor = backgroundColor;
+  const hoverBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.08);
+  const hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
+  const focusBorderColor = hoverBorderColor;
+  const activeBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.2);
+  const activeBorderColor = focusBorderColor;
+  const checkedBorderColor = focusBorderColor;
+  const checkedBackgroundColor = checkedBorderColor;
+  const checkedHoverBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
+  const checkedHoverBackgroundColor = checkedHoverBorderColor;
+  const checkedActiveBorderColor = getColorV8('primaryHue', SHADE + 200, props.theme);
+  const checkedActiveBackgroundColor = checkedActiveBorderColor;
+  const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
+  return css(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}", " & ~ ", ":active::before{border-color:", ";background-color:", ";}&:checked ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":hover::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledRadioLabel, borderColor, backgroundColor, StyledRadioLabel, iconColor, StyledRadioLabel, hoverBorderColor, hoverBackgroundColor, focusStyles({
+    theme: props.theme,
+    styles: {
+      borderColor: focusBorderColor
+    },
+    selector: `&:focus-visible ~ ${StyledRadioLabel}::before`
+  }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
+};
+const sizeStyles = props => {
+  const lineHeight = `${props.theme.space.base * 5}px`;
+  const size = `${props.theme.space.base * 4}px`;
+  const top = math(`(${lineHeight} - ${size}) / 2`);
+  const iconSize = props.theme.iconSizes.sm;
+  const iconPosition = math(`(${size} - ${iconSize}) / 2`);
+  const iconTop = math(`${iconPosition} + ${top}`);
+  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
+  return css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
+};
+const StyledRadioInput = styled.input.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8',
+  type: 'radio'
+}).withConfig({
+  displayName: "StyledRadioInput",
+  componentId: "sc-qsavpv-0"
+})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, StyledRadioLabel, props => sizeStyles(props), StyledRadioLabel, StyledRadioLabel, props => colorStyles(props), 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.8',
+  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.8'
+}).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.8'
+}).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 };