import React__default from 'react';
import '@emotion/core';
import { a as createCommonjsModule, g as getDefaultExportFromCjs } from './_commonjsHelpers-f108cd30.js';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-bfe8e225.js';
import { c as createIconComponent_1 } from './createIconComponent-a0408d76.js';

var downloadBox = createCommonjsModule(function (module, exports) {

  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports["default"] = void 0;

  var _createIconComponent = _interopRequireDefault(createIconComponent_1);

  var _react = _interopRequireDefault(React__default);

  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      "default": obj
    };
  }

  var IconDownloadBox = (0, _createIconComponent["default"])({
    content: _react["default"].createElement("g", null, _react["default"].createElement("path", {
      d: "M25.71 26.5a1.54 1.54 0 0 0 0 2.19l8.2 8.2a1.56 1.56 0 0 0 1.09.46 1.51 1.51 0 0 0 1.09-.46l8.2-8.2a1.55 1.55 0 1 0-2.19-2.19l-5.55 5.55V5.51a1.55 1.55 0 1 0-3.09 0v26.54L27.9 26.5a1.54 1.54 0 0 0-2.19 0zm0 0"
    }), _react["default"].createElement("path", {
      d: "M60.27 39.17L54.89 19.7a1.57 1.57 0 0 0-.85-1l-.15-.07a1.58 1.58 0 0 0-.64-.14h-9.7a1.55 1.55 0 0 0 0 3.09h8.66l4.55 16.47h-12a1.54 1.54 0 0 0-1.55 1.55V41a3.71 3.71 0 0 1-3.71 3.71H30A3.71 3.71 0 0 1 26.33 41v-1.4a1.54 1.54 0 0 0-1.55-1.55H13.23l4.57-16.5h8.66a1.55 1.55 0 0 0 0-3.09h-9.71a1.58 1.58 0 0 0-.64.14l-.15.07a1.53 1.53 0 0 0-.85 1L9.73 39.13a1.72 1.72 0 0 0-.06.41v8.12a11.17 11.17 0 0 0 11.15 11.16h28.36a11.17 11.17 0 0 0 11.15-11.16v-8.08a1.2 1.2 0 0 0-.06-.41zm-3 8.5a8.07 8.07 0 0 1-8.06 8.06H20.82a8.07 8.07 0 0 1-8.06-8.06v-6.52h10.5a6.81 6.81 0 0 0 6.8 6.64h9.44a6.81 6.81 0 0 0 6.8-6.64h11v6.52zm0 0"
    })),
    height: undefined,
    width: undefined
  });
  IconDownloadBox.displayName = 'IconDownloadBox';
  var _default = IconDownloadBox;
  exports["default"] = _default;
});
var IconDownloadBox = /*@__PURE__*/getDefaultExportFromCjs(downloadBox);

var DownloadChip = function (_a) {
    var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.description, description = _c === void 0 ? '' : _c, _d = _a.wrapperProps, _e = _a.className, _f = _a.valid, valid = _f === void 0 ? null : _f, _g = _a.errorMessage, _h = _a.downloading, downloading = _h === void 0 ? false : _h, props = __rest(_a, ["label", "description", "wrapperProps", "className", "valid", "errorMessage", "downloading"]);
    var id = useId(props.id);
    var descriptionId = "desc-" + id;
    return (jsxs(DownloadButton, __assign({ "aria-invalid": valid === false, "data-valid": valid, "aria-busy": downloading, id: id }, props, { children: [jsx(IconDownloadBox, { className: "download-icon", "aria-busy": downloading }, void 0),
            jsx(Label, { children: label }, void 0),
            jsx(Description, __assign({ id: descriptionId }, { children: description }), void 0)] }), void 0));
};
var iconCSS = "\n  padding: 5px;\n  border-radius: 50%;\n  float: left;\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  margin-right: 10px;\n  border-radius: 50%;\n  background-color: #BC80118D; \n  fill-opacity: 1;\n  @-webkit-keyframes spinZ\n  {  \n    0%   {-webkit-transform: rotateZ(0deg);}\n    100% {-webkit-transform: rotateZ(360deg);}\n  }\n  @keyframes spinZ\n  {  \n    0%   {transform: rotateZ(0deg);}  \n    100% {transform: rotateZ(360deg);}  \n  }\n  &[aria-busy=\"true\"] {\n    fill-opacity: 0;\n    background-color: #BC80118D;\n    background: transparent linear-gradient(180deg, #BC80118D 0%, #FFFFFFB3 50%, #BC80118D 100%) 0% 0% no-repeat padding-box;\n    -webkit-animation: spinZ 300ms infinite linear;\n    animation: spinZ 300ms infinite linear;\n  }\n";
var Description = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 0.85em;\n  font-weight: 600;\n  margin: 0px;\n  margin-bottom: 3px;\n  font-style: italic;\n"], ["\n  font-size: 0.85em;\n  font-weight: 600;\n  margin: 0px;\n  margin-bottom: 3px;\n  font-style: italic;\n"])));
var Label = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 3px 0 2px 0;\n  font-weight: 600;\n  font-size: 1em;\n  color: #191919;\n"], ["\n  margin: 3px 0 2px 0;\n  font-weight: 600;\n  font-size: 1em;\n  color: #191919;\n"])));
var DownloadButton = styled('button')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &[data-valid='true'] {\n    box-shadow: 0px 0px 0px 3px ", ";\n  }\n  &[data-valid='false'] {\n    box-shadow: 0px 0px 0px 3px ", ";\n  }\n  display: block;\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  font-size: 1em;\n  border: none;\n  background-color: #ba7c0a40;\n  height: 60px;\n  border-radius: 5px;\n  padding: 10px;\n  margin-bottom: 2px;\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 3px ", ";\n    outline: none;\n    background-color: #eba52462;\n    transform: scale(1.03);\n  }\n  &:hover:not(:active):not(:focus) {\n    background-color: #eba52462;\n    transform: scale(1.03);\n    box-shadow: 0 9px 12px -7px rgba(0, 0, 0, 0.35);\n  }\n  &[aria-busy='true'] {\n    background-color: #eba52462;\n    transform: scale(1.03);\n    box-shadow: 0 9px 12px -7px rgba(0, 0, 0, 0.35);\n    cursor: default;\n    label {\n      cursor: default;\n    }\n  }\n  .download-icon {\n    ", "\n  }\n"], ["\n  &[data-valid='true'] {\n    box-shadow: 0px 0px 0px 3px ", ";\n  }\n  &[data-valid='false'] {\n    box-shadow: 0px 0px 0px 3px ", ";\n  }\n  display: block;\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  font-size: 1em;\n  border: none;\n  background-color: #ba7c0a40;\n  height: 60px;\n  border-radius: 5px;\n  padding: 10px;\n  margin-bottom: 2px;\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 3px ", ";\n    outline: none;\n    background-color: #eba52462;\n    transform: scale(1.03);\n  }\n  &:hover:not(:active):not(:focus) {\n    background-color: #eba52462;\n    transform: scale(1.03);\n    box-shadow: 0 9px 12px -7px rgba(0, 0, 0, 0.35);\n  }\n  &[aria-busy='true'] {\n    background-color: #eba52462;\n    transform: scale(1.03);\n    box-shadow: 0 9px 12px -7px rgba(0, 0, 0, 0.35);\n    cursor: default;\n    label {\n      cursor: default;\n    }\n  }\n  .download-icon {\n    ", "\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
}, iconCSS);
var templateObject_1, templateObject_2, templateObject_3;

export { DownloadChip };
//# sourceMappingURL=DownloadChip.js.map
