import 'react';
import '@emotion/core';
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-d84df351.js';
import { u as useCustomCss } from './utilities-357c56e6.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 = __rest(_a, ["label", "description", "wrapperProps", "className", "customCss", "icon", "links"]);
    var resolvedCss = useCustomCss(customCss);
    var id = useId(props.id);
    var descriptionId = "desc-" + id;
    return (jsxs(Card, __assign({ role: "region", "aria-labelledby": "label-" + id, id: id, css: resolvedCss }, props, { children: [label && (jsxs(Label, __assign({ id: "label-" + id }, { children: [icon && jsx(IconHolder, { children: icon }, void 0), label] }), void 0)),
            description && (jsx(Description, __assign({ id: descriptionId }, { children: description }), void 0)),
            jsx("ul", { children: links.map(function (link, index) { return (jsx("li", { children: jsx("a", __assign({ href: link.href }, { children: link.value }), void 0) }, id + "-" + index)); }) }, void 0)] }), void 0));
};
var IconHolder = styled('div')(templateObject_1 || (templateObject_1 = __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 = styled('div')(templateObject_2 || (templateObject_2 = __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 = styled('h2')(templateObject_3 || (templateObject_3 = __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 = styled('div')(templateObject_4 || (templateObject_4 = __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;

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