@zendeskgarden/react-forms/dist/index.cjs.js

Components relating to form elements in the Garden Design System

/**
* 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.
*/
'use strict';

var React = require('react');
var containerField = require('@zendeskgarden/container-field');
var styled = require('styled-components');
var reactTheming = require('@zendeskgarden/react-theming');
var polished = require('polished');
var PropTypes = require('prop-types');
var containerUtilities = require('@zendeskgarden/container-utilities');
var reactMergeRefs = require('react-merge-refs');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

const FieldContext = React.createContext(undefined);
const useFieldContext = () => {
  const fieldContext = React.useContext(FieldContext);
  return fieldContext;
};

const COMPONENT_ID$G = 'forms.field';
const StyledField = styled__default.default.div.attrs({
  'data-garden-id': COMPONENT_ID$G,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledField",
  componentId: "sc-12gzfsu-0"
})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', reactTheming.componentStyles);

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.12.6'
}).withConfig({
  displayName: "StyledFieldset",
  componentId: "sc-1vr4mxv-0"
})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.$isCompact ? 1 : 2), reactTheming.componentStyles);

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.12.6'
})).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 => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => reactTheming.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 && polished.hideVisually(), reactTheming.componentStyles);

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.12.6'
}).withConfig({
  displayName: "StyledLegend",
  componentId: "sc-6s0zwq-0"
})(["padding:0;", ";"], reactTheming.componentStyles);

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.12.6'
})).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({
  theme: props.theme,
  variable: 'foreground.subtle'
}), props => props.theme.fontSizes.md, reactTheming.componentStyles);

const COMPONENT_ID$B = 'forms.input_message_icon';
const StyledMessageIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
  'data-garden-id': COMPONENT_ID$B,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledMessageIcon",
  componentId: "sc-1ph2gba-0"
})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, reactTheming.componentStyles);

const COMPONENT_ID$A = 'forms.input_message';
const colorStyles$d = ({
  theme,
  $validation
}) => {
  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 = reactTheming.getColor({
    theme,
    variable
  });
  return styled.css(["color:", ";"], foregroundColor);
};
const sizeStyles$g = ({
  theme,
  $validation
}) => {
  const fontSize = theme.fontSizes.sm;
  const lineHeight = reactTheming.getLineHeight(theme.iconSizes.md, theme.fontSizes.sm);
  const marginTop = `${theme.space.base}px`;
  const paddingHorizontal = $validation ? polished.math(`${theme.space.base * 2} + ${theme.iconSizes.md}`) : undefined;
  return styled.css(["padding-", ":", ";line-height:", ";font-size:", ";", ":not([hidden]) + &{margin-top:", ";}"], theme.rtl ? 'right' : 'left', paddingHorizontal, lineHeight, fontSize, StyledLabel, marginTop);
};
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.12.6'
})).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$g, colorStyles$d, StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, reactTheming.componentStyles);

const COMPONENT_ID$z = 'forms.input';
const isInvalid = validation => {
  return validation === 'warning' || validation === 'error';
};
const colorStyles$c = ({
  theme,
  $isBare,
  $isHovered,
  $focusInset,
  $validation
}) => {
  const foregroundColor = reactTheming.getColor({
    theme,
    variable: 'foreground.default'
  });
  const backgroundColor = $isBare ? 'transparent' : reactTheming.getColor({
    theme,
    variable: 'background.default'
  });
  let borderColor;
  let hoverBorderColor;
  let borderVariable;
  let focusBorderColor;
  if ($validation) {
    if ($validation === 'success') {
      borderVariable = 'border.successEmphasis';
    } else if ($validation === 'warning') {
      borderVariable = 'border.warningEmphasis';
    } else if ($validation === 'error') {
      borderVariable = 'border.dangerEmphasis';
    }
    borderColor = reactTheming.getColor({
      theme,
      variable: borderVariable
    });
    hoverBorderColor = borderColor;
    focusBorderColor = borderColor;
  } else {
    borderColor = reactTheming.getColor({
      theme,
      variable: 'border.default',
      dark: {
        offset: -100
      },
      light: {
        offset: 100
      }
    });
    borderVariable = 'border.primaryEmphasis';
    hoverBorderColor = reactTheming.getColor({
      theme,
      variable: borderVariable
    });
    focusBorderColor = hoverBorderColor;
  }
  const disabledBackgroundColor = $isBare ? undefined : reactTheming.getColor({
    theme,
    variable: 'background.disabled'
  });
  const disabledBorderColor = reactTheming.getColor({
    theme,
    variable: 'border.disabled'
  });
  const disabledForegroundColor = reactTheming.getColor({
    theme,
    variable: 'foreground.disabled'
  });
  const placeholderColor = disabledForegroundColor;
  const readOnlyBackgroundColor = disabledBackgroundColor;
  const calendarPickerColor = reactTheming.getColor({
    theme,
    variable: 'foreground.subtle'
  });
  const calendarPickerIcon = `
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" color="${calendarPickerColor}">
      <path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"/>
    </svg>`;
  const calendarPickerBackgroundImage = `url("data:image/svg+xml,${encodeURIComponent(calendarPickerIcon)}")`;
  return styled.css(["border-color:", ";background-color:", ";color:", ";&::placeholder{opacity:1;color:", ";}&::-webkit-datetime-edit{color:", ";}&::-webkit-calendar-picker-indicator{background-image:", ";}&[readonly],&[aria-readonly='true']{background-color:", ";}&:hover{border-color:", ";}", " &::-webkit-calendar-picker-indicator:focus-visible{", "}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], $isHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, placeholderColor, placeholderColor, calendarPickerBackgroundImage, readOnlyBackgroundColor, hoverBorderColor, reactTheming.focusStyles({
    theme,
    inset: $focusInset,
    color: {
      variable: borderVariable
    },
    styles: {
      borderColor: focusBorderColor
    },
    condition: !$isBare
  }), reactTheming.focusStyles({
    theme
  }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
};
const sizeStyles$f = ({
  theme,
  $isBare,
  $isCompact
}) => {
  const fontSize = theme.fontSizes.md;
  const paddingHorizontal = `${theme.space.base * 3}px`;
  let height;
  let paddingVertical;
  let browseFontSize;
  let swatchHeight;
  if ($isCompact) {
    height = `${theme.space.base * 8}px`;
    paddingVertical = `${theme.space.base * 1.5}px`;
    browseFontSize = polished.math(`${theme.fontSizes.sm} - 1`);
    swatchHeight = `${theme.space.base * 6}px`;
  } else {
    height = `${theme.space.base * 10}px`;
    paddingVertical = `${theme.space.base * 2.5}px`;
    browseFontSize = theme.fontSizes.sm;
    swatchHeight = `${theme.space.base * 7}px`;
  }
  const lineHeight = polished.math(`${height} - (${paddingVertical} * 2) - (${theme.borderWidths.sm} * 2)`);
  const padding = $isBare ? '0' : `${polished.em(paddingVertical, fontSize)} ${polished.em(paddingHorizontal, fontSize)}`;
  const swatchMarginVertical = polished.math(`(${lineHeight} - ${swatchHeight}) / 2`);
  const swatchMarginHorizontal = polished.math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`);
  const calendarPickerSize = `${theme.space.base * 5}px`;
  const calendarPickerBackgroundSize = theme.iconSizes.md;
  return styled.css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-calendar-picker-indicator{background-position:center;background-size:", ";padding:0;width:", ";height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& ~ ", "{margin-top:", "px;}"], padding, $isBare ? '1em' : height, reactTheming.getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, $isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, polished.math(`${swatchMarginHorizontal} * -2`), swatchHeight, calendarPickerBackgroundSize, calendarPickerSize, calendarPickerSize, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, theme.space.base * ($isCompact ? 1 : 2));
};
const StyledTextInput = styled__default.default.input.attrs(props => ({
  'data-garden-id': COMPONENT_ID$z,
  'data-garden-version': '9.12.6',
  'aria-invalid': isInvalid(props.$validation)
})).withConfig({
  displayName: "StyledTextInput",
  componentId: "sc-1r6733h-0"
})(["appearance:none;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,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::-webkit-calendar-picker-indicator{border-radius:100%;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.$isBare ? 'none' : props.theme.borders.sm, props => props.$isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', sizeStyles$f, colorStyles$c, reactTheming.componentStyles);

const COMPONENT_ID$y = 'forms.textarea';
const hiddenStyles = `
  visibility: hidden;
  position: absolute;
  overflow: hidden;
  height: 0;
  top: 0;
  left: 0;
  transform: translateZ(0);
`;
const StyledTextarea = styled__default.default(StyledTextInput).attrs({
  as: 'textarea',
  'data-garden-id': COMPONENT_ID$y,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledTextarea",
  componentId: "sc-wxschl-0"
})(["resize:", ";overflow:auto;", ";", ";"], props => props.$isResizable ? 'vertical' : 'none', props => props.$isHidden && hiddenStyles, reactTheming.componentStyles);

const COMPONENT_ID$x = 'forms.media_figure';
const colorStyles$b = ({
  theme,
  $isDisabled,
  $isHovered,
  $isFocused
}) => {
  let color;
  if ($isDisabled) {
    color = reactTheming.getColor({
      theme,
      variable: 'foreground.disabled'
    });
  } else {
    const options = {
      theme,
      variable: 'foreground.subtle'
    };
    if ($isHovered || $isFocused) {
      color = reactTheming.getColor({
        ...options,
        dark: {
          offset: -100
        },
        light: {
          offset: 100
        }
      });
    } else {
      color = reactTheming.getColor(options);
    }
  }
  return styled.css(["color:", ";"], color);
};
const sizeStyles$e = props => {
  const size = props.theme.iconSizes.md;
  const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
  const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
  let margin;
  if (props.$position === 'start') {
    margin = props.theme.rtl ? marginLast : marginFirst;
  } else {
    margin = props.theme.rtl ? marginFirst : marginLast;
  }
  return styled.css(["margin:", ";width:", ";height:", ";"], margin, size, size);
};
const StyledTextMediaFigure = styled__default.default(reactTheming.StyledBaseIcon).attrs({
  'data-garden-id': COMPONENT_ID$x,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledTextMediaFigure",
  componentId: "sc-1qepknj-0"
})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles$e, colorStyles$b, reactTheming.componentStyles);

const COMPONENT_ID$w = 'forms.faux_input';
const colorStyles$a = ({
  theme,
  $validation,
  $focusInset,
  $isBare,
  $isFocused
}) => {
  let borderVariable;
  let focusBorderColor;
  if ($validation) {
    if ($validation === 'success') {
      borderVariable = 'border.successEmphasis';
    } else if ($validation === 'warning') {
      borderVariable = 'border.warningEmphasis';
    } else if ($validation === 'error') {
      borderVariable = 'border.dangerEmphasis';
    }
    focusBorderColor = reactTheming.getColor({
      theme,
      variable: borderVariable
    });
  } else {
    borderVariable = 'border.primaryEmphasis';
    focusBorderColor = reactTheming.getColor({
      theme,
      variable: borderVariable
    });
  }
  return styled.css(["", ""], reactTheming.focusStyles({
    theme,
    inset: $focusInset,
    color: {
      variable: borderVariable
    },
    selector: $isFocused ? '&' : '&:focus-within',
    styles: {
      borderColor: focusBorderColor
    },
    condition: !$isBare
  }));
};
const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props => ({
  as: 'div',
  'aria-readonly': props.$isReadOnly,
  'aria-disabled': props.$isDisabled,
  'data-garden-id': COMPONENT_ID$w,
  'data-garden-version': '9.12.6'
})).withConfig({
  displayName: "StyledTextFauxInput",
  componentId: "sc-yqw7j9-0"
})(["display:", ";align-items:", ";cursor:", ";overflow:hidden;", " & > ", "{vertical-align:", ";", "{box-shadow:unset;}}& > ", "{flex-shrink:", ";}", ";"], props => props.$mediaLayout ? 'inline-flex' : 'inline-block', props => props.$mediaLayout && 'baseline', props => props.$mediaLayout && !props.$isDisabled ? 'text' : 'default', colorStyles$a, StyledTextInput, props => !props.$mediaLayout && 'baseline', reactTheming.SELECTOR_FOCUS_VISIBLE, StyledTextMediaFigure, props => props.$mediaLayout && '0', reactTheming.componentStyles);

const COMPONENT_ID$v = 'forms.media_input';
const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
  'data-garden-id': COMPONENT_ID$v,
  'data-garden-version': '9.12.6',
  $isBare: true
}).withConfig({
  displayName: "StyledTextMediaInput",
  componentId: "sc-12i9xfi-0"
})(["flex-grow:1;", ";"], reactTheming.componentStyles);

const COMPONENT_ID$u = 'forms.input_group';
const positionStyles = props => {
  const topMargin = `${props.theme.space.base * (props.$isCompact ? 1 : 2)}px`;
  return styled.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 styled.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__default.default.div.attrs({
  'data-garden-id': COMPONENT_ID$u,
  'data-garden-version': '9.12.6'
}).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), reactTheming.componentStyles);

const COMPONENT_ID$t = 'forms.radio_label';
const sizeStyles$d = props => {
  const size = props.theme.space.base * 4;
  const padding = size + props.theme.space.base * 2;
  const lineHeight = props.theme.space.base * 5;
  return styled.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__default.default(StyledLabel).attrs({
  'data-garden-id': COMPONENT_ID$t,
  'data-garden-version': '9.12.6',
  $isRadio: true
}).withConfig({
  displayName: "StyledRadioLabel",
  componentId: "sc-1aq2e5t-0"
})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles$d(props), reactTheming.componentStyles);

const COMPONENT_ID$s = 'forms.checkbox_label';
const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
  'data-garden-id': COMPONENT_ID$s,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledCheckLabel",
  componentId: "sc-x7nr1-0"
})(["", ";"], reactTheming.componentStyles);

const COMPONENT_ID$r = 'forms.radio_hint';
const StyledRadioHint = styled__default.default(StyledHint).attrs({
  'data-garden-id': COMPONENT_ID$r,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledRadioHint",
  componentId: "sc-eo8twg-0"
})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 6px`), reactTheming.componentStyles);

const COMPONENT_ID$q = 'forms.checkbox_hint';
const StyledCheckHint = styled__default.default(StyledRadioHint).attrs({
  'data-garden-id': COMPONENT_ID$q,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledCheckHint",
  componentId: "sc-1kl8e8c-0"
})(["", ";"], reactTheming.componentStyles);

const COMPONENT_ID$p = 'forms.radio';
const colorStyles$9 = ({
  theme
}) => {
  const borderColor = reactTheming.getColor({
    theme,
    variable: 'border.emphasis'
  });
  const backgroundColor = reactTheming.getColor({
    theme,
    variable: 'background.default'
  });
  const iconColor = reactTheming.getColor({
    theme,
    variable: 'foreground.onEmphasis'
  });
  const backgroundOptions = {
    theme,
    variable: 'background.primaryEmphasis'
  };
  const borderOptions = {
    theme,
    variable: 'border.primaryEmphasis'
  };
  const hoverBackgroundColor = reactTheming.getColor({
    ...backgroundOptions,
    transparency: theme.opacity[100]
  });
  const hoverBorderColor = reactTheming.getColor(borderOptions);
  const focusBorderColor = hoverBorderColor;
  const activeBackgroundColor = reactTheming.getColor({
    ...backgroundOptions,
    transparency: theme.opacity[200]
  });
  const activeBorderColor = focusBorderColor;
  const checkedBackgroundColor = reactTheming.getColor(backgroundOptions);
  const checkedBorderColor = focusBorderColor;
  const offset100 = {
    dark: {
      offset: -100
    },
    light: {
      offset: 100
    }
  };
  const offset200 = {
    dark: {
      offset: -200
    },
    light: {
      offset: 200
    }
  };
  const checkedHoverBackgroundColor = reactTheming.getColor({
    ...backgroundOptions,
    ...offset100
  });
  const checkedHoverBorderColor = reactTheming.getColor({
    ...borderOptions,
    ...offset100
  });
  const checkedActiveBackgroundColor = reactTheming.getColor({
    ...backgroundOptions,
    ...offset200
  });
  const checkedActiveBorderColor = reactTheming.getColor({
    ...borderOptions,
    ...offset200
  });
  const disabledBackgroundColor = reactTheming.getColor({
    theme,
    variable: 'background.disabled',
    transparency: theme.opacity[300]
  });
  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,
    styles: {
      borderColor: focusBorderColor
    },
    selector: `&:focus-visible ~ ${StyledRadioLabel}::before`
  }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
};
const sizeStyles$c = ({
  theme,
  $isCompact
}) => {
  const lineHeight = `${theme.space.base * 5}px`;
  const size = `${theme.space.base * 4}px`;
  const top = polished.math(`(${lineHeight} - ${size}) / 2`);
  const iconSize = theme.iconSizes.sm;
  const iconPosition = polished.math(`(${size} - ${iconSize}) / 2`);
  const iconTop = polished.math(`${iconPosition} + ${top}`);
  const marginTop = `${theme.space.base * ($isCompact ? 1 : 2)}px`;
  return styled.css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";border:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, theme.borders.sm, theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
};
const StyledRadioInput = styled__default.default.input.attrs({
  'data-garden-id': COMPONENT_ID$p,
  'data-garden-version': '9.12.6',
  type: 'radio'
}).withConfig({
  displayName: "StyledRadioInput",
  componentId: "sc-qsavpv-0"
})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', StyledRadioLabel, sizeStyles$c, StyledRadioLabel, StyledRadioLabel, colorStyles$9, StyledRadioLabel, reactTheming.componentStyles);

const COMPONENT_ID$o = 'forms.checkbox';
const colorStyles$8 = ({
  theme
}) => {
  const backgroundOptions = {
    theme,
    variable: 'background.primaryEmphasis'
  };
  const borderOptions = {
    theme,
    variable: 'border.primaryEmphasis'
  };
  const indeterminateBackgroundColor = reactTheming.getColor(backgroundOptions);
  const indeterminateBorderColor = reactTheming.getColor(borderOptions);
  const offset100 = {
    dark: {
      offset: -100
    },
    light: {
      offset: 100
    }
  };
  const offset200 = {
    dark: {
      offset: -200
    },
    light: {
      offset: 200
    }
  };
  const indeterminateHoverBackgroundColor = reactTheming.getColor({
    ...backgroundOptions,
    ...offset100
  });
  const indeterminateHoverBorderColor = reactTheming.getColor({
    ...borderOptions,
    ...offset100
  });
  const indeterminateActiveBackgroundColor = reactTheming.getColor({
    ...backgroundOptions,
    ...offset200
  });
  const indeterminateActiveBorderColor = reactTheming.getColor({
    ...borderOptions,
    ...offset200
  });
  const indeterminateDisabledBackgroundColor = reactTheming.getColor({
    theme,
    variable: 'background.disabled',
    transparency: theme.opacity[300]
  });
  return styled.css(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":hover::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, indeterminateHoverBorderColor, indeterminateHoverBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor);
};
const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
  'data-garden-id': COMPONENT_ID$o,
  'data-garden-version': '9.12.6',
  type: 'checkbox'
}).withConfig({
  displayName: "StyledCheckInput",
  componentId: "sc-176jxxe-0"
})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, colorStyles$8, reactTheming.componentStyles);

const COMPONENT_ID$n = 'forms.radio_message';
const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
  'data-garden-id': COMPONENT_ID$n,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledRadioMessage",
  componentId: "sc-1pmi0q8-0"
})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 6px`), reactTheming.componentStyles);

const COMPONENT_ID$m = 'forms.checkbox_message';
const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
  'data-garden-id': COMPONENT_ID$m,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledCheckMessage",
  componentId: "sc-s4p6kd-0"
})(["", ";"], reactTheming.componentStyles);

var _path$n;
function _extends$s() { return _extends$s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$s.apply(null, arguments); }
var SvgCheckSmFill = function SvgCheckSmFill(props) {
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
    xmlns: "http://www.w3.org/2000/svg",
    width: 12,
    height: 12,
    focusable: "false",
    viewBox: "0 0 12 12",
    "aria-hidden": "true"
  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
    fill: "none",
    stroke: "currentColor",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    strokeWidth: 2,
    d: "M3 6l2 2 4-4"
  })));
};

const COMPONENT_ID$l = 'forms.check_svg';
const StyledCheckSvg = styled__default.default(SvgCheckSmFill).attrs({
  'data-garden-id': COMPONENT_ID$l,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledCheckSvg",
  componentId: "sc-fvxetk-0"
})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, reactTheming.componentStyles);

var _path$m;
function _extends$r() { return _extends$r = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$r.apply(null, arguments); }
var SvgDashFill = function SvgDashFill(props) {
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
    xmlns: "http://www.w3.org/2000/svg",
    width: 12,
    height: 12,
    focusable: "false",
    viewBox: "0 0 12 12",
    "aria-hidden": "true"
  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
    stroke: "currentColor",
    strokeLinecap: "round",
    strokeWidth: 2,
    d: "M3 6h6"
  })));
};

const COMPONENT_ID$k = 'forms.dash_svg';
const StyledDashSvg = styled__default.default(SvgDashFill).attrs({
  'data-garden-id': COMPONENT_ID$k,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledDashSvg",
  componentId: "sc-z3vq71-0"
})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, reactTheming.componentStyles);

const COMPONENT_ID$j = 'forms.file_upload';
const colorStyles$7 = ({
  theme,
  $isDragging
}) => {
  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 = reactTheming.getColor({
    theme,
    variable: 'border.emphasis'
  });
  const foregroundColor = reactTheming.getColor(foregroundOptions);
  const hoverBorderColor = reactTheming.getColor({
    ...borderOptions,
    ...offset100
  });
  const hoverBackgroundColor = reactTheming.getColor({
    ...backgroundOptions,
    transparency: theme.opacity[100]
  });
  const hoverForegroundColor = reactTheming.getColor({
    ...foregroundOptions,
    ...offset100
  });
  const activeBorderColor = reactTheming.getColor({
    ...borderOptions,
    ...offset200
  });
  const activeBackgroundColor = reactTheming.getColor({
    ...backgroundOptions,
    transparency: theme.opacity[200]
  });
  const activeForegroundColor = reactTheming.getColor({
    ...foregroundOptions,
    ...offset200
  });
  const disabledBorderColor = reactTheming.getColor({
    theme,
    variable: 'border.disabled'
  });
  const disabledBackgroundColor = reactTheming.getColor({
    theme,
    variable: 'background.disabled'
  });
  const disabledForegroundColor = reactTheming.getColor({
    theme,
    variable: 'foreground.disabled'
  });
  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:", ";}"], $isDragging ? activeBorderColor : borderColor, $isDragging ? activeBackgroundColor : undefined, $isDragging ? activeForegroundColor : foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
    theme
  }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
};
const sizeStyles$b = ({
  theme,
  $isCompact
}) => {
  const marginTop = `${theme.space.base * ($isCompact ? 1 : 2)}px`;
  const paddingHorizontal = `${$isCompact ? 2 : 4}em`;
  const paddingVertical = polished.math(`${theme.space.base * ($isCompact ? 2.5 : 5)} - ${theme.borderWidths.sm}`);
  const fontSize = theme.fontSizes.md;
  const lineHeight = reactTheming.getLineHeight(theme.space.base * 5, fontSize);
  return styled.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__default.default.div.attrs({
  'data-garden-id': COMPONENT_ID$j,
  'data-garden-version': '9.12.6'
}).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$b, colorStyles$7, reactTheming.componentStyles);

const COMPONENT_ID$i = 'forms.file.close';
const StyledFileClose = styled__default.default.button.attrs({
  'data-garden-id': COMPONENT_ID$i,
  'data-garden-version': '9.12.6'
}).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 => reactTheming.getColor({
  theme: props.theme,
  variable: 'foreground.subtle'
}), reactTheming.componentStyles);

const COMPONENT_ID$h = 'forms.file';
const colorStyles$6 = ({
  theme,
  $focusInset,
  $validation
}) => {
  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 = reactTheming.getColor({
    theme,
    variable: borderVariable
  });
  const focusBorderColor = reactTheming.getColor({
    theme,
    variable: focusBorderVariable
  });
  const foregroundColor = reactTheming.getColor({
    theme,
    variable: foregroundVariable
  });
  return styled.css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, reactTheming.focusStyles({
    theme,
    inset: $focusInset,
    color: {
      variable: focusBorderVariable
    },
    styles: {
      borderColor: focusBorderColor
    }
  }));
};
const sizeStyles$a = ({
  theme,
  $isCompact
}) => {
  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 = reactTheming.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__default.default.div.attrs({
  'data-garden-id': COMPONENT_ID$h,
  'data-garden-version': '9.12.6'
}).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$a, colorStyles$6, props => props.theme.rtl ? 'right' : 'left', reactTheming.componentStyles);

const COMPONENT_ID$g = 'forms.file.delete';
const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
  'data-garden-id': COMPONENT_ID$g,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledFileDelete",
  componentId: "sc-a8nnhx-0"
})(["color:", ";", ";"], props => reactTheming.getColor({
  theme: props.theme,
  variable: 'foreground.danger'
}), reactTheming.componentStyles);

const COMPONENT_ID$f = 'forms.file.icon';
const colorStyles$5 = ({
  theme,
  $validation
}) => {
  const color = $validation ? undefined : reactTheming.getColor({
    theme,
    variable: 'foreground.subtle'
  });
  return styled.css(["color:", ";"], color);
};
const sizeStyles$9 = ({
  $isCompact,
  theme
}) => {
  const width = $isCompact ? theme.iconSizes.sm : theme.iconSizes.md;
  const margin = `${theme.space.base * 2}px`;
  return styled.css(["width:", ";margin-", ":", ";"], width, theme.rtl ? 'left' : 'right', margin);
};
const StyledFileIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
  'data-garden-id': COMPONENT_ID$f,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledFileIcon",
  componentId: "sc-7b3q0c-0"
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$9, colorStyles$5, reactTheming.componentStyles);

const COMPONENT_ID$e = 'forms.file_list';
const StyledFileList = styled__default.default.ul.attrs({
  'data-garden-id': COMPONENT_ID$e,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledFileList",
  componentId: "sc-gbahjg-0"
})(["margin:0;padding:0;list-style:none;", ";"], reactTheming.componentStyles);

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.12.6'
}).withConfig({
  displayName: "StyledFileListItem",
  componentId: "sc-1ova3lo-0"
})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, reactTheming.componentStyles);

var _circle$5;
function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
    xmlns: "http://www.w3.org/2000/svg",
    width: 12,
    height: 12,
    focusable: "false",
    viewBox: "0 0 12 12",
    "aria-hidden": "true"
  }, props), _circle$5 || (_circle$5 = /*#__PURE__*/React__namespace.createElement("circle", {
    cx: 6,
    cy: 6,
    r: 2,
    fill: "currentColor"
  })));
};

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.12.6'
}).withConfig({
  displayName: "StyledRadioSvg",
  componentId: "sc-1r1qtr1-0"
})(["transition:opacity 0.25s ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, reactTheming.componentStyles);

const COMPONENT_ID$b = 'forms.toggle_label';
const sizeStyles$8 = props => {
  const size = props.theme.space.base * 10;
  const padding = size + props.theme.space.base * 2;
  return styled.css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size);
};
const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
  'data-garden-id': COMPONENT_ID$b,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledToggleLabel",
  componentId: "sc-e0asdk-0"
})(["", ";", ";"], props => sizeStyles$8(props), reactTheming.componentStyles);

const COMPONENT_ID$a = 'forms.toggle_hint';
const StyledToggleHint = styled__default.default(StyledHint).attrs({
  'data-garden-id': COMPONENT_ID$a,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledToggleHint",
  componentId: "sc-nziggu-0"
})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 12px`), reactTheming.componentStyles);

const COMPONENT_ID$9 = 'forms.toggle';
const colorStyles$4 = ({
  theme
}) => {
  const backgroundOptions = {
    theme,
    variable: 'background.emphasis'
  };
  const backgroundColor = reactTheming.getColor(backgroundOptions);
  const hoverBackgroundColor = reactTheming.getColor({
    ...backgroundOptions,
    dark: {
      offset: -100
    },
    light: {
      offset: 100
    }
  });
  const activeBackgroundColor = reactTheming.getColor({
    ...backgroundOptions,
    dark: {
      offset: -200
    },
    light: {
      offset: 200
    }
  });
  return styled.css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
};
const sizeStyles$7 = ({
  theme
}) => {
  const height = `${theme.space.base * 5}px`;
  const width = `${theme.space.base * 10}px`;
  const iconSize = theme.iconSizes.md;
  const iconPosition = polished.math(`(${height} - ${iconSize}) / 2`);
  const checkedIconPosition = polished.math(`${width} - ${iconSize} - ${iconPosition}`);
  return styled.css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, theme.rtl ? 'right' : 'left', checkedIconPosition);
};
const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
  'data-garden-id': COMPONENT_ID$9,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledToggleInput",
  componentId: "sc-sgp47s-0"
})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, sizeStyles$7, colorStyles$4, reactTheming.componentStyles);

const COMPONENT_ID$8 = 'forms.toggle_message';
const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
  'data-garden-id': COMPONENT_ID$8,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledToggleMessage",
  componentId: "sc-13vuvl1-0"
})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), reactTheming.componentStyles);

var _circle$4;
function _extends$p() { return _extends$p = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$p.apply(null, arguments); }
var SvgCircleSmFill = function SvgCircleSmFill(props) {
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
    xmlns: "http://www.w3.org/2000/svg",
    width: 16,
    height: 16,
    focusable: "false",
    viewBox: "0 0 16 16",
    "aria-hidden": "true"
  }, props), _circle$4 || (_circle$4 = /*#__PURE__*/React__namespace.createElement("circle", {
    cx: 8,
    cy: 8,
    r: 6,
    fill: "currentColor"
  })));
};

const COMPONENT_ID$7 = 'forms.toggle_svg';
const StyledToggleSvg = styled__default.default(SvgCircleSmFill).attrs({
  'data-garden-id': COMPONENT_ID$7,
  'data-garden-version': '9.12.6'
}).withConfig({
  displayName: "StyledToggleSvg",
  componentId: "sc-162xbyx-0"
})(["transition:all 0.15s ease-in-out;", ";"], reactTheming.componentStyles);

const COMPONENT_ID$6 = 'forms.select';
const colorStyles$3 = ({
  theme
}) => {
  const color = reactTheming.getColor({
    theme,
    variable: 'foreground.subtle',
    dark: {
      offset: -100
    },
    light: {
      offset: 100
    }
  });
  const disabledColor = reactTheming.getColor({
    theme,
    variable: 'foreground.disabled'
  });
  return styled.css(["&:hover + ", ",&:focus + ", ",&:focus-visible + ", "{color:", ";}&:disabled + ", "{color:", ";}"], StyledTextMediaFigure, StyledTextMediaFigure, StyledTextMediaFigure, color, StyledTextMediaFigure, disabledColor);
};
const sizeStyles$6 = ({
  theme,
  $isBare,
  $isCompact
}) => {
  const padding = $isBare ? undefined : polished.math(`${theme.iconSizes.md} + ${theme.space.base * 5}`);
  const iconVerticalPosition = `${theme.space.base * ($isCompact ? 1.5 : 2.5) + 1}px`;
  const iconHorizontalPosition = `${theme.space.base * 3}px`;
  return styled.css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], theme.rtl ? 'left' : 'right', padding, StyledTextMediaFigure, iconVerticalPosition, theme.rtl ? 'left' : 'right', iconHorizontalPosition);
};
const StyledSelect = styled__default.default(StyledTextInput).attrs({
  'data-garden-id': COMPONENT_ID$6,
  'data-garden-version': '9.12.6',
  as: 'select'
}).withConfig({
  displayName: "StyledSelect",
  componentId: "sc-8xdxpt-0"
})(["opacity:1;cursor:pointer;text-overflow:ellipsis;", ";", ";&::-ms-expand{display:none;}&::-ms-value{background-color:transparent;color:inherit;}&:-moz-focusring{transition:none;text-shadow:0 0 0 ", ";color:transparent;}& + ", "{position:absolute;pointer-events:none;}"], sizeStyles$6, colorStyles$3, props => reactTheming.getColor({
  theme: props.theme,
  variable: 'foreground.default'
}), StyledTextMediaFigure);

const COMPONENT_ID$5 = 'forms.select_wrapper';
const sizeStyles$5 = ({
  theme,
  $isCompact
}) => {
  const height = `${theme.space.base * ($isCompact ? 8 : 10)}px`;
  return styled.css(["max-height:", ";"], height);
};
const StyledSelectWrapper = styled__default.def