'use strict';

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

require('react');
require('@emotion/core');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
require('@emotion/react');
var css = require('./css-203af057.js');
var autoId_esm = require('./auto-id.esm-f9c7d71b.js');
var utilities = require('./utilities-d51a0c2d.js');

var LinkCard = 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.customCss, customCss = _f === void 0 ? '' : _f, icon = _a.icon, _g = _a.links, links = _g === void 0 ? [] : _g, props = _tslib.__rest(_a, ["label", "description", "wrapperProps", "className", "customCss", "icon", "links"]);
    var resolvedCss = utilities.useCustomCss(customCss);
    var id = autoId_esm.useId(props.id);
    var descriptionId = "desc-" + id;
    return (jsxRuntime.jsxs(Card, _tslib.__assign({ role: "region", "aria-labelledby": "label-" + id, id: id, css: resolvedCss }, props, { children: [label && (jsxRuntime.jsxs(Label, _tslib.__assign({ id: "label-" + id }, { children: [icon && jsxRuntime.jsx(IconHolder, { children: icon }, void 0), label] }), void 0)),
            description && (jsxRuntime.jsx(Description, _tslib.__assign({ id: descriptionId }, { children: description }), void 0)),
            jsxRuntime.jsx("ul", { children: links.map(function (link, index) { return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("a", _tslib.__assign({ href: link.href }, { children: link.value }), void 0) }, id + "-" + index)); }) }, void 0)] }), void 0));
};
var IconHolder = css.styled('div')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  > svg,\n  img {\n    padding: 4px;\n    border-radius: 50%;\n    display: flex;\n    flex: 0 0 auto;\n    width: 1.575em;\n    height: 1.575em;\n    margin-right: 10px;\n    border-radius: 50%;\n    fill: #fff;\n    background-color: ", ";\n  }\n"], ["\n  > svg,\n  img {\n    padding: 4px;\n    border-radius: 50%;\n    display: flex;\n    flex: 0 0 auto;\n    width: 1.575em;\n    height: 1.575em;\n    margin-right: 10px;\n    border-radius: 50%;\n    fill: #fff;\n    background-color: ", ";\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
});
var Description = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  padding: 0 15px 10px 15px;\n  font-size: 0.85em;\n  font-weight: normal;\n  margin: 0px;\n  font-style: italic;\n"], ["\n  padding: 0 15px 10px 15px;\n  font-size: 0.85em;\n  font-weight: normal;\n  margin: 0px;\n  font-style: italic;\n"])));
var Label = css.styled('h2')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: 10px;\n  margin: 0 0 10px 0;\n  font-size: 1.2em;\n  font-weight: 600;\n  color: #191919;\n  background: #eeeeec;\n  display: flex;\n  flex-direction: row;\n  height: 53px;\n  align-items: center;\n"], ["\n  padding: 10px;\n  margin: 0 0 10px 0;\n  font-size: 1.2em;\n  font-weight: 600;\n  color: #191919;\n  background: #eeeeec;\n  display: flex;\n  flex-direction: row;\n  height: 53px;\n  align-items: center;\n"])));
var Card = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  width: 100%;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  ul {\n    margin-top: 0;\n    list-style: none;\n    padding-left: 15px;\n    li:first-of-type a {\n      padding-top: 0;\n    }\n  }\n  ul li a {\n    padding: 4px 0;\n    display: block;\n    text-decoration: none;\n    color: #333;\n    font-size: 0.9em;\n    line-height: 1em;\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  width: 100%;\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n  ul {\n    margin-top: 0;\n    list-style: none;\n    padding-left: 15px;\n    li:first-of-type a {\n      padding-top: 0;\n    }\n  }\n  ul li a {\n    padding: 4px 0;\n    display: block;\n    text-decoration: none;\n    color: #333;\n    font-size: 0.9em;\n    line-height: 1em;\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

exports.LinkCard = LinkCard;
//# sourceMappingURL=LinkCard.js.map
