import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
import { keyframes, jsx } from '@emotion/core';
import { Fragment } from 'react';
import _pt from 'prop-types';
import { MdError } from 'react-icons/md';

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n    to {\n      transform: translateY(-0.1em) scale(1) \n    }\n  "]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    50% {\n      opacity: .5;\n    }\n    to {\n      opacity: 1;\n    }\n  "]);

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

  return data;
}

var auxillaryTextCss = function auxillaryTextCss(theme) {
  return {
    color: theme.colors.grey[50],
    fontSize: theme.fontSizes[0],
    lineHeight: theme.lineHeights.dense,
    position: "relative",
    zIndex: 0
  };
};

var errorEntry = keyframes(_templateObject());
var errorIconEntry = keyframes(_templateObject2());

var errorIconCss = function errorIconCss(theme) {
  return {
    animation: "".concat(errorIconEntry, " .25s ease-out forwards"),
    height: "1em",
    marginRight: theme.space[1],
    transform: "translateY(-0.1em) scale(0)",
    verticalAlign: "middle",
    width: "1em"
  };
};

function FormError(_ref) {
  var children = _ref.children,
      rest = _objectWithoutProperties(_ref, ["children"]);

  var baseCss = function baseCss(theme) {
    return [auxillaryTextCss(theme), {
      animation: "".concat(errorEntry, " .25s ease forwards"),
      color: theme.colors.red[70],
      opacity: 0
    }, {
      marginTop: theme.space[2]
    }];
  };

  return jsx("div", _extends({}, rest, {
    css: baseCss
  }), jsx(MdError, {
    css: errorIconCss
  }), children);
}
function FormHint(props) {
  var baseCss = function baseCss(theme) {
    return [auxillaryTextCss(theme), {
      marginTop: theme.space[2]
    }];
  };

  return jsx("div", _extends({}, props, {
    css: baseCss
  }));
}

var labelBaseCss = function labelBaseCss(theme) {
  return {
    color: theme.colors.grey[90],
    lineHeight: theme.lineHeights.dense,
    alignSelf: "baseline",
    wordWrap: "break-word",
    overflowWrap: "break-word",
    hyphens: "auto"
  };
};

var labelRequiredFlagCss = function labelRequiredFlagCss(theme) {
  return {
    color: theme.colors.grey[50],
    fontSize: theme.fontSizes[0],
    marginLeft: theme.space[1]
  };
};

var labelSizeStyles = {
  L: function L(theme) {
    return {
      fontSize: theme.fontSizes[2]
    };
  },
  M: function M(theme) {
    return {
      fontSize: theme.fontSizes[1]
    };
  },
  S: function S(theme) {
    return {
      fontSize: theme.fontSizes[0]
    };
  }
};

function getStyledFieldLabel(label) {
  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
      _ref2$labelSize = _ref2.labelSize,
      labelSize = _ref2$labelSize === void 0 ? "M" : _ref2$labelSize,
      required = _ref2.required;

  var finalLabel = required ? jsx(Fragment, null, label, " ", jsx("span", {
    css: labelRequiredFlagCss
  }, "(required)")) : label;

  var labelCss = function labelCss(theme) {
    return [labelBaseCss(theme), labelSizeStyles[labelSize](theme), {
      marginBottom: theme.space[2]
    }];
  };

  return {
    finalLabel: finalLabel,
    labelCss: labelCss
  };
}

function StyledLabel(_ref3) {
  var children = _ref3.children,
      required = _ref3.required,
      labelSize = _ref3.labelSize,
      rest = _objectWithoutProperties(_ref3, ["children", "required", "labelSize"]);

  if (!children) {
    return null;
  }

  var _getStyledFieldLabel = getStyledFieldLabel(children, {
    required: required,
    labelSize: labelSize
  }),
      finalLabel = _getStyledFieldLabel.finalLabel,
      labelCss = _getStyledFieldLabel.labelCss;

  return jsx("label", _extends({}, rest, {
    css: labelCss
  }), finalLabel);
}
StyledLabel.propTypes = {
  labelSize: _pt.oneOf(["L", "M", "S"]),
  required: _pt.bool
};
function FormLegend(_ref4) {
  var children = _ref4.children,
      required = _ref4.required,
      labelSize = _ref4.labelSize,
      rest = _objectWithoutProperties(_ref4, ["children", "required", "labelSize"]);

  if (!children) {
    return null;
  }

  var _getStyledFieldLabel2 = getStyledFieldLabel(children, {
    required: required,
    labelSize: labelSize
  }),
      finalLabel = _getStyledFieldLabel2.finalLabel,
      labelCss = _getStyledFieldLabel2.labelCss;

  var finalLabelCss = function finalLabelCss(theme) {
    return [labelCss(theme), {
      display: "block",
      padding: 0
    }];
  };

  return jsx("legend", _extends({}, rest, {
    css: finalLabelCss
  }), finalLabel);
}
FormLegend.propTypes = {
  labelSize: _pt.oneOf(["L", "M", "S"]),
  required: _pt.bool
};
function FormFieldset(props) {
  return jsx("fieldset", _extends({}, props, {
    // CSS reset for <fieldset> based on https://thatemil.com/blog/2015/01/03/reset-your-fieldset/
    css: {
      border: 0,
      margin: 0,
      padding: "0.01em 0 0 0",
      minWidth: 0
    }
  }));
}

var horizontalOptionsCss = function horizontalOptionsCss(theme) {
  return {
    display: "flex",
    flexWrap: "wrap",
    paddingTop: theme.space[3]
  };
};

var verticalOptionsCss = function verticalOptionsCss(theme) {
  return [{
    paddingTop: theme.space[3],
    paddingBottom: theme.space[3]
  }];
};

function OptionsContainer(_ref5) {
  var _ref5$optionsDirectio = _ref5.optionsDirection,
      optionsDirection = _ref5$optionsDirectio === void 0 ? "column" : _ref5$optionsDirectio,
      rest = _objectWithoutProperties(_ref5, ["optionsDirection"]);

  var baseCss = function baseCss(theme) {
    return [optionsDirection === "row" ? horizontalOptionsCss(theme) : verticalOptionsCss(theme)];
  };

  return jsx("div", _extends({
    css: baseCss
  }, rest));
}
FormError.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "FormError"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/styled-primitives/StyledFormElements.tsx"] = {
    name: "FormError",
    docgenInfo: FormError.__docgenInfo,
    path: "src/components/form/components/styled-primitives/StyledFormElements.tsx"
  };
}

FormHint.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "FormHint"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/styled-primitives/StyledFormElements.tsx"] = {
    name: "FormHint",
    docgenInfo: FormHint.__docgenInfo,
    path: "src/components/form/components/styled-primitives/StyledFormElements.tsx"
  };
}

StyledLabel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StyledLabel",
  "props": {
    "labelSize": {
      "required": false,
      "tsType": {
        "name": "union",
        "raw": "\"L\" | \"M\" | \"S\"",
        "elements": [{
          "name": "literal",
          "value": "\"L\""
        }, {
          "name": "literal",
          "value": "\"M\""
        }, {
          "name": "literal",
          "value": "\"S\""
        }]
      },
      "description": ""
    },
    "required": {
      "required": false,
      "tsType": {
        "name": "boolean"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/styled-primitives/StyledFormElements.tsx"] = {
    name: "StyledLabel",
    docgenInfo: StyledLabel.__docgenInfo,
    path: "src/components/form/components/styled-primitives/StyledFormElements.tsx"
  };
}

FormLegend.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "FormLegend",
  "props": {
    "labelSize": {
      "required": false,
      "tsType": {
        "name": "union",
        "raw": "\"L\" | \"M\" | \"S\"",
        "elements": [{
          "name": "literal",
          "value": "\"L\""
        }, {
          "name": "literal",
          "value": "\"M\""
        }, {
          "name": "literal",
          "value": "\"S\""
        }]
      },
      "description": ""
    },
    "required": {
      "required": false,
      "tsType": {
        "name": "boolean"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/styled-primitives/StyledFormElements.tsx"] = {
    name: "FormLegend",
    docgenInfo: FormLegend.__docgenInfo,
    path: "src/components/form/components/styled-primitives/StyledFormElements.tsx"
  };
}

FormFieldset.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "FormFieldset"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/styled-primitives/StyledFormElements.tsx"] = {
    name: "FormFieldset",
    docgenInfo: FormFieldset.__docgenInfo,
    path: "src/components/form/components/styled-primitives/StyledFormElements.tsx"
  };
}

OptionsContainer.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "OptionsContainer",
  "props": {
    "optionsDirection": {
      "defaultValue": {
        "value": "`column`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "FormGroupOptionsDirection"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/styled-primitives/StyledFormElements.tsx"] = {
    name: "OptionsContainer",
    docgenInfo: OptionsContainer.__docgenInfo,
    path: "src/components/form/components/styled-primitives/StyledFormElements.tsx"
  };
}

export { FormError, FormFieldset, FormHint, FormLegend, OptionsContainer, StyledLabel };
//# sourceMappingURL=StyledFormElements.esm.js.map
