@retailmenot/anchor/commonjs/form.js

A React UI Library by RetailMeNot

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var __chunk_2 = require('./anchor-chunk-9d9a5df6.js');
var __chunk_6 = require('./anchor-chunk-cd6fece5.js');
var __chunk_8 = require('./anchor-chunk-598e53e1.js');
var __chunk_9 = require('./anchor-chunk-f296150d.js');
var __chunk_10 = require('./anchor-chunk-925bd1f9.js');
var React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
var system = require('@xstyled/system');
require('./addevent.js');
require('./anchor-chunk-31a3b978.js');
require('./arrowback.js');
require('./arrowforward.js');
require('./avataricon.js');
require('./avataroutline.js');
require('./barcode.js');
require('./bulletlist.js');
require('./calendar.js');
require('./camera.js');
require('./cart.js');
require('./cashback.js');
require('./cells.js');
require('./chat.js');
var check = require('./check.js');
require('./checksmall.js');
require('./chevrondown.js');
require('./chevrondownsmall.js');
require('./chevronleft.js');
require('./chevronleftsmall.js');
require('./chevronright.js');
require('./chevronrightsmall.js');
require('./chevronup.js');
require('./chevronupsmall.js');
require('./clock.js');
require('./close.js');
require('./closesmall.js');
require('./commentmore.js');
require('./creditcard.js');
require('./crosshairs.js');
require('./cut.js');
require('./disabled.js');
require('./dislike.js');
require('./download.js');
require('./ellipses.js');
require('./ellipsesvertical.js');
require('./envelope.js');
require('./envelopeopen.js');
require('./error.js');
require('./expand.js');
require('./gear.js');
require('./giftcard.js');
require('./hamburger.js');
require('./heart.js');
require('./heartoutline.js');
require('./home.js');
require('./info.js');
require('./infooutline.js');
require('./laptop.js');
require('./lightning.js');
require('./like.js');
require('./listicon.js');
require('./lock.js');
require('./map.js');
require('./marker.js');
require('./markeroutline.js');
require('./mobile.js');
require('./news.js');
require('./pencil.js');
require('./play.js');
require('./plus.js');
require('./plussmall.js');
require('./print.js');
require('./question.js');
require('./questionoutline.js');
require('./refresh.js');
require('./retailmenotlogo.js');
require('./sadface.js');
require('./search.js');
require('./share.js');
require('./sliders.js');
require('./star.js');
require('./starhalf.js');
require('./staroutline.js');
require('./success.js');
require('./successoutline.js');
require('./tag.js');
require('./upload.js');
require('./tagadd.js');
require('./anchor-chunk-1efd6395.js');

function _templateObject5() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    height: 100%;\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    border: none;\n    padding: 0;\n    outline: none !important;\n    touch-action: manipulation;\n    -webkit-appearance: none;\n    background-color: transparent;\n    z-index: 1;\n    color: text.base;\n    // TODO: bring this back when the 'bug' in styled components gets sorted out (MVP)\n    //transition: all 250ms;\n    font-family: base;\n    // Disable Number Spinners\n    &[type='number']::-webkit-inner-spin-button,\n    &[type='number']::-webkit-outer-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    &:placeholder-shown + label {\n        cursor: text;\n        max-width: 100%;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    ", ";\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    &:focus::-webkit-input-placeholder {\n        opacity: 1;\n    }\n\n    ::-webkit-input-placeholder {\n        opacity: 0;\n        transition: inherit;\n    }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    display: flex;\n    flex-flow: column-reverse;\n    padding: 0 0.25rem;\n    justify-content: center;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    // Input Display Size\n    display: block;\n    position: relative;\n    border: solid thin ", ";\n    border-radius: base;\n    cursor: text;\n    box-sizing: border-box;\n    min-width: 5rem;\n    width: 100%;\n    margin: 0;\n    // TODO: delete\n    overflow: hidden;\n\n    ::placeholder {\n        font-family: base;\n        color: text.placeholder;\n    }\n\n    &.focus {\n        border-color: borders.dark;\n    }\n\n    label {\n        transform-origin: left bottom;\n        height: 1.4rem;\n        transform: translate(0, 0.6rem) scale(1);\n        &.lift {\n            transform: translate(0, 0) scale(1);\n        }\n    }\n\n    ", "\n\n    ", "\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var useState = React.useState,
    forwardRef = React.forwardRef,
    useImperativeHandle = React.useImperativeHandle,
    useEffect = React.useEffect,
    createRef = React.createRef;
var StyledInputWrapper = styled__default('div')(_templateObject(), system.th.color('borders.base'), system.variant({
  key: "".concat(__chunk_10.INPUT_KEY, ".sizes"),
  prop: 'size',
  "default": 'md',
  variants: __chunk_10.INPUT_THEME.sizes
}), system.space);
var StyledReversedInputContainer = styled__default('div')(_templateObject2());
var LabelPresent = styled.css(_templateObject3());
var StyledInput = styled__default('input')(_templateObject4(), function (_ref) {
  var _ref$hasLabel = _ref.hasLabel,
      hasLabel = _ref$hasLabel === void 0 ? false : _ref$hasLabel;
  return hasLabel ? LabelPresent : null;
});
var StyledInputContainer = styled__default('div')(_templateObject5());

var eventTypeResolver = function eventTypeResolver(handler, event, type) {
  var inputValue = __chunk_9.get(event, 'target.value');

  switch (type) {
    case 'number':
      // Although counter-intuitive, to properly clear an input field with type number it must
      // be fed an empty string.
      handler(inputValue ? parseFloat(inputValue) : '', event);
      break;

    case 'text':
      // An empty inputValue would be null which React doesn't handle well.
      handler(inputValue || '', event);
      break;

    default:
      handler(inputValue || '', event);
      break;
  }
};

var Input = forwardRef(function (_a, ref) {
  var className = _a.className,
      inputProps = _a.inputProps,
      _a$onBlur = _a.onBlur,
      _onBlur = _a$onBlur === void 0 ? function () {
    return null;
  } : _a$onBlur,
      _a$onKeyDown = _a.onKeyDown,
      _onKeyDown = _a$onKeyDown === void 0 ? function () {
    return null;
  } : _a$onKeyDown,
      _a$onKeyUp = _a.onKeyUp,
      _onKeyUp = _a$onKeyUp === void 0 ? function () {
    return null;
  } : _a$onKeyUp,
      _a$onChange = _a.onChange,
      _onChange = _a$onChange === void 0 ? function () {
    return null;
  } : _a$onChange,
      _a$onFocus = _a.onFocus,
      _onFocus = _a$onFocus === void 0 ? function () {
    return null;
  } : _a$onFocus,
      _a$type = _a.type,
      type = _a$type === void 0 ? 'text' : _a$type,
      _a$filter = _a.filter,
      filter = _a$filter === void 0 ? function (val) {
    return val;
  } : _a$filter,
      placeholder = _a.placeholder,
      _a$name = _a.name,
      name = _a$name === void 0 ? 'input' : _a$name,
      label = _a.label,
      prefix = _a.prefix,
      suffix = _a.suffix,
      value = _a.value,
      size = _a.size,
      id = _a.id,
      ariaLabel = _a.ariaLabel,
      _a$autoComplete = _a.autoComplete,
      autoComplete = _a$autoComplete === void 0 ? 'on' : _a$autoComplete,
      _a$autoFocus = _a.autoFocus,
      autoFocus = _a$autoFocus === void 0 ? false : _a$autoFocus,
      props = __chunk_2.__rest(_a, ["className", "inputProps", "onBlur", "onKeyDown", "onKeyUp", "onChange", "onFocus", "type", "filter", "placeholder", "name", "label", "prefix", "suffix", "value", "size", "id", "ariaLabel", "autoComplete", "autoFocus"]);

  var inputRef = createRef();

  var _useState = useState(filter(value)),
      _useState2 = __chunk_1._slicedToArray(_useState, 2),
      inputValue = _useState2[0],
      setInputValue = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = __chunk_1._slicedToArray(_useState3, 2),
      focus = _useState4[0],
      setFocus = _useState4[1];

  useEffect(function () {
    setInputValue(filter(value));
  }, [value]);
  useImperativeHandle(ref, function () {
    return {
      update: function update(newValue) {
        setInputValue(filter(newValue));
      },
      blur: function blur() {
        return inputRef.current ? inputRef.current.blur() : null;
      }
    };
  });
  return React.createElement(StyledInputWrapper, Object.assign({
    size: size,
    onClick: function onClick() {
      var current = inputRef.current;

      if (current) {
        current.focus();
      }
    },
    className: classNames('anchor-input', className, {
      focus: focus
    })
  }, props), React.createElement(StyledInputContainer, null, prefix ? React.cloneElement(prefix, {
    className: 'input-prefix'
  }) : null, React.createElement(StyledReversedInputContainer, null, React.createElement(StyledInput, Object.assign({
    "aria-label": ariaLabel,
    ref: inputRef,
    id: id,
    hasLabel: !!label,
    name: name,
    autoComplete: autoComplete,
    autoFocus: autoFocus,
    onBlur: function onBlur(event) {
      eventTypeResolver(_onBlur, event, type);
      setFocus(false);
    },
    onChange: function onChange(event) {
      var currentValue = event.target.value;
      setInputValue(filter(currentValue));
      eventTypeResolver(_onChange, event, type);
    },
    onKeyDown: function onKeyDown(event) {
      _onKeyDown(event);
    },
    onKeyUp: function onKeyUp(event) {
      _onKeyUp(event);
    },
    onFocus: function onFocus(event) {
      eventTypeResolver(_onFocus, event, type);
      setFocus(true);
    },
    value: inputValue,
    type: type,
    placeholder: placeholder
  }, inputProps, props)), label && React.createElement(__chunk_6.Typography, {
    color: "text.label",
    scale: focus || inputValue && "".concat(inputValue).length ? 12 : 14,
    htmlFor: name,
    as: "label",
    className: classNames({
      lift: focus || inputValue && "".concat(inputValue).length
    })
  }, label)), suffix ? React.cloneElement(suffix, {
    className: 'input-suffix'
  }) : null));
});

function _templateObject2$1() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    position: relative;\n    display: inline-flex;\n    cursor: pointer;\n    font-family: base;\n    ", "\n\n    ", "\n\n    &:before {\n        display: block;\n        position: absolute;\n        box-sizing: border-box;\n        content: '';\n        top: 0;\n        left: 0;\n        z-index: 1;\n        border-radius: circular;\n        background-color: white;\n        border: base;\n\n        ", "\n    }\n\n    &:after {\n        position: absolute;\n        border-radius: circular;\n        ", "\n        content: '';\n        z-index: 2;\n    }\n"]);

  _templateObject2$1 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    visibility: hidden;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n"]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
var forwardRef$1 = React.forwardRef; // VENDOR
var HiddenInput = styled__default('input')(_templateObject$1());
var StyledLabel = styled__default('label')(_templateObject2$1(), function (_ref) {
  var size = _ref.size;
  return styled.css({
    width: size,
    height: size
  });
}, system.space, function (_ref2) {
  var size = _ref2.size;
  return styled.css({
    width: size,
    height: size
  });
}, function (_ref3) {
  var disabled$$1 = _ref3.disabled,
      checked = _ref3.checked,
      size = _ref3.size,
      fillSize = _ref3.fillSize,
      fillColor = _ref3.fillColor;
  return styled.css({
    width: fillSize,
    height: fillSize,
    top: "calc((".concat(size, " - ").concat(fillSize, ") / 2)"),
    left: "calc((".concat(size, " - ").concat(fillSize, ") / 2)"),
    backgroundColor: fillColor,
    visibility: !checked || disabled$$1 ? 'hidden' : undefined
  });
});
var Radio = forwardRef$1(function (_a, ref) {
  var id = _a.id,
      children = _a.children,
      className = _a.className,
      inputProps = _a.inputProps,
      _a$size = _a.size,
      size = _a$size === void 0 ? '1.375rem' : _a$size,
      _a$fillSize = _a.fillSize,
      fillSize = _a$fillSize === void 0 ? '0.75rem' : _a$fillSize,
      _a$fillColor = _a.fillColor,
      fillColor = _a$fillColor === void 0 ? '#794a83' : _a$fillColor,
      props = __chunk_2.__rest(_a, ["id", "children", "className", "inputProps", "size", "fillSize", "fillColor"]);

  return React.createElement(StyledLabel, Object.assign({
    className: classNames('anchor-radio', className),
    size: size,
    fillSize: fillSize,
    fillColor: fillColor
  }, props), React.createElement(HiddenInput, Object.assign({
    ref: ref,
    type: "radio",
    id: id
  }, props, inputProps)));
});

function _templateObject6() {
  var data = __chunk_1._taggedTemplateLiteral(["\n                transform: translate(\n                    ", ",\n                    -50%\n                );\n                background-color: ", ";\n            "]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$1() {
  var data = __chunk_1._taggedTemplateLiteral(["\n            width: ", ";\n            height: ", ";\n        "]);

  _templateObject5$1 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$1() {
  var data = __chunk_1._taggedTemplateLiteral(["\n                height: ", ";\n                width: ", ";\n                background-color: ", ";\n                opacity: ", ";\n            "]);

  _templateObject4$1 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$1() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    position: relative;\n    ", ";\n\n    margin-bottom: 0.25rem;\n    display: flex;\n\n    // Styles the track the knob slides on\n    &:before {\n        position: absolute;\n        top: 50%;\n        content: '';\n\n        border-radius: circular;\n        background-color: ", ";\n        transform: translate(0, -50%);\n        transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n            opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n        ", "\n    }\n\n    // Styles the knob of the toggle\n    &:after {\n        display: block;\n        position: absolute;\n        box-sizing: border-box;\n        content: '';\n        transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n            background-color 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n        top: 50%;\n        ", "\n        border-radius: circular;\n        transform: translate(0, -50%);\n\n        ", "\n    }\n"]);

  _templateObject3$1 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    display: inline-flex;\n    flex-direction: column;\n\n    ", "\n\n    // Styles for the ON/OFF\n    font-family: base;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    font-weight: 500;\n    text-align: center;\n    ", "\n    user-select: none;\n"]);

  _templateObject2$2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    visibility: hidden;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n"]);

  _templateObject$2 = function _templateObject() {
    return data;
  };

  return data;
}
var forwardRef$2 = React.forwardRef; // VENDOR

var OFF_TRACK_COLOR = '#D3D3D3';
var OFF_KNOB_COLOR = '#808080';
var HiddenInput$1 = styled__default('input')(_templateObject$2());
var StyledToggle = styled__default('label')(_templateObject2$2(), system.space, function (_ref) {
  var disabled$$1 = _ref.disabled;
  return styled.css({
    color: disabled$$1 ? 'text.disabled' : 'text.light',
    cursor: disabled$$1 ? 'not-allowed' : 'pointer'
  });
});
var Switch = styled__default('span')(_templateObject3$1(), function (_ref2) {
  var height = _ref2.height,
      trackWidth = _ref2.trackWidth;
  return styled.css({
    height: height,
    width: trackWidth
  });
}, OFF_TRACK_COLOR, function (_ref3) {
  var checked = _ref3.checked,
      disabled$$1 = _ref3.disabled,
      trackWidth = _ref3.trackWidth,
      toggleColor = _ref3.toggleColor,
      trackHeight = _ref3.trackHeight;
  return styled.css(_templateObject4$1(), trackHeight, trackWidth, checked && !disabled$$1 ? toggleColor : OFF_TRACK_COLOR, checked && !disabled$$1 ? 0.5 : undefined);
}, function (_ref4) {
  var knobSize = _ref4.knobSize;
  return styled.css(_templateObject5$1(), knobSize, knobSize);
}, function (_ref5) {
  var checked = _ref5.checked,
      disabled$$1 = _ref5.disabled,
      knobSize = _ref5.knobSize,
      trackWidth = _ref5.trackWidth,
      toggleColor = _ref5.toggleColor;
  return styled.css(_templateObject6(), checked ? "calc(".concat(trackWidth, " - ").concat(knobSize, ")") : 0, checked && !disabled$$1 ? toggleColor : OFF_KNOB_COLOR);
});
var Toggle = forwardRef$2(function (_a, ref) {
  var id = _a.id,
      className = _a.className,
      inputProps = _a.inputProps,
      checked = _a.checked,
      _a$showText = _a.showText,
      showText = _a$showText === void 0 ? true : _a$showText,
      _a$height = _a.height,
      height = _a$height === void 0 ? '1.375rem' : _a$height,
      _a$toggleColor = _a.toggleColor,
      toggleColor = _a$toggleColor === void 0 ? '#784c82' : _a$toggleColor,
      _a$knobSize = _a.knobSize,
      knobSize = _a$knobSize === void 0 ? '1.125rem' : _a$knobSize,
      _a$trackHeight = _a.trackHeight,
      trackHeight = _a$trackHeight === void 0 ? '0.75rem' : _a$trackHeight,
      _a$trackWidth = _a.trackWidth,
      trackWidth = _a$trackWidth === void 0 ? '2rem' : _a$trackWidth,
      disabled$$1 = _a.disabled,
      onChange = _a.onChange,
      props = __chunk_2.__rest(_a, ["id", "className", "inputProps", "checked", "showText", "height", "toggleColor", "knobSize", "trackHeight", "trackWidth", "disabled", "onChange"]);

  return React.createElement(StyledToggle, Object.assign({
    className: classNames('anchor-toggle', className),
    disabled: disabled$$1,
    htmlFor: id,
    height: height,
    trackWidth: trackWidth,
    trackHeight: trackHeight
  }, props), React.createElement(Switch, {
    knobSize: knobSize,
    height: height,
    toggleColor: toggleColor,
    trackHeight: trackHeight,
    trackWidth: trackWidth,
    checked: checked,
    disabled: disabled$$1
  }), React.createElement(HiddenInput$1, Object.assign({
    type: "checkbox",
    id: id,
    onChange: onChange,
    checked: checked,
    disabled: disabled$$1,
    ref: ref
  }, props, inputProps)), showText && (checked ? 'ON' : 'OFF'));
});

function _templateObject2$3() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    box-sizing: border-box;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    user-select: none;\n    // todo: don't hardcode\n    border: thin solid #808080;\n    // todo: may want to read from a theme value here\n    border-radius: 2px;\n\n    ", ";\n\n    ", ";\n"]);

  _templateObject2$3 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$3() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    visibility: hidden;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n"]);

  _templateObject$3 = function _templateObject() {
    return data;
  };

  return data;
}
var forwardRef$3 = React.forwardRef; // VENDOR
var HiddenInput$2 = styled__default('input')(_templateObject$3());
var StyledCheckbox = styled__default('label')(_templateObject2$3(), function (_ref) {
  var size = _ref.size,
      disabled$$1 = _ref.disabled;
  return styled.css({
    height: size,
    width: size,
    cursor: disabled$$1 ? 'default' : 'pointer',
    opacity: disabled$$1 ? 0.4 : 1
  });
}, system.compose(system.space, system.color, system.backgroundColor));
var Checkbox = forwardRef$3(function (_a, ref) {
  var id = _a.id,
      className = _a.className,
      inputProps = _a.inputProps,
      _a$color = _a.color,
      color = _a$color === void 0 ? 'primary.base' : _a$color,
      backgroundColor = _a.backgroundColor,
      checked = _a.checked,
      _a$size = _a.size,
      size = _a$size === void 0 ? '1.375rem' : _a$size,
      disabled$$1 = _a.disabled,
      onChange = _a.onChange,
      props = __chunk_2.__rest(_a, ["id", "className", "inputProps", "color", "backgroundColor", "checked", "size", "disabled", "onChange"]);

  return React.createElement(StyledCheckbox, Object.assign({
    className: classNames('anchor-checkbox', className),
    disabled: disabled$$1,
    htmlFor: id,
    color: color,
    backgroundColor: backgroundColor || (disabled$$1 ? 'background.base' : 'white'),
    size: size,
    checked: checked
  }, props), checked && React.createElement(check.Check, {
    scale: "sm"
  }), React.createElement(HiddenInput$2, Object.assign({
    type: "checkbox",
    id: id,
    onChange: onChange,
    checked: checked,
    disabled: disabled$$1,
    ref: ref
  }, props, inputProps)));
});

function _templateObject$4() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    position: relative;\n    display: inline-flex;\n    ", "\n    ", "\n"]);

  _templateObject$4 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledLabel$1 = styled__default(__chunk_6.Typography)(_templateObject$4(), system.space, function (_ref) {
  var labelPlacement = _ref.labelPlacement,
      disabled$$1 = _ref.disabled;
  return styled.css({
    flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse',
    cursor: disabled$$1 ? 'not-allowed' : 'pointer'
  });
});
var ControlLabel = function ControlLabel(_a) {
  var id = _a.id,
      label = _a.label,
      className = _a.className,
      _a$labelPlacement = _a.labelPlacement,
      labelPlacement = _a$labelPlacement === void 0 ? 'right' : _a$labelPlacement,
      _a$labelSpacing = _a.labelSpacing,
      labelSpacing = _a$labelSpacing === void 0 ? '0.5rem' : _a$labelSpacing,
      _a$marginBottom = _a.marginBottom,
      marginBottom = _a$marginBottom === void 0 ? '1rem' : _a$marginBottom,
      _a$lineHeight = _a.lineHeight,
      lineHeight = _a$lineHeight === void 0 ? 1.375 : _a$lineHeight,
      value = _a.value,
      disabled$$1 = _a.disabled,
      control = _a.control,
      name = _a.name,
      props = __chunk_2.__rest(_a, ["id", "label", "className", "labelPlacement", "labelSpacing", "marginBottom", "lineHeight", "value", "disabled", "control", "name"]);

  return React.createElement(StyledLabel$1, Object.assign({
    className: classNames('anchor-control-label', className),
    as: "label",
    htmlFor: id,
    color: disabled$$1 ? 'text.disabled' : undefined,
    value: value,
    label: label,
    disabled: disabled$$1,
    control: control,
    name: name,
    labelPlacement: labelPlacement,
    marginBottom: marginBottom,
    lineHeight: lineHeight
  }, props), control && __chunk_8.cloneWithProps(control, {
    value: value,
    disabled: disabled$$1,
    name: name,
    marginLeft: labelPlacement === 'left' ? labelSpacing : undefined,
    marginRight: labelPlacement === 'right' ? labelSpacing : undefined
  }), label);
};

exports.Input = Input;
exports.Radio = Radio;
exports.Toggle = Toggle;
exports.Checkbox = Checkbox;
exports.ControlLabel = ControlLabel;
//# sourceMappingURL=form.js.map