@elliemae/ds-form 2.3.0-alpha.9 → 2.3.0-next.3

package/cjs/FloatingLabelInput/DSFloatingLabelInput.js

@@ -0,0 +1,137 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var FloatingLabelInputImpl = require('./FloatingLabelInputImpl.js');
+var DSLabel = require('../FormItem/Label/DSLabel.js');
+var DSTextBox = require('../TextBox/DSTextBox.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const noop = () => {};
+
+const DSFloatingLabelInput = _ref => {
+  let {
+    containerProps = {},
+    arialLabel = '',
+
+    /**
+     * Gets the reference for the input controller
+     *
+     * @param {HTMLElement} node
+     */
+    innerRef = noop,
+
+    /**
+     * Custom className for floatingLabelInput
+     */
+    className = '',
+
+    /**
+     * Props injected to the input component
+     *
+     * @type Object
+     */
+    extraInputProps = {},
+
+    /**
+     * Input controller
+     *
+     * @type {element}
+     */
+    inputComponent = DSTextBox["default"],
+
+    /**
+     * Input value
+     *
+     * @type {string}
+     */
+    value = '',
+
+    /**
+     * Label component
+     *
+     * @type {element}
+     */
+    labelComponent = DSLabel,
+
+    /**
+     * Label text
+     *
+     * @type {string | element}
+     */
+    labelText = null,
+
+    /**
+     * Callback when input controller has changed
+     *
+     * @param event
+     */
+    onChange = noop,
+    onBlur = noop,
+    onFocus = noop,
+
+    /**
+     * Whether the label is floating or not
+     *
+     * @type {boolean}
+     */
+    isOpen = false,
+
+    /**
+     * Whether ...
+     *
+     * @type {boolean}
+     */
+    hasError = false,
+
+    /**
+     * Whether ...
+     *
+     * @type {boolean}
+     */
+    readOnly = false,
+
+    /**
+     * Whether ...
+     *
+     * @type {boolean}
+     */
+    disabled = false,
+
+    /**
+     * Whether ...
+     *
+     * @type {boolean}
+     */
+    required = false,
+    optional = false,
+    mask = null,
+    useSubfix = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](FloatingLabelInputImpl, {
+    arialLabel: arialLabel,
+    className: className,
+    disabled: disabled,
+    extraInputProps: extraInputProps,
+    hasError: hasError,
+    innerRef: innerRef,
+    inputComponent: inputComponent,
+    isOpen: isOpen,
+    labelComponent: labelComponent,
+    labelText: labelText,
+    mask: mask,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    optional: optional,
+    readOnly: readOnly,
+    required: required,
+    useSubfix: useSubfix,
+    value: value
+  });
+};
+
+module.exports = DSFloatingLabelInput;

package/cjs/FloatingLabelInput/FloatingLabelInputImpl.js

@@ -0,0 +1,201 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsUtilities = require('@elliemae/ds-utilities');
+var DSTextWrapper = require('@elliemae/ds-text-wrapper');
+var resizeObserver = require('resize-observer');
+var getSvgPath = require('./getSvgPath.js');
+var RequiredMark = require('../RequiredMark/RequiredMark.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSTextWrapper__default = /*#__PURE__*/_interopDefaultLegacy(DSTextWrapper);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = 'labeled-outline';
+const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return {
+    'has-value': isOpen
+  };
+});
+const FloatingLabel = dsClassnames.aggregatedClasses('label')(blockName, 'label');
+const OutlineIdle = dsClassnames.aggregatedClasses('div')(blockName, 'idle');
+const Outline = dsClassnames.aggregatedClasses('div')(blockName, 'outline');
+const OutlinePath = dsClassnames.aggregatedClasses('path')(blockName, 'outline__path');
+
+const shouldUpdateSvgPath = (_ref2, prevSizes) => {
+  let {
+    width,
+    height,
+    labelWidth
+  } = _ref2;
+  if (width !== prevSizes.width) return true;
+  if (height !== prevSizes.height) return true;
+  return labelWidth !== prevSizes.labelWidth;
+};
+
+class FloatingLabelInputImpl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.resizeObserver = new resizeObserver.ResizeObserver(() => this.updatePath());
+    this.prevSizes = {};
+    this.wrapperRef = /*#__PURE__*/React__default["default"].createRef();
+    this.outlinePathRef = /*#__PURE__*/React__default["default"].createRef();
+    this.outlineIdleRef = /*#__PURE__*/React__default["default"].createRef();
+    this.labelRef = /*#__PURE__*/React__default["default"].createRef();
+    this.updatePath = this.updatePath.bind(this);
+  }
+
+  componentDidMount() {
+    this.resizeObserver.observe(this.wrapperRef.current);
+  }
+
+  componentDidUpdate() {
+    if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;
+    this.updatePath();
+  }
+
+  componentWillUnmount() {
+    this.resizeObserver.unobserve(this.wrapperRef.current);
+  }
+
+  get sizes() {
+    const {
+      current: labelEl
+    } = this.labelRef;
+    const {
+      current: wrapperEl
+    } = this.wrapperRef;
+    const {
+      current: outlineIdleEl
+    } = this.outlineIdleRef;
+    const elStyles = window.getComputedStyle(outlineIdleEl);
+    const leftRadius = elStyles.getPropertyValue('border-top-left-radius');
+    const rightRadius = elStyles.getPropertyValue('border-top-right-radius');
+    const hasLeftRadius = parseFloat(leftRadius) !== 0;
+    const hasRightRadius = parseFloat(rightRadius) !== 0;
+    return {
+      labelWidth: labelEl.offsetWidth * 0.9,
+      width: wrapperEl.offsetWidth,
+      height: wrapperEl.offsetHeight,
+      radiusStyle: leftRadius,
+      hasLeftRadius,
+      hasRightRadius
+    };
+  }
+
+  get isOpened() {
+    const {
+      focused,
+      isOpen,
+      value
+    } = this.props;
+    return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;
+  }
+
+  getValue(value) {
+    const {
+      valueAccessor
+    } = this.props;
+    if (valueAccessor) return valueAccessor(value); // is an event
+
+    if (value && value.target) return value.target.value;
+    return value;
+  }
+
+  updatePath() {
+    const path = getSvgPath(this.sizes);
+    this.prevSizes = this.sizes;
+    this.outlinePathRef.current.setAttribute('d', path);
+  }
+
+  render() {
+    const {
+      ariaLabel,
+      hasError,
+      readOnly,
+      disabled,
+      inputComponent,
+      labelText,
+      onBlur,
+      onFocus,
+      innerRef,
+      extraInputProps,
+      required,
+      value,
+      onChange,
+      mask,
+      useSubfix,
+      optional
+    } = this.props;
+
+    const inputProps = _objectSpread({
+      ariaLabel,
+      className: 'floating-label-input-controller',
+      disabled,
+      hasError,
+      onBlur,
+      onChange,
+      onFocus,
+      readOnly,
+      value,
+      innerRef,
+      mask,
+      useSubfix
+    }, extraInputProps);
+
+    const InputComponent = dsUtilities.getComponentFromProps(inputComponent, inputProps);
+    const isOpen = this.isOpened;
+    return /*#__PURE__*/_jsx__default["default"](Wrapper, {
+      classProps: {
+        hasError,
+        isOpen,
+        readOnly,
+        disabled
+      },
+      innerRef: this.wrapperRef,
+      onBlur: () => null,
+      onFocus: () => null,
+      onMouseOut: this.handleMouseOut,
+      onMouseOver: this.handleMouseOver
+    }, void 0, InputComponent, /*#__PURE__*/_jsx__default["default"](FloatingLabel, {
+      classProps: {
+        isOpen
+      },
+      innerRef: this.labelRef
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSTextWrapper__default["default"], {
+      maxWidth: "100%",
+      text: labelText
+    }), /*#__PURE__*/_jsx__default["default"](RequiredMark, {
+      optional: optional,
+      required: required
+    })), /*#__PURE__*/_jsx__default["default"](Outline, {}, void 0, /*#__PURE__*/_jsx__default["default"]("svg", {}, void 0, /*#__PURE__*/_jsx__default["default"](OutlinePath, {
+      innerRef: this.outlinePathRef
+    }))), /*#__PURE__*/_jsx__default["default"](OutlineIdle, {
+      innerRef: this.outlineIdleRef
+    }));
+  }
+
+}
+
+FloatingLabelInputImpl.defaultProps = {
+  onChange: () => null
+};
+
+module.exports = FloatingLabelInputImpl;

package/cjs/FloatingLabelInput/getSvgPath.js

@@ -0,0 +1,49 @@
+'use strict';
+
+/* eslint-disable prefer-template,max-statements,no-nested-ternary */
+function getSvgPath(_ref) {
+  let {
+    labelWidth = 50,
+    width = 200,
+    height = 35,
+    radiusStyle,
+    hasRightRadius = true,
+    hasLeftRadius = true
+  } = _ref;
+  const notchWidth = labelWidth;
+  const radius = parseFloat(radiusStyle);
+  const cornerWidth = radius + 1.3;
+  const leadingStrokeLength = 4;
+  const paddedNotchWidth = notchWidth + 8;
+  let extraSizeForH = 0;
+  let extraSizeForLeftV = 0;
+  let extraSizeForRightV = 0;
+  let extraSizeForTopH = radius;
+
+  if (!hasRightRadius) {
+    extraSizeForH += radius;
+    extraSizeForRightV = radius * 2;
+  }
+
+  if (!hasLeftRadius) {
+    extraSizeForH += radius;
+    extraSizeForLeftV = radius * 2;
+  }
+
+  if (!hasLeftRadius && hasRightRadius || hasRightRadius && hasLeftRadius) {
+    extraSizeForTopH = 0;
+  }
+
+  const pathMiddle = '' + (hasRightRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius : '') + 'v' + (height - (2 * cornerWidth - (extraSizeForRightV + 1.5))) + ( // right vertical line
+  hasRightRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius : '') + 'h' + (-width + 2 * cornerWidth - extraSizeForH) + (hasLeftRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius : '') + 'v' + (-height + (2 * cornerWidth - (extraSizeForLeftV + 1.5))) + ( // left vertical line
+  hasLeftRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius : '');
+  let path;
+
+  {
+    path = '' + 'M' + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + ',' + 0.5 + 'h' + (width - 2 * cornerWidth - paddedNotchWidth - leadingStrokeLength + extraSizeForTopH) + pathMiddle + 'h' + leadingStrokeLength;
+  }
+
+  return path;
+}
+
+module.exports = getSvgPath;

package/cjs/FloatingLabelInput/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var DSFloatingLabelInput = require('./DSFloatingLabelInput.js');
+
+
+
+module.exports = DSFloatingLabelInput;

package/cjs/FormItem/DSFormItemLayout.js

@@ -0,0 +1,210 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var reactDesc = require('react-desc');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsUtilities = require('@elliemae/ds-utilities');
+var Group = require('@elliemae/ds-shared/GroupContext/Group');
+var DSInputGroup = require('../InputGroup/DSInputGroup.js');
+var DSFloatingLabelInput = require('../FloatingLabelInput/DSFloatingLabelInput.js');
+var DSError = require('./Error/DSError.js');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.js');
+var variants = require('./variants.js');
+var Suffix = require('./Suffix/Suffix.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var Group__default = /*#__PURE__*/_interopDefaultLegacy(Group);
+
+var _Group;
+
+const _excluded = ["leftLabel", "floatingLabel", "name", "id", "value", "inputComponent", "labelComponent", "feedbackComponent", "labelText", "truncateText", "hasError", "validationState", "validationMessage", "feedbackMessage", "readOnly", "focused", "type", "autoFocus", "disabled", "onChange", "onBlur", "onFocus", "onPaste", "onKeyUp", "extraInputProps", "extraContent", "leftAddon", "rightAddon", "required", "optional", "mask", "useSubfix", "suffix", "variant", "fitContent", "withHighlight", "containerProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = 'form-item';
+const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    leftLabel,
+    variant,
+    fitContent,
+    withHighlight
+  } = _ref;
+  return {
+    'with-left-label': leftLabel,
+    'fit-content': fitContent,
+    [variant]: variant,
+    'with-highlight': withHighlight
+  };
+});
+const WrapperContent = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-content"));
+const WrapperContentGroup = dsClassnames.aggregatedClasses('fieldset')("".concat(blockName, "-content"));
+
+const DSFormItemLayout = _ref2 => {
+  var _WrapperContentComp;
+
+  let {
+    leftLabel,
+    floatingLabel,
+    name,
+    id,
+    value,
+    inputComponent: InputComponent,
+    labelComponent: LabelComponent,
+    feedbackComponent: FeedbackComponent,
+    labelText,
+    truncateText,
+    hasError,
+    // orientation = 'vertical', // one of [ vertical, horizontal ]
+    validationState,
+    // one of [ success, error, warning ]
+    validationMessage,
+    feedbackMessage,
+    readOnly,
+    focused,
+    type,
+    autoFocus,
+    disabled,
+    onChange,
+    onBlur,
+    onFocus,
+    onPaste,
+    onKeyUp,
+    extraInputProps,
+    extraContent,
+    leftAddon,
+    rightAddon,
+    required,
+    optional,
+    mask,
+    useSubfix,
+    suffix,
+    variant,
+    fitContent,
+    withHighlight,
+    containerProps
+  } = _ref2,
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded);
+
+  const isGroup = InputComponent.type === (_Group || (_Group = /*#__PURE__*/_jsx__default["default"](Group__default["default"], {}))).type;
+
+  const floatingLabelOverride = floatingLabel === 'UNSAFE';
+  const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup; // group the input props to not duplicate it inside the specific inputComponent (floating or not)
+
+  const inputProps = _objectSpread(_objectSpread({}, extraInputProps), {}, {
+    disabled,
+    hasError: hasError || validationState === 'error',
+    id,
+    name,
+    type,
+    autoFocus,
+    onBlur,
+    onChange,
+    onFocus,
+    onPaste,
+    onKeyUp,
+    readOnly,
+    value,
+    mask,
+    useSubfix,
+    variant,
+    required
+  }, rest);
+
+  const renderInput = Input => leftAddon || rightAddon ? /*#__PURE__*/_jsx__default["default"](DSInputGroup["default"], {
+    leftAddon: leftAddon,
+    rightAddon: rightAddon,
+    variant: variant
+  }, void 0, Input) : Input;
+
+  const renderFloating = /*#__PURE__*/jsxRuntime.jsx(DSFloatingLabelInput, _objectSpread(_objectSpread({}, inputProps), {}, {
+    extraInputProps: extraInputProps,
+    focused: focused,
+    inputComponent: InputComponent,
+    labelComponent: LabelComponent,
+    labelText: labelText,
+    optional: optional,
+    required: required,
+    variant: variant
+  }));
+
+  const InputWithLabel = floatingLabelOverride ? renderInput(renderFloating) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/_jsx__default["default"](LabelComponent, {
+      htmlFor: id || name,
+      label: labelText,
+      optional: optional,
+      required: required,
+      isGroup: isGroup,
+      truncateText: truncateText
+    }), renderInput(dsUtilities.getComponentFromProps(InputComponent, inputProps))]
+  });
+
+  if (suffix) {
+    return /*#__PURE__*/jsxRuntime.jsx(Wrapper, _objectSpread(_objectSpread({
+      classProps: {
+        disabled,
+        readOnly,
+        hasError,
+        leftLabel,
+        variant,
+        fitContent,
+        withHighlight
+      }
+    }, containerProps), {}, {
+      children: /*#__PURE__*/_jsx__default["default"](Suffix.SuffixWrapper, {
+        className: "suffix-wrapper"
+      }, void 0, /*#__PURE__*/_jsx__default["default"](Suffix.SuffixInputWrapper, {
+        className: "suffix-input-wrapper"
+      }, void 0, _WrapperContentComp || (_WrapperContentComp = /*#__PURE__*/_jsx__default["default"](WrapperContentComp, {}, void 0, InputWithLabel, extraContent)), /*#__PURE__*/_jsx__default["default"](FeedbackComponent, {
+        hasError: hasError,
+        text: validationState || hasError ? validationMessage : feedbackMessage
+      })), /*#__PURE__*/_jsx__default["default"](Suffix.Suffix, {
+        className: "suffix-label",
+        label: !!labelText,
+        withFeedback: Boolean(validationMessage || feedbackMessage)
+      }, void 0, suffix))
+    }));
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread(_objectSpread({
+    classProps: {
+      disabled,
+      readOnly,
+      hasError,
+      leftLabel,
+      variant,
+      fitContent,
+      withHighlight
+    }
+  }, containerProps), {}, {
+    children: [/*#__PURE__*/_jsx__default["default"](WrapperContentComp, {}, void 0, InputWithLabel, extraContent), /*#__PURE__*/_jsx__default["default"](FeedbackComponent, {
+      hasError: hasError,
+      text: validationState || hasError ? validationMessage : feedbackMessage
+    })]
+  }));
+};
+
+DSFormItemLayout.defaultProps = defaultProps.defaultProps;
+const DSFormItemLayoutWithSchema = reactDesc.describe(DSFormItemLayout);
+DSFormItemLayoutWithSchema.propTypes = props.props;
+
+exports.DSError = DSError["default"];
+exports.FORMITEM_LAYOUT_VARIANTS = variants.FORMITEM_LAYOUT_VARIANTS;
+exports.DSFormItemLayoutWithSchema = DSFormItemLayoutWithSchema;
+exports["default"] = DSFormItemLayout;

package/cjs/FormItem/Error/DSError.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const DSError = _ref => {
+  let {
+    hasError = false,
+    errorText = 'Error'
+  } = _ref;
+  if (!hasError) return null;
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "em-ds-error"
+  }, void 0, errorText);
+};
+
+const props = {
+  /** error state */
+  hasError: reactDesc.PropTypes.bool.description('error state'),
+
+  /** error label text */
+  errorText: reactDesc.PropTypes.string.description('error label text')
+};
+const DSErrorWithSchema = reactDesc.describe(DSError);
+DSErrorWithSchema.propTypes = props;
+
+exports.DSErrorWithSchema = DSErrorWithSchema;
+exports["default"] = DSError;

package/cjs/FormItem/Feedback.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const blockName = 'form-item';
+const FeedbackSpan = dsClassnames.aggregatedClasses('span')(blockName, 'feedback');
+
+const Feedback = _ref => {
+  let {
+    text,
+    hasError
+  } = _ref;
+  if (!text) return null;
+  return /*#__PURE__*/_jsx__default["default"](FeedbackSpan, {
+    classProps: hasError
+  }, void 0, text);
+};
+
+module.exports = Feedback;