@zendeskgarden/react-forms 9.0.0-next.4 → 9.0.0-next.5

package/dist/index.cjs.js

@@ -64,7 +64,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$G = 'forms.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$G,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-12gzfsu-0"
@@ -77,7 +77,7 @@ const COMPONENT_ID$F = 'forms.fieldset';
 const StyledFieldset = styled__default.default(StyledField).attrs({
   as: 'fieldset',
   'data-garden-id': COMPONENT_ID$F,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFieldset",
   componentId: "sc-1vr4mxv-0"
@@ -89,7 +89,7 @@ StyledFieldset.defaultProps = {
 const COMPONENT_ID$E = 'forms.input_label';
 const StyledLabel = styled__default.default.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$E,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.4'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.5'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
@@ -102,7 +102,7 @@ const COMPONENT_ID$D = 'forms.fieldset_legend';
 const StyledLegend = styled__default.default(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID$D,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"
@@ -114,11 +114,11 @@ StyledLegend.defaultProps = {
 const COMPONENT_ID$C = 'forms.input_hint';
 const StyledHint = styled__default.default.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$C,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.4'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.5'
 })).withConfig({
   displayName: "StyledHint",
   componentId: "sc-17c2wu8-0"
-})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props));
+})(["direction:", ";display:block;vertical-align:middle;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$C, props));
 StyledHint.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -219,7 +219,7 @@ const MessageIcon = _ref => {
 const COMPONENT_ID$B = 'forms.input_message_icon';
 const StyledMessageIcon = styled__default.default(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID$B,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",
@@ -234,20 +234,20 @@ const validationStyles = props => {
   const padding = polished.math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`);
   let color;
   if (props.validation === 'error') {
-    color = reactTheming.getColor('dangerHue', 600, props.theme);
+    color = reactTheming.getColorV8('dangerHue', 600, props.theme);
   } else if (props.validation === 'success') {
-    color = reactTheming.getColor('successHue', 600, props.theme);
+    color = reactTheming.getColorV8('successHue', 600, props.theme);
   } else if (props.validation === 'warning') {
-    color = reactTheming.getColor('warningHue', 700, props.theme);
+    color = reactTheming.getColorV8('warningHue', 700, props.theme);
   } else {
-    color = reactTheming.getColor('neutralHue', 700, props.theme);
+    color = reactTheming.getColorV8('neutralHue', 700, props.theme);
   }
   return styled.css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
 };
 const COMPONENT_ID$A = 'forms.input_message';
 const StyledMessage = styled__default.default.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$A,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.4'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.5'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
@@ -263,7 +263,7 @@ const isInvalid = validation => {
 const colorStyles$a = props => {
   const HUE = 'primaryHue';
   const SHADE = 600;
-  const placeholderColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
+  const placeholderColor = reactTheming.getColorV8('neutralHue', SHADE - 200, props.theme);
   let borderColor;
   let hoverBorderColor;
   let focusBorderColor;
@@ -279,20 +279,20 @@ const colorStyles$a = props => {
     } else if (props.validation === 'error') {
       hue = 'dangerHue';
     }
-    borderColor = reactTheming.getColor(hue, SHADE, props.theme);
+    borderColor = reactTheming.getColorV8(hue, SHADE, props.theme);
     hoverBorderColor = borderColor;
     focusBorderColor = borderColor;
     focusRingHue = hue;
   } else {
-    borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-    hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+    borderColor = reactTheming.getColorV8('neutralHue', SHADE - 300, props.theme);
+    hoverBorderColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme);
     focusBorderColor = hoverBorderColor;
   }
-  const readOnlyBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
-  const readOnlyBorderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
+  const readOnlyBackgroundColor = reactTheming.getColorV8('neutralHue', SHADE - 500, props.theme);
+  const readOnlyBorderColor = reactTheming.getColorV8('neutralHue', SHADE - 300, props.theme);
   const disabledBackgroundColor = readOnlyBackgroundColor;
-  const disabledBorderColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  const disabledForegroundColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
+  const disabledBorderColor = reactTheming.getColorV8('neutralHue', SHADE - 400, props.theme);
+  const disabledForegroundColor = reactTheming.getColorV8('neutralHue', SHADE - 200, props.theme);
   let controlledBorderColor = borderColor;
   if (props.isFocused) {
     controlledBorderColor = focusBorderColor;
@@ -337,7 +337,7 @@ const sizeStyles$c = props => {
 };
 const StyledTextInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   'aria-invalid': isInvalid(props.validation)
 })).withConfig({
   displayName: "StyledTextInput",
@@ -360,7 +360,7 @@ const hiddenStyles = `
 const StyledTextarea = styled__default.default(StyledTextInput).attrs({
   as: 'textarea',
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTextarea",
   componentId: "sc-wxschl-0"
@@ -377,7 +377,7 @@ const colorStyles$9 = props => {
   } else if (props.isHovered || props.isFocused) {
     shade = 700;
   }
-  return styled.css(["color:", ";"], reactTheming.getColor('neutralHue', shade, props.theme));
+  return styled.css(["color:", ";"], reactTheming.getColorV8('neutralHue', shade, props.theme));
 };
 const sizeStyles$b = props => {
   const size = props.theme.iconSizes.md;
@@ -406,7 +406,7 @@ _ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTextMediaFigure",
   componentId: "sc-1qepknj-0"
@@ -444,7 +444,7 @@ const colorStyles$8 = props => {
     shade: validation === 'warning' ? 700 : 600,
     selector: isFocused ? '&' : '&:focus-within',
     styles: {
-      borderColor: reactTheming.getColor(getValidationHue(validation), 600, theme)
+      borderColor: reactTheming.getColorV8(getValidationHue(validation), 600, theme)
     }
   }));
 };
@@ -453,7 +453,7 @@ const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props
   'aria-readonly': props.isReadOnly,
   'aria-disabled': props.isDisabled,
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 })).withConfig({
   displayName: "StyledTextFauxInput",
   componentId: "sc-yqw7j9-0"
@@ -465,7 +465,7 @@ StyledTextFauxInput.defaultProps = {
 const COMPONENT_ID$v = 'forms.media_input';
 const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   isBare: true
 }).withConfig({
   displayName: "StyledTextMediaInput",
@@ -487,7 +487,7 @@ const itemStyles = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"
@@ -505,7 +505,7 @@ const sizeStyles$a = props => {
 };
 const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",
@@ -518,7 +518,7 @@ StyledRadioLabel.defaultProps = {
 const COMPONENT_ID$s = 'forms.checkbox_label';
 const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCheckLabel",
   componentId: "sc-x7nr1-0"
@@ -530,7 +530,7 @@ StyledCheckLabel.defaultProps = {
 const COMPONENT_ID$r = 'forms.radio_hint';
 const StyledRadioHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"
@@ -542,7 +542,7 @@ StyledRadioHint.defaultProps = {
 const COMPONENT_ID$q = 'forms.checkbox_hint';
 const StyledCheckHint = styled__default.default(StyledRadioHint).attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCheckHint",
   componentId: "sc-1kl8e8c-0"
@@ -554,21 +554,21 @@ StyledCheckHint.defaultProps = {
 const COMPONENT_ID$p = 'forms.radio';
 const colorStyles$7 = props => {
   const SHADE = 600;
-  const borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
+  const borderColor = reactTheming.getColorV8('neutralHue', SHADE - 300, props.theme);
   const backgroundColor = props.theme.colors.background;
   const iconColor = backgroundColor;
-  const hoverBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+  const hoverBackgroundColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme, 0.08);
+  const hoverBorderColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme);
   const focusBorderColor = hoverBorderColor;
-  const activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.2);
+  const activeBackgroundColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme, 0.2);
   const activeBorderColor = focusBorderColor;
   const checkedBorderColor = focusBorderColor;
   const checkedBackgroundColor = checkedBorderColor;
-  const checkedHoverBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
+  const checkedHoverBorderColor = reactTheming.getColorV8('primaryHue', SHADE + 100, props.theme);
   const checkedHoverBackgroundColor = checkedHoverBorderColor;
-  const checkedActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 200, props.theme);
+  const checkedActiveBorderColor = reactTheming.getColorV8('primaryHue', SHADE + 200, props.theme);
   const checkedActiveBackgroundColor = checkedActiveBorderColor;
-  const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
+  const disabledBackgroundColor = reactTheming.getColorV8('neutralHue', SHADE - 400, props.theme);
   return styled.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, reactTheming.focusStyles({
     theme: props.theme,
     styles: {
@@ -589,7 +589,7 @@ const sizeStyles$9 = props => {
 };
 const StyledRadioInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
@@ -602,16 +602,16 @@ StyledRadioInput.defaultProps = {
 const COMPONENT_ID$o = 'forms.checkbox';
 const colorStyles$6 = props => {
   const SHADE = 600;
-  const indeterminateBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+  const indeterminateBorderColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme);
   const indeterminateBackgroundColor = indeterminateBorderColor;
-  const indeterminateActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
+  const indeterminateActiveBorderColor = reactTheming.getColorV8('primaryHue', SHADE + 100, props.theme);
   const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
-  const indeterminateDisabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
+  const indeterminateDisabledBackgroundColor = reactTheming.getColorV8('neutralHue', SHADE - 400, props.theme);
   return styled.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__default.default(StyledRadioInput).attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   type: 'checkbox'
 }).withConfig({
   displayName: "StyledCheckInput",
@@ -624,7 +624,7 @@ StyledCheckInput.defaultProps = {
 const COMPONENT_ID$n = 'forms.radio_message';
 const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledRadioMessage",
   componentId: "sc-1pmi0q8-0"
@@ -636,7 +636,7 @@ StyledRadioMessage.defaultProps = {
 const COMPONENT_ID$m = 'forms.checkbox_message';
 const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCheckMessage",
   componentId: "sc-s4p6kd-0"
@@ -668,7 +668,7 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
 const COMPONENT_ID$l = 'forms.check_svg';
 const StyledCheckSvg = styled__default.default(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCheckSvg",
   componentId: "sc-fvxetk-0"
@@ -698,7 +698,7 @@ var SvgDashFill = function SvgDashFill(props) {
 const COMPONENT_ID$k = 'forms.dash_svg';
 const StyledDashSvg = styled__default.default(SvgDashFill).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledDashSvg",
   componentId: "sc-z3vq71-0"
@@ -709,12 +709,12 @@ StyledDashSvg.defaultProps = {
 
 const COMPONENT_ID$j = 'forms.file_upload';
 const colorStyles$5 = props => {
-  const baseColor = reactTheming.getColor('primaryHue', 600, props.theme);
-  const hoverColor = reactTheming.getColor('primaryHue', 700, props.theme);
-  const activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
-  const disabledBackgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
-  const disabledForegroundColor = reactTheming.getColor('neutralHue', 400, props.theme);
-  return styled.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 : reactTheming.getColor('neutralHue', 600, props.theme), props.isDragging && polished.rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, polished.rgba(baseColor, 0.08), hoverColor, reactTheming.focusStyles({
+  const baseColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
+  const hoverColor = reactTheming.getColorV8('primaryHue', 700, props.theme);
+  const activeColor = reactTheming.getColorV8('primaryHue', 800, props.theme);
+  const disabledBackgroundColor = reactTheming.getColorV8('neutralHue', 200, props.theme);
+  const disabledForegroundColor = reactTheming.getColorV8('neutralHue', 400, props.theme);
+  return styled.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 : reactTheming.getColorV8('neutralHue', 600, props.theme), props.isDragging && polished.rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, polished.rgba(baseColor, 0.08), hoverColor, reactTheming.focusStyles({
     theme: props.theme,
     hue: baseColor
   }), activeColor, polished.rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
@@ -729,7 +729,7 @@ const sizeStyles$8 = props => {
 };
 const StyledFileUpload = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"
@@ -741,7 +741,7 @@ StyledFileUpload.defaultProps = {
 const COMPONENT_ID$i = 'forms.file.close';
 const StyledFileClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
@@ -756,16 +756,16 @@ const colorStyles$4 = props => {
   let focusBorderColor;
   let foregroundColor;
   if (props.validation === 'success') {
-    borderColor = reactTheming.getColor('successHue', 600, props.theme);
+    borderColor = reactTheming.getColorV8('successHue', 600, props.theme);
     focusBorderColor = borderColor;
     foregroundColor = borderColor;
   } else if (props.validation === 'error') {
-    borderColor = reactTheming.getColor('dangerHue', 600, props.theme);
+    borderColor = reactTheming.getColorV8('dangerHue', 600, props.theme);
     focusBorderColor = borderColor;
     foregroundColor = borderColor;
   } else {
-    borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
-    focusBorderColor = reactTheming.getColor('primaryHue', 600, props.theme);
+    borderColor = reactTheming.getColorV8('neutralHue', 300, props.theme);
+    focusBorderColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
     foregroundColor = props.theme.colors.foreground;
   }
   return styled.css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, reactTheming.focusStyles({
@@ -804,7 +804,7 @@ const sizeStyles$7 = props => {
 };
 const StyledFile = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"
@@ -816,11 +816,11 @@ StyledFile.defaultProps = {
 const COMPONENT_ID$g = 'forms.file.delete';
 const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
-})(["color:", ";", ";"], props => reactTheming.getColor('dangerHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
+})(["color:", ";", ";"], props => reactTheming.getColorV8('dangerHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
 StyledFileDelete.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -836,7 +836,7 @@ const StyledFileIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
@@ -848,7 +848,7 @@ StyledFileIcon.defaultProps = {
 const COMPONENT_ID$e = 'forms.file_list';
 const StyledFileList = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"
@@ -860,7 +860,7 @@ StyledFileList.defaultProps = {
 const COMPONENT_ID$d = 'forms.file_list.item';
 const StyledFileListItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"
@@ -890,7 +890,7 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
 const COMPONENT_ID$c = 'forms.radio_svg';
 const StyledRadioSvg = styled__default.default(SvgCircleSmFill$1).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledRadioSvg",
   componentId: "sc-1r1qtr1-0"
@@ -907,7 +907,7 @@ const sizeStyles$6 = props => {
 };
 const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledToggleLabel",
   componentId: "sc-e0asdk-0"
@@ -919,7 +919,7 @@ StyledToggleLabel.defaultProps = {
 const COMPONENT_ID$a = 'forms.toggle_hint';
 const StyledToggleHint = styled__default.default(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledToggleHint",
   componentId: "sc-nziggu-0"
@@ -931,9 +931,9 @@ StyledToggleHint.defaultProps = {
 const COMPONENT_ID$9 = 'forms.toggle';
 const colorStyles$3 = props => {
   const SHADE = 600;
-  const backgroundColor = reactTheming.getColor('neutralHue', SHADE - 100, props.theme);
-  const hoverBackgroundColor = reactTheming.getColor('neutralHue', SHADE, props.theme);
-  const activeBackgroundColor = reactTheming.getColor('neutralHue', SHADE + 100, props.theme);
+  const backgroundColor = reactTheming.getColorV8('neutralHue', SHADE - 100, props.theme);
+  const hoverBackgroundColor = reactTheming.getColorV8('neutralHue', SHADE, props.theme);
+  const activeBackgroundColor = reactTheming.getColorV8('neutralHue', SHADE + 100, props.theme);
   return styled.css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
 };
 const sizeStyles$5 = props => {
@@ -946,7 +946,7 @@ const sizeStyles$5 = props => {
 };
 const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledToggleInput",
   componentId: "sc-sgp47s-0"
@@ -958,7 +958,7 @@ StyledToggleInput.defaultProps = {
 const COMPONENT_ID$8 = 'forms.toggle_message';
 const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledToggleMessage",
   componentId: "sc-13vuvl1-0"
@@ -988,7 +988,7 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
 const COMPONENT_ID$7 = 'forms.toggle_svg';
 const StyledToggleSvg = styled__default.default(SvgCircleSmFill).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledToggleSvg",
   componentId: "sc-162xbyx-0"
@@ -999,7 +999,7 @@ StyledToggleSvg.defaultProps = {
 
 const COMPONENT_ID$6 = 'forms.select';
 const colorStyles$2 = props => {
-  const color = reactTheming.getColor('neutralHue', 700, props.theme);
+  const color = reactTheming.getColorV8('neutralHue', 700, props.theme);
   return styled.css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", ",&[data-garden-focus-visible='true'] + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color);
 };
 const sizeStyles$4 = props => {
@@ -1010,7 +1010,7 @@ const sizeStyles$4 = props => {
 };
 const StyledSelect = styled__default.default(StyledTextInput).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'select'
 }).withConfig({
   displayName: "StyledSelect",
@@ -1023,7 +1023,7 @@ StyledSelect.defaultProps = {
 const COMPONENT_ID$5 = 'forms.select_wrapper';
 const StyledSelectWrapper = styled__default.default(StyledTextFauxInput).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSelectWrapper",
   componentId: "sc-i7b6hw-0"
@@ -1079,19 +1079,19 @@ const trackLowerStyles = function (styles) {
 };
 const colorStyles$1 = props => {
   const SHADE = 600;
-  const thumbBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+  const thumbBackgroundColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme);
   const thumbBorderColor = thumbBackgroundColor;
-  const thumbBoxShadow = props.theme.shadows.lg(polished.math(`${props.theme.space.base} * 1px`), polished.math(`${props.theme.space.base} * 2px`), reactTheming.getColor('neutralHue', SHADE + 200, props.theme, 0.24));
+  const thumbBoxShadow = props.theme.shadows.lg(polished.math(`${props.theme.space.base} * 1px`), polished.math(`${props.theme.space.base} * 2px`), reactTheming.getColorV8('neutralHue', SHADE + 200, props.theme, 0.24));
   const thumbFocusBoxShadow = reactTheming.getFocusBoxShadow({
     theme: props.theme
   });
-  const thumbActiveBackgroundColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
+  const thumbActiveBackgroundColor = reactTheming.getColorV8('primaryHue', SHADE + 100, props.theme);
   const thumbActiveBorderColor = thumbBorderColor;
-  const thumbDisabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
+  const thumbDisabledBackgroundColor = reactTheming.getColorV8('neutralHue', SHADE - 300, props.theme);
   const thumbDisabledBorderColor = thumbDisabledBackgroundColor;
   const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
   const thumbHoverBorderColor = thumbHoverBackgroundColor;
-  const trackBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
+  const trackBackgroundColor = reactTheming.getColorV8('neutralHue', SHADE - 400, props.theme);
   const trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : '';
   const trackBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : '';
   const trackDisabledLowerBackgroundColor = props.hasLowerTrack ? thumbDisabledBackgroundColor : '';
@@ -1148,7 +1148,7 @@ const sizeStyles$3 = props => {
 };
 const StyledRangeInput = styled__default.default.input.attrs(props => ({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   type: 'range',
   style: {
     backgroundSize: props.hasLowerTrack && props.backgroundSize
@@ -1196,7 +1196,7 @@ const sizeStyles$2 = props => {
 };
 const StyledTileIcon = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTileIcon",
   componentId: "sc-1wazhg4-0"
@@ -1208,25 +1208,25 @@ StyledTileIcon.defaultProps = {
 const COMPONENT_ID$2 = 'forms.tile';
 const colorStyles = props => {
   const SHADE = 600;
-  const iconColor = reactTheming.getColor('neutralHue', SHADE, props.theme);
-  const color = reactTheming.getColor('neutralHue', SHADE + 200, props.theme);
-  const borderColor = reactTheming.getColor('neutralHue', SHADE - 300, props.theme);
-  const hoverBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = reactTheming.getColor('primaryHue', SHADE, props.theme);
+  const iconColor = reactTheming.getColorV8('neutralHue', SHADE, props.theme);
+  const color = reactTheming.getColorV8('neutralHue', SHADE + 200, props.theme);
+  const borderColor = reactTheming.getColorV8('neutralHue', SHADE - 300, props.theme);
+  const hoverBackgroundColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme, 0.08);
+  const hoverBorderColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme);
   const focusBorderColor = hoverBorderColor;
-  const activeBackgroundColor = reactTheming.getColor('primaryHue', SHADE, props.theme, 0.2);
+  const activeBackgroundColor = reactTheming.getColorV8('primaryHue', SHADE, props.theme, 0.2);
   const activeBorderColor = focusBorderColor;
-  const disabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 500, props.theme);
-  const disabledBorderColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
-  const disabledColor = reactTheming.getColor('neutralHue', SHADE - 200, props.theme);
+  const disabledBackgroundColor = reactTheming.getColorV8('neutralHue', SHADE - 500, props.theme);
+  const disabledBorderColor = reactTheming.getColorV8('neutralHue', SHADE - 400, props.theme);
+  const disabledColor = reactTheming.getColorV8('neutralHue', SHADE - 200, props.theme);
   const selectedBorderColor = focusBorderColor;
   const selectedBackgroundColor = selectedBorderColor;
-  const selectedHoverBorderColor = reactTheming.getColor('primaryHue', SHADE + 100, props.theme);
+  const selectedHoverBorderColor = reactTheming.getColorV8('primaryHue', SHADE + 100, props.theme);
   const selectedHoverBackgroundColor = selectedHoverBorderColor;
-  const selectedActiveBorderColor = reactTheming.getColor('primaryHue', SHADE + 200, props.theme);
+  const selectedActiveBorderColor = reactTheming.getColorV8('primaryHue', SHADE + 200, props.theme);
   const selectedActiveBackgroundColor = selectedActiveBorderColor;
   const selectedDisabledBackgroundColor = disabledBorderColor;
-  return styled.css(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}", " &:active:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-selected='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):hover{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):active{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true'][aria-disabled='true']{background-color:", ";color:", ";", "{color:", ";}}"], props.theme.borders.sm, reactTheming.getColor('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, reactTheming.focusStyles({
+  return styled.css(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}", " &:active:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-selected='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):hover{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):active{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true'][aria-disabled='true']{background-color:", ";color:", ";", "{color:", ";}}"], props.theme.borders.sm, reactTheming.getColorV8('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, reactTheming.focusStyles({
     theme: props.theme,
     hue: focusBorderColor,
     styles: {
@@ -1237,7 +1237,7 @@ const colorStyles = props => {
 };
 const StyledTile = styled__default.default.label.attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   'data-garden-selected': props.isSelected
 })).withConfig({
   displayName: "StyledTile",
@@ -1261,7 +1261,7 @@ const sizeStyles$1 = props => {
 };
 const StyledTileDescription = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTileDescription",
   componentId: "sc-xfuu7u-0"
@@ -1294,7 +1294,7 @@ const sizeStyles = props => {
 };
 const StyledTileLabel = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTileLabel",
   componentId: "sc-1mypv27-0"
@@ -1303,73 +1303,6 @@ StyledTileLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const Field = React__namespace.default.forwardRef((props, ref) => {
-  const [hasHint, setHasHint] = React.useState(false);
-  const [hasMessage, setHasMessage] = React.useState(false);
-  const [isLabelActive, setIsLabelActive] = React.useState(false);
-  const [isLabelHovered, setIsLabelHovered] = React.useState(false);
-  const {
-    getInputProps,
-    getMessageProps,
-    ...propGetters
-  } = containerField.useField({
-    idPrefix: props.id,
-    hasHint,
-    hasMessage
-  });
-  const fieldProps = React.useMemo(() => ({
-    ...propGetters,
-    getInputProps,
-    getMessageProps,
-    isLabelActive,
-    setIsLabelActive,
-    isLabelHovered,
-    setIsLabelHovered,
-    hasHint,
-    setHasHint,
-    hasMessage,
-    setHasMessage
-  }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
-  return React__namespace.default.createElement(FieldContext.Provider, {
-    value: fieldProps
-  }, React__namespace.default.createElement(StyledField, _extends$t({}, props, {
-    ref: ref
-  })));
-});
-Field.displayName = 'Field';
-
-const FieldsetContext = React.createContext(undefined);
-const useFieldsetContext = () => {
-  const fieldsetContext = React.useContext(FieldsetContext);
-  return fieldsetContext;
-};
-
-const LegendComponent = React.forwardRef((props, ref) => {
-  const fieldsetContext = useFieldsetContext();
-  return React__namespace.default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
-    ref: ref
-  }));
-});
-LegendComponent.displayName = 'Fieldset.Legend';
-const Legend = LegendComponent;
-
-const FieldsetComponent = React.forwardRef((props, ref) => {
-  const fieldsetContext = React.useMemo(() => ({
-    isCompact: props.isCompact
-  }), [props.isCompact]);
-  return React__namespace.default.createElement(FieldsetContext.Provider, {
-    value: fieldsetContext
-  }, React__namespace.default.createElement(StyledFieldset, _extends$t({}, props, {
-    ref: ref
-  })));
-});
-FieldsetComponent.displayName = 'Fieldset';
-FieldsetComponent.propTypes = {
-  isCompact: PropTypes__default.default.bool
-};
-const Fieldset = FieldsetComponent;
-Fieldset.Legend = Legend;
-
 const InputContext = React.createContext(undefined);
 const useInputContext = () => {
   return React.useContext(InputContext);
@@ -1412,6 +1345,71 @@ const Hint = React__namespace.default.forwardRef((props, ref) => {
 });
 Hint.displayName = 'Hint';
 
+const VALIDATION = ['success', 'warning', 'error'];
+const FILE_VALIDATION = ['success', 'error'];
+const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
+
+const Message = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    validation,
+    validationLabel,
+    children,
+    ...props
+  } = _ref;
+  const {
+    hasMessage,
+    setHasMessage,
+    getMessageProps
+  } = useFieldContext() || {};
+  const type = useInputContext();
+  React.useEffect(() => {
+    if (!hasMessage && setHasMessage) {
+      setHasMessage(true);
+    }
+    return () => {
+      if (hasMessage && setHasMessage) {
+        setHasMessage(false);
+      }
+    };
+  }, [hasMessage, setHasMessage]);
+  let MessageComponent;
+  if (type === 'checkbox') {
+    MessageComponent = StyledCheckMessage;
+  } else if (type === 'radio') {
+    MessageComponent = StyledRadioMessage;
+  } else if (type === 'toggle') {
+    MessageComponent = StyledToggleMessage;
+  } else {
+    MessageComponent = StyledMessage;
+  }
+  let combinedProps = {
+    validation,
+    validationLabel,
+    ...props
+  };
+  if (getMessageProps) {
+    combinedProps = getMessageProps(combinedProps);
+  }
+  const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
+  return React__namespace.default.createElement(MessageComponent, _extends$t({
+    ref: ref
+  }, combinedProps), validation && React__namespace.default.createElement(StyledMessageIcon, {
+    validation: validation,
+    "aria-label": ariaLabel
+  }), children);
+});
+Message.displayName = 'Message';
+Message.propTypes = {
+  validation: PropTypes__default.default.oneOf(VALIDATION),
+  validationLabel: PropTypes__default.default.string
+};
+
+const FieldsetContext = React.createContext(undefined);
+const useFieldsetContext = () => {
+  const fieldsetContext = React.useContext(FieldsetContext);
+  return fieldsetContext;
+};
+
 const Label$1 = React__namespace.default.forwardRef((props, ref) => {
   const fieldContext = useFieldContext();
   const fieldsetContext = useFieldsetContext();
@@ -1488,64 +1486,70 @@ Label$1.propTypes = {
   isRegular: PropTypes__default.default.bool
 };
 
-const VALIDATION = ['success', 'warning', 'error'];
-const FILE_VALIDATION = ['success', 'error'];
-const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
-
-const Message = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    validation,
-    validationLabel,
-    children,
-    ...props
-  } = _ref;
+const FieldComponent = React__namespace.default.forwardRef((props, ref) => {
+  const [hasHint, setHasHint] = React.useState(false);
+  const [hasMessage, setHasMessage] = React.useState(false);
+  const [isLabelActive, setIsLabelActive] = React.useState(false);
+  const [isLabelHovered, setIsLabelHovered] = React.useState(false);
   const {
+    getInputProps,
+    getMessageProps,
+    ...propGetters
+  } = containerField.useField({
+    idPrefix: props.id,
+    hasHint,
+    hasMessage
+  });
+  const fieldProps = React.useMemo(() => ({
+    ...propGetters,
+    getInputProps,
+    getMessageProps,
+    isLabelActive,
+    setIsLabelActive,
+    isLabelHovered,
+    setIsLabelHovered,
+    hasHint,
+    setHasHint,
     hasMessage,
-    setHasMessage,
-    getMessageProps
-  } = useFieldContext() || {};
-  const type = useInputContext();
-  React.useEffect(() => {
-    if (!hasMessage && setHasMessage) {
-      setHasMessage(true);
-    }
-    return () => {
-      if (hasMessage && setHasMessage) {
-        setHasMessage(false);
-      }
-    };
-  }, [hasMessage, setHasMessage]);
-  let MessageComponent;
-  if (type === 'checkbox') {
-    MessageComponent = StyledCheckMessage;
-  } else if (type === 'radio') {
-    MessageComponent = StyledRadioMessage;
-  } else if (type === 'toggle') {
-    MessageComponent = StyledToggleMessage;
-  } else {
-    MessageComponent = StyledMessage;
-  }
-  let combinedProps = {
-    validation,
-    validationLabel,
-    ...props
-  };
-  if (getMessageProps) {
-    combinedProps = getMessageProps(combinedProps);
-  }
-  const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation, validation !== undefined);
-  return React__namespace.default.createElement(MessageComponent, _extends$t({
+    setHasMessage
+  }), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
+  return React__namespace.default.createElement(FieldContext.Provider, {
+    value: fieldProps
+  }, React__namespace.default.createElement(StyledField, _extends$t({}, props, {
     ref: ref
-  }, combinedProps), validation && React__namespace.default.createElement(StyledMessageIcon, {
-    validation: validation,
-    "aria-label": ariaLabel
-  }), children);
+  })));
 });
-Message.displayName = 'Message';
-Message.propTypes = {
-  validation: PropTypes__default.default.oneOf(VALIDATION),
-  validationLabel: PropTypes__default.default.string
+FieldComponent.displayName = 'Field';
+const Field = FieldComponent;
+Field.Hint = Hint;
+Field.Label = Label$1;
+Field.Message = Message;
+
+const LegendComponent = React.forwardRef((props, ref) => {
+  const fieldsetContext = useFieldsetContext();
+  return React__namespace.default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
+    ref: ref
+  }));
+});
+LegendComponent.displayName = 'Fieldset.Legend';
+const Legend = LegendComponent;
+
+const FieldsetComponent = React.forwardRef((props, ref) => {
+  const fieldsetContext = React.useMemo(() => ({
+    isCompact: props.isCompact
+  }), [props.isCompact]);
+  return React__namespace.default.createElement(FieldsetContext.Provider, {
+    value: fieldsetContext
+  }, React__namespace.default.createElement(StyledFieldset, _extends$t({}, props, {
+    ref: ref
+  })));
+});
+FieldsetComponent.displayName = 'Fieldset';
+FieldsetComponent.propTypes = {
+  isCompact: PropTypes__default.default.bool
 };
+const Fieldset = FieldsetComponent;
+Fieldset.Legend = Legend;
 
 const Checkbox = React__namespace.default.forwardRef((_ref, ref) => {
   let {