@blateral/b.kit 2.3.0-beta.1.2 → 2.3.0-beta.1.3

package/esm/TableBlock-0bbde956.js

@@ -0,0 +1,218 @@
+import { a as __makeTemplateObject, _ as __assign } from './ClockFilled-8784ddac.js';
+import React__default, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { H as Heading, c as copyStyle, C as Copy } from './Copy-3444d005.js';
+import { s as spacings, g as getColors } from './styles-5f78e59d.js';
+import { u as useLibTheme } from './LibThemeProvider-90a5375f.js';
+import { L as Link } from './Link-ee8a48ed.js';
+
+var View$2 = styled.div.withConfig({
+  displayName: "Title__View",
+  componentId: "sc-1pyc768-0"
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    display: block;\n    text-align: ", ";\n    margin: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    display: block;\n    text-align: ", ";\n    margin: ", ";\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered ? 'center' : 'left';
+}, function (_a) {
+  var isCentered = _a.isCentered;
+  return isCentered && '0 auto';
+}, spacings.nudge * 2);
+var SuperTitle = styled(Heading).withConfig({
+  displayName: "Title__SuperTitle",
+  componentId: "sc-1pyc768-1"
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    display: block;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n"], ["\n    display: block;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n"])));
+var MainTitle = styled(Heading).withConfig({
+  displayName: "Title__MainTitle",
+  componentId: "sc-1pyc768-2"
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n    display: block;\n\n    ", "\n"], ["\n    display: block;\n\n    ", "\n"])), function (_a) {
+  var maxLines = _a.maxLines;
+  return maxLines && maxLines > 0 && css(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            display: -webkit-box;\n            -webkit-line-clamp: ", "; /* number of lines to show */\n            line-clamp: ", ";\n            -webkit-box-orient: vertical;\n        "], ["\n            overflow: hidden;\n            text-overflow: ellipsis;\n            display: -webkit-box;\n            -webkit-line-clamp: ", "; /* number of lines to show */\n            line-clamp: ", ";\n            -webkit-box-orient: vertical;\n        "])), maxLines, maxLines);
+});
+
+var Title = function (_a) {
+  var _b = _a.colorMode,
+      colorMode = _b === void 0 ? 'default' : _b,
+      superTitle = _a.superTitle,
+      superTitleAs = _a.superTitleAs,
+      title = _a.title,
+      titleAs = _a.titleAs,
+      _c = _a.titleSize,
+      titleSize = _c === void 0 ? 'heading-2' : _c,
+      maxLines = _a.maxLines,
+      _d = _a.isCentered,
+      isCentered = _d === void 0 ? false : _d,
+      titleHyphens = _a.titleHyphens,
+      className = _a.className;
+  var colors = useLibTheme().colors;
+  return React__default.createElement(View$2, {
+    isCentered: isCentered,
+    className: className
+  }, superTitle && React__default.createElement(SuperTitle, {
+    renderAs: superTitleAs || 'div',
+    size: "super",
+    textColor: colorMode === 'onImage' ? colors.text.inverted : undefined,
+    isInverted: colorMode === 'inverted',
+    innerHTML: superTitle
+  }), title && React__default.createElement(MainTitle, {
+    renderAs: titleAs || 'h2',
+    size: titleSize === 'heading-1' ? 'heading-1' : 'heading-2',
+    hyphens: titleHyphens,
+    textColor: colorMode === 'onImage' ? colors.text.inverted : undefined,
+    isInverted: colorMode === 'inverted',
+    innerHTML: title,
+    maxLines: maxLines
+  }));
+};
+var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1;
+
+var View$1 = styled(Link).withConfig({
+  displayName: "Tag__View",
+  componentId: "sc-1mw8uhi-0"
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    display: inline-block;\n    border: 1px solid\n        ", ";\n    border-radius: 8px;\n\n    padding: 1px ", "px;\n    max-height: 28px;\n    min-width: 60px;\n    user-select: none;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    text-align: center;\n\n    text-decoration: none;\n\n    ", "\n\n    background: none;\n\n    && {\n        background-color: ", ";\n        color: ", ";\n\n        transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;\n    }\n\n    cursor: ", ";\n\n    ", "\n\n    &:focus {\n        /* background-color: ", ";\n        color: ", "; */\n        outline: 2px solid\n            ", ";\n        outline-offset: -1px;\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        text-decoration: none;\n    }\n"], ["\n    display: inline-block;\n    border: 1px solid\n        ", ";\n    border-radius: 8px;\n\n    padding: 1px ", "px;\n    max-height: 28px;\n    min-width: 60px;\n    user-select: none;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    text-align: center;\n\n    text-decoration: none;\n\n    ", "\n\n    background: none;\n\n    && {\n        background-color: ", ";\n        color: ", ";\n\n        transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;\n    }\n\n    cursor: ", ";\n\n    ", "\n\n    &:focus {\n        /* background-color: ", ";\n        color: ", "; */\n        outline: 2px solid\n            ", ";\n        outline-offset: -1px;\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        text-decoration: none;\n    }\n"])), function (_a) {
+  var isInverted = _a.isInverted;
+  return isInverted ? '#dddddd' : '#444444';
+}, spacings.nudge, copyStyle('copy', 'small'), function (_a) {
+  var isActive = _a.isActive,
+      isInverted = _a.isInverted;
+  return isActive && (isInverted ? '#dddddd' : '#444444');
+}, function (_a) {
+  var isActive = _a.isActive,
+      isInverted = _a.isInverted;
+
+  if (isActive) {
+    return isInverted ? '#444444' : '#ffff';
+  } else {
+    return isInverted ? '#dddddd' : '#444444';
+  }
+}, function (_a) {
+  var isClickable = _a.isClickable;
+  return isClickable ? 'pointer' : 'default';
+}, function (_a) {
+  var isClickable = _a.isClickable,
+      isInverted = _a.isInverted;
+  return isClickable && css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n            @media (hover: hover) and (pointer: fine) {\n                &&:hover {\n                    background-color: ", ";\n                    color: ", ";\n                }\n            }\n        "], ["\n            @media (hover: hover) and (pointer: fine) {\n                &&:hover {\n                    background-color: ", ";\n                    color: ", ";\n                }\n            }\n        "])), isInverted ? '#dddddd' : '#444444', isInverted ? '#444444' : '#ffff');
+}, function (_a) {
+  var isInverted = _a.isInverted;
+  return isInverted ? '#dddddd' : '#444444';
+}, function (_a) {
+  var isInverted = _a.isInverted;
+  return isInverted ? '#444444' : '#ffff';
+}, function (_a) {
+  var isInverted = _a.isInverted,
+      theme = _a.theme;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+});
+
+var Tag = function (_a) {
+  var name = _a.name,
+      link = _a.link,
+      isInverted = _a.isInverted,
+      isActive = _a.isActive,
+      onClick = _a.onClick,
+      className = _a.className,
+      children = _a.children;
+  var tag = (link === null || link === void 0 ? void 0 : link.href) ? 'a' : onClick ? 'button' : 'span';
+  return React__default.createElement(View$1, __assign({
+    as: tag,
+    isInverted: isInverted,
+    isActive: isActive,
+    onClick: onClick,
+    isClickable: !!onClick || !!(link && link.href),
+    className: className
+  }, link), name || children);
+};
+var templateObject_1$1, templateObject_2$1;
+
+var View = styled.div.withConfig({
+  displayName: "TableBlock__View",
+  componentId: "sc-1n2im8m-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &:focus {\n        outline: 1px dashed ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    &:focus {\n        outline: 1px dashed ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+var Caption = styled(Copy).withConfig({
+  displayName: "TableBlock__Caption",
+  componentId: "sc-1n2im8m-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-bottom: ", "px;\n    padding: 0 ", "px;\n    text-align: left;\n"], ["\n    margin-bottom: ", "px;\n    padding: 0 ", "px;\n    text-align: left;\n"])), spacings.nudge, spacings.nudge * 2);
+var TableContainer = styled.div.withConfig({
+  displayName: "TableBlock__TableContainer",
+  componentId: "sc-1n2im8m-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n\n    &:focus {\n        outline: none;\n        border: 1px solid ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        border: none;\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n        scrollbar-width: none;\n    }\n"], ["\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n\n    &:focus {\n        outline: none;\n        border: 1px solid ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        border: none;\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n        scrollbar-width: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+var TableBody = styled.table.withConfig({
+  displayName: "TableBlock__TableBody",
+  componentId: "sc-1n2im8m-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: 100%;\n    max-width: 100%;\n\n    border-collapse: separate;\n    border-spacing: 0 ", "px;\n\n    padding: 0 ", "px;\n"], ["\n    width: 100%;\n    max-width: 100%;\n\n    border-collapse: separate;\n    border-spacing: 0 ", "px;\n\n    padding: 0 ", "px;\n"])), spacings.nudge * 0.5, spacings.nudge * 2);
+var TableHead = styled(Copy).withConfig({
+  displayName: "TableBlock__TableHead",
+  componentId: "sc-1n2im8m-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    text-align: left;\n    color: ", ";\n    background-color: ", ";\n\n    padding: 0 ", "px;\n    height: 56px;\n    box-sizing: content-box;\n\n    :last-child {\n        padding-right: ", "px;\n        text-align: ", ";\n    }\n"], ["\n    text-align: left;\n    color: ", ";\n    background-color: ", ";\n\n    padding: 0 ", "px;\n    height: 56px;\n    box-sizing: content-box;\n\n    :last-child {\n        padding-right: ", "px;\n        text-align: ", ";\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).text.inverted : getColors(theme).text.default;
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).elementBg.dark : getColors(theme).elementBg.medium;
+}, spacings.nudge * 3, spacings.spacer * 2.5, function (_a) {
+  var alignRight = _a.alignRight;
+  return alignRight ? 'right' : 'left';
+});
+var TableData = styled(Copy).withConfig({
+  displayName: "TableBlock__TableData",
+  componentId: "sc-1n2im8m-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: 0 ", "px;\n    height: 56px;\n    box-sizing: content-box;\n\n    background-color: ", ";\n\n    :last-child {\n        text-align: ", ";\n        padding-right: ", "px;\n    }\n"], ["\n    padding: 0 ", "px;\n    height: 56px;\n    box-sizing: content-box;\n\n    background-color: ", ";\n\n    :last-child {\n        text-align: ", ";\n        padding-right: ", "px;\n    }\n"])), spacings.nudge * 3, function (_a) {
+  var hasBack = _a.hasBack,
+      theme = _a.theme;
+  return hasBack ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+}, function (_a) {
+  var alignRight = _a.alignRight;
+  return alignRight ? 'right' : 'left';
+}, spacings.spacer * 2.5);
+var TableBlock = forwardRef(function (_a, ref) {
+  var row = _a.row,
+      tableTitle = _a.tableTitle,
+      rowTitle = _a.rowTitle,
+      _b = _a.isInverted,
+      isInverted = _b === void 0 ? false : _b,
+      _c = _a.hasBack,
+      hasBack = _c === void 0 ? false : _c,
+      _d = _a.lastCol,
+      lastCol = _d === void 0 ? 'left' : _d;
+  return React__default.createElement(View, {
+    ref: ref
+  }, React__default.createElement(TableContainer, {
+    tabIndex: 1
+  }, React__default.createElement(TableBody, null, tableTitle && React__default.createElement(Caption, {
+    renderAs: "caption",
+    type: "copy-b",
+    isInverted: isInverted
+  }, tableTitle), rowTitle && React__default.createElement("thead", null, React__default.createElement("tr", null, rowTitle.map(function (item, ii) {
+    return React__default.createElement(TableHead, {
+      key: ii,
+      type: "copy-b",
+      renderAs: "th",
+      isInverted: !isInverted,
+      alignRight: lastCol === 'right'
+    }, item);
+  }))), React__default.createElement("tbody", null, row.map(function (_a, i) {
+    var cols = _a.cols;
+    return React__default.createElement("tr", {
+      key: i
+    }, cols.map(function (itemText, ii) {
+      return React__default.createElement(TableData, {
+        key: ii,
+        renderAs: "td",
+        hasBack: hasBack,
+        alignRight: lastCol === 'right',
+        innerHTML: itemText
+      });
+    }));
+  })))));
+});
+TableBlock.displayName = 'TableBlock';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { Title as T, Tag as a, TableBlock as b };
+//# sourceMappingURL=TableBlock-0bbde956.js.map

package/esm/TableBlock-0bbde956.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBlock-0bbde956.js","sources":["../src/components/blocks/Title.tsx","../src/components/blocks/Tag.tsx","../src/components/blocks/TableBlock.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Heading, { HeadlineTag } from 'components/typography/Heading';\nimport { FontType, spacings } from 'utils/styles';\nimport { useLibTheme } from 'utils/LibThemeProvider';\n\nconst View = styled.div<{ isCentered?: boolean }>`\n    display: block;\n    text-align: ${({ isCentered }) => (isCentered ? 'center' : 'left')};\n    margin: ${({ isCentered }) => isCentered && '0 auto'};\n\n    & > * + * {\n        margin-top: ${spacings.nudge * 2}px;\n    }\n`;\n\nconst SuperTitle = styled(Heading)`\n    display: block;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: -webkit-box;\n    -webkit-line-clamp: 2; /* number of lines to show */\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n`;\n\nconst MainTitle = styled(Heading)<{ maxLines?: number }>`\n    display: block;\n\n    ${({ maxLines }) =>\n        maxLines &&\n        maxLines > 0 &&\n        css`\n            overflow: hidden;\n            text-overflow: ellipsis;\n            display: -webkit-box;\n            -webkit-line-clamp: ${maxLines}; /* number of lines to show */\n            line-clamp: ${maxLines};\n            -webkit-box-orient: vertical;\n        `}\n`;\n\nexport type TitleSize = Extract<FontType, 'heading-1' | 'heading-2'>;\n\nconst Title: FC<{\n    /**\n     * Text color mode mostly background dependent.\n     * The value onImage is used if the title is placed on an underlying image\n     * */\n    colorMode?: 'default' | 'inverted' | 'onImage';\n\n    /** Superior title that stands above main title */\n    superTitle?: string;\n\n    /** Superior title HTML tag type (h3, h4 ...) */\n    superTitleAs?: HeadlineTag;\n\n    /** Main title text */\n    title?: string;\n\n    /** Main title HTML tag type (h2, h3, h4...) */\n    titleAs?: HeadlineTag;\n\n    /** Style type of main title */\n    titleSize?: TitleSize;\n\n    /** Clamp lines of text to specific number */\n    maxLines?: number;\n\n    /** Center texts */\n    isCentered?: boolean;\n\n    /** Enable titel text hypens */\n    titleHyphens?: boolean;\n\n    className?: string;\n}> = ({\n    colorMode = 'default',\n    superTitle,\n    superTitleAs,\n    title,\n    titleAs,\n    titleSize = 'heading-2',\n    maxLines,\n    isCentered = false,\n    titleHyphens,\n    className,\n}) => {\n    const { colors } = useLibTheme();\n\n    return (\n        <View isCentered={isCentered} className={className}>\n            {superTitle && (\n                <SuperTitle\n                    renderAs={superTitleAs || 'div'}\n                    size=\"super\"\n                    textColor={\n                        colorMode === 'onImage'\n                            ? colors.text.inverted\n                            : undefined\n                    }\n                    isInverted={colorMode === 'inverted'}\n                    innerHTML={superTitle}\n                />\n            )}\n            {title && (\n                <MainTitle\n                    renderAs={titleAs || 'h2'}\n                    size={titleSize === 'heading-1' ? 'heading-1' : 'heading-2'}\n                    hyphens={titleHyphens}\n                    textColor={\n                        colorMode === 'onImage'\n                            ? colors.text.inverted\n                            : undefined\n                    }\n                    isInverted={colorMode === 'inverted'}\n                    innerHTML={title}\n                    maxLines={maxLines}\n                />\n            )}\n        </View>\n    );\n};\n\nexport default Title;\n","import React, { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { copyStyle } from 'components/typography/Copy';\nimport Link, { LinkProps } from 'components/typography/Link';\nimport { getColors, spacings } from 'utils/styles';\n\nconst View = styled(Link)<{\n    isInverted?: boolean;\n    isActive?: boolean;\n    isClickable?: boolean;\n}>`\n    display: inline-block;\n    border: 1px solid\n        ${({ isInverted }) => (isInverted ? '#dddddd' : '#444444')};\n    border-radius: 8px;\n\n    padding: 1px ${spacings.nudge}px;\n    max-height: 28px;\n    min-width: 60px;\n    user-select: none;\n\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    text-align: center;\n\n    text-decoration: none;\n\n    ${copyStyle('copy', 'small')}\n\n    background: none;\n\n    && {\n        background-color: ${({ isActive, isInverted }) =>\n            isActive && (isInverted ? '#dddddd' : '#444444')};\n        color: ${({ isActive, isInverted }) => {\n            if (isActive) {\n                return isInverted ? '#444444' : '#ffff';\n            } else {\n                return isInverted ? '#dddddd' : '#444444';\n            }\n        }};\n\n        transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;\n    }\n\n    cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};\n\n    ${({ isClickable, isInverted }) =>\n        isClickable &&\n        css`\n            @media (hover: hover) and (pointer: fine) {\n                &&:hover {\n                    background-color: ${isInverted ? '#dddddd' : '#444444'};\n                    color: ${isInverted ? '#444444' : '#ffff'};\n                }\n            }\n        `}\n\n    &:focus {\n        /* background-color: ${({ isInverted }) =>\n            isInverted ? '#dddddd' : '#444444'};\n        color: ${({ isInverted }) => (isInverted ? '#444444' : '#ffff')}; */\n        outline: 2px solid\n            ${({ isInverted, theme }) =>\n                isInverted\n                    ? getColors(theme).primary.inverted\n                    : getColors(theme).primary.default};\n        outline-offset: -1px;\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        text-decoration: none;\n    }\n`;\n\nexport interface TagProps {\n    name?: string;\n    link?: LinkProps;\n}\n\nconst Tag: FC<\n    TagProps & {\n        /** Invert colors to use on dark background */\n        isInverted?: boolean;\n\n        /** Highlight tag if active */\n        isActive?: boolean;\n\n        /** Click callback */\n        onClick?: (ev?: React.SyntheticEvent<HTMLElement>) => void;\n        className?: string;\n        children?: React.ReactNode;\n    }\n> = ({ name, link, isInverted, isActive, onClick, className, children }) => {\n    const tag = link?.href ? 'a' : onClick ? 'button' : 'span';\n\n    return (\n        <View\n            as={tag}\n            isInverted={isInverted}\n            isActive={isActive}\n            onClick={onClick}\n            isClickable={!!onClick || !!(link && link.href)}\n            className={className}\n            {...link}\n        >\n            {name || children}\n        </View>\n    );\n};\n\nexport default Tag;\n","import Copy from 'components/typography/Copy';\nimport React, { forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport { getColors as color, spacings } from 'utils/styles';\n\nconst View = styled.div`\n    &:focus {\n        outline: 1px dashed ${({ theme }) => color(theme).primary.default};\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n`;\n\nconst Caption = styled(Copy)`\n    margin-bottom: ${spacings.nudge}px;\n    padding: 0 ${spacings.nudge * 2}px;\n    text-align: left;\n`;\n\nconst TableContainer = styled.div`\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n\n    &:focus {\n        outline: none;\n        border: 1px solid ${({ theme }) => color(theme).primary.default};\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        border: none;\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n        scrollbar-width: none;\n    }\n`;\n\nconst TableBody = styled.table`\n    width: 100%;\n    max-width: 100%;\n\n    border-collapse: separate;\n    border-spacing: 0 ${spacings.nudge * 0.5}px;\n\n    padding: 0 ${spacings.nudge * 2}px;\n`;\n\nconst TableHead = styled(Copy)<{\n    isInverted?: boolean;\n    alignRight?: boolean;\n}>`\n    text-align: left;\n    color: ${({ theme, isInverted }) =>\n        isInverted ? color(theme).text.inverted : color(theme).text.default};\n    background-color: ${({ theme, isInverted }) =>\n        isInverted\n            ? color(theme).elementBg.dark\n            : color(theme).elementBg.medium};\n\n    padding: 0 ${spacings.nudge * 3}px;\n    height: 56px;\n    box-sizing: content-box;\n\n    :last-child {\n        padding-right: ${spacings.spacer * 2.5}px;\n        text-align: ${({ alignRight }) => (alignRight ? 'right' : 'left')};\n    }\n`;\n\nconst TableData = styled(Copy)<{\n    hasBack?: boolean;\n    alignRight?: boolean;\n}>`\n    padding: 0 ${spacings.nudge * 3}px;\n    height: 56px;\n    box-sizing: content-box;\n\n    background-color: ${({ hasBack, theme }) =>\n        hasBack ? color(theme).elementBg.light : color(theme).elementBg.medium};\n\n    :last-child {\n        text-align: ${({ alignRight }) => (alignRight ? 'right' : 'left')};\n        padding-right: ${spacings.spacer * 2.5}px;\n    }\n`;\n\nexport interface TableProps {\n    tableTitle?: string;\n    rowTitle?: string[];\n    row: Array<{\n        cols: string[];\n    }>;\n    isInverted?: boolean;\n    hasBack?: boolean;\n    lastCol?: 'left' | 'right';\n}\n\nconst TableBlock = forwardRef<HTMLDivElement, TableProps>(\n    (\n        {\n            row,\n            tableTitle,\n            rowTitle,\n            isInverted = false,\n            hasBack = false,\n            lastCol = 'left',\n        },\n        ref\n    ) => {\n        return (\n            <View ref={ref}>\n                <TableContainer tabIndex={1}>\n                    <TableBody>\n                        {tableTitle && (\n                            <Caption\n                                renderAs=\"caption\"\n                                type=\"copy-b\"\n                                isInverted={isInverted}\n                            >\n                                {tableTitle}\n                            </Caption>\n                        )}\n                        {rowTitle && (\n                            <thead>\n                                <tr>\n                                    {rowTitle.map((item, ii) => (\n                                        <TableHead\n                                            key={ii}\n                                            type=\"copy-b\"\n                                            renderAs=\"th\"\n                                            isInverted={!isInverted}\n                                            alignRight={lastCol === 'right'}\n                                        >\n                                            {item}\n                                        </TableHead>\n                                    ))}\n                                </tr>\n                            </thead>\n                        )}\n                        <tbody>\n                            {row.map(({ cols }, i) => (\n                                <tr key={i}>\n                                    {cols.map((itemText, ii) => {\n                                        return (\n                                            <TableData\n                                                key={ii}\n                                                renderAs=\"td\"\n                                                hasBack={hasBack}\n                                                alignRight={lastCol === 'right'}\n                                                innerHTML={itemText}\n                                            />\n                                        );\n                                    })}\n                                </tr>\n                            ))}\n                        </tbody>\n                    </TableBody>\n                </TableContainer>\n            </View>\n        );\n    }\n);\n\nTableBlock.displayName = 'TableBlock';\n\nexport default TableBlock;\n"],"names":["View","styled","div","templateObject_1","__makeTemplateObject","_a","isCentered","spacings","nudge","SuperTitle","Heading","templateObject_2","MainTitle","templateObject_4","maxLines","css","Title","_b","colorMode","superTitle","superTitleAs","title","titleAs","_c","titleSize","_d","titleHyphens","className","colors","useLibTheme","React","createElement","renderAs","size","textColor","text","inverted","undefined","isInverted","innerHTML","hyphens","Link","copyStyle","isActive","isClickable","theme","getColors","primary","default","Tag","name","link","onClick","children","tag","href","__assign","as","color","Caption","Copy","TableContainer","templateObject_3","TableBody","table","TableHead","templateObject_5","elementBg","dark","medium","spacer","alignRight","TableData","templateObject_6","hasBack","light","TableBlock","forwardRef","ref","row","tableTitle","rowTitle","lastCol","tabIndex","type","map","item","ii","key","i","cols","itemText","displayName"],"mappings":"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"}

package/esm/VideoCard-2557407b.js

@@ -0,0 +1,187 @@
+import { a as __makeTemplateObject, p as Play } from './ClockFilled-8784ddac.js';
+import * as React from 'react';
+import React__default, { useState } from 'react';
+import styled from 'styled-components';
+import { c as getGlobals, m as mq, g as getColors, s as spacings } from './styles-5f78e59d.js';
+import { s as selectors, g as getCookie } from './useCookieConsent-db86e5cb.js';
+import { C as Copy } from './Copy-3444d005.js';
+import { B as ButtonGhost } from './ButtonGhost-6673a07e.js';
+import { u as useLibTheme } from './LibThemeProvider-90a5375f.js';
+
+var SVG = styled.svg.withConfig({
+  displayName: "Filter__SVG",
+  componentId: "sc-noawe1-0"
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+
+var Filter = function (_a) {
+  var _b = _a.iconColor,
+      iconColor = _b === void 0 ? 'currentColor' : _b,
+      className = _a.className,
+      _c = _a.ariaHidden,
+      ariaHidden = _c === void 0 ? true : _c;
+  return React.createElement(SVG, {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    className: className,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": ariaHidden
+  }, React.createElement("path", {
+    d: "M10 18h4v-2h-4v2ZM3 6v2h18V6H3Zm3 7h12v-2H6v2Z",
+    fill: iconColor
+  }));
+};
+var templateObject_1$1;
+
+var View = styled.div.withConfig({
+  displayName: "VideoCard__View",
+  componentId: "sc-7e1mvm-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    text-align: center;\n\n    cursor: ", ";\n    position: relative;\n\n    padding-bottom: 56.25%;\n\n    background-image: url('", "');\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    border-radius: ", ";\n    overflow: hidden;\n\n    @media ", " {\n        text-align: left;\n\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    &:before {\n        content: ", ";\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background-color: ", ";\n        opacity: ", ";\n\n        pointer-events: none;\n    }\n\n    &:after {\n        content: ", ";\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        pointer-events: none;\n\n        background: linear-gradient(\n            358.19deg,\n            rgba(29, 34, 35, 0.52) 12.37%,\n            rgba(29, 34, 35, 0) 59.02%\n        );\n    }\n"], ["\n    text-align: center;\n\n    cursor: ", ";\n    position: relative;\n\n    padding-bottom: 56.25%;\n\n    background-image: url('", "');\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    border-radius: ", ";\n    overflow: hidden;\n\n    @media ", " {\n        text-align: left;\n\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    @media ", " {\n        background-image: ", ";\n    }\n\n    &:before {\n        content: ", ";\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background-color: ", ";\n        opacity: ", ";\n\n        pointer-events: none;\n    }\n\n    &:after {\n        content: ", ";\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        pointer-events: none;\n\n        background: linear-gradient(\n            358.19deg,\n            rgba(29, 34, 35, 0.52) 12.37%,\n            rgba(29, 34, 35, 0) 59.02%\n        );\n    }\n"])), function (_a) {
+  var onClick = _a.onClick;
+  return onClick && 'pointer';
+}, function (_a) {
+  var bgImage = _a.bgImage;
+  return bgImage ? bgImage.small : '';
+}, function (_a) {
+  var theme = _a.theme;
+  return getGlobals(theme).sections.edgeRadius;
+}, mq.medium, function (_a) {
+  var bgImage = _a.bgImage;
+  return (bgImage === null || bgImage === void 0 ? void 0 : bgImage.medium) && "url(\"".concat(bgImage.medium, "\")");
+}, mq.semilarge, function (_a) {
+  var bgImage = _a.bgImage;
+  return (bgImage === null || bgImage === void 0 ? void 0 : bgImage.semilarge) && "url(\"".concat(bgImage.semilarge, "\")");
+}, mq.large, function (_a) {
+  var bgImage = _a.bgImage;
+  return (bgImage === null || bgImage === void 0 ? void 0 : bgImage.large) && "url(\"".concat(bgImage.large, "\")");
+}, mq.xlarge, function (_a) {
+  var bgImage = _a.bgImage;
+  return (bgImage === null || bgImage === void 0 ? void 0 : bgImage.xlarge) && "url(\"".concat(bgImage.xlarge, "\")");
+}, function (_a) {
+  var isActive = _a.isActive,
+      bgImage = _a.bgImage;
+  return !isActive && bgImage && '""';
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.medium;
+}, function (_a) {
+  var bgImage = _a.bgImage;
+  return bgImage ? '0.3' : '0';
+}, function (_a) {
+  var isActive = _a.isActive,
+      bgImage = _a.bgImage;
+  return !isActive && bgImage && '""';
+});
+var VideoControls = styled.button.withConfig({
+  displayName: "VideoCard__VideoControls",
+  componentId: "sc-7e1mvm-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    z-index: 1;\n    padding: 0;\n\n    cursor: pointer;\n\n    & > * {\n        opacity: 0.8;\n        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n        height: 80px;\n        width: 80px;\n\n        color: ", ";\n    }\n\n    ", ":hover > & > * {\n        transform: scale(1.05);\n        opacity: 1;\n    }\n\n    ", ":active > & > * {\n        transform: scale(0.95);\n        opacity: 1;\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        border-radius: 50%;\n        opacity: 1;\n\n        & > * {\n            color: ", ";\n        }\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"], ["\n    display: block;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ", ";\n    z-index: 1;\n    padding: 0;\n\n    cursor: pointer;\n\n    & > * {\n        opacity: 0.8;\n        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n        height: 80px;\n        width: 80px;\n\n        color: ", ";\n    }\n\n    ", ":hover > & > * {\n        transform: scale(1.05);\n        opacity: 1;\n    }\n\n    ", ":active > & > * {\n        transform: scale(0.95);\n        opacity: 1;\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n        border-radius: 50%;\n        opacity: 1;\n\n        & > * {\n            color: ", ";\n        }\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.light;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.dark;
+}, View, View, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+var ConsentOverlay = styled.div.withConfig({
+  displayName: "VideoCard__ConsentOverlay",
+  componentId: "sc-7e1mvm-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: ", ";\n    justify-content: center;\n    align-items: center;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 2;\n    background-color: rgba(0, 0, 0, 0.6);\n    pointer-events: ", ";\n"], ["\n    display: ", ";\n    justify-content: center;\n    align-items: center;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 2;\n    background-color: rgba(0, 0, 0, 0.6);\n    pointer-events: ", ";\n"])), function (_a) {
+  var isVisible = _a.isVisible;
+  return isVisible ? 'flex' : 'none';
+}, function (_a) {
+  var isVisible = _a.isVisible;
+  return isVisible ? 'all' : 'none';
+});
+var ConsentContent = styled.div.withConfig({
+  displayName: "VideoCard__ConsentContent",
+  componentId: "sc-7e1mvm-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    max-width: 330px;\n    text-align: center;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    max-width: 330px;\n    text-align: center;\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 3);
+var ConsentText = styled(Copy).withConfig({
+  displayName: "VideoCard__ConsentText",
+  componentId: "sc-7e1mvm-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
+var Iframe = styled.iframe.withConfig({
+  displayName: "VideoCard__Iframe",
+  componentId: "sc-7e1mvm-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    border: none;\n"], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    border: none;\n"])));
+
+var VideoCard = function (_a) {
+  var _b;
+
+  var bgImage = _a.bgImage,
+      embedId = _a.embedId,
+      playIcon = _a.playIcon,
+      _c = _a.consentText,
+      consentText = _c === void 0 ? 'Für die Wiedergabe von Videos muss der Nutzung von Cookies & Daten zugestimmt werden.' : _c,
+      consentAction = _a.consentAction,
+      className = _a.className;
+  var globals = useLibTheme().globals;
+
+  var _d = useState(false),
+      isActive = _d[0],
+      setIsActive = _d[1];
+
+  var _e = useState(false),
+      showConsent = _e[0],
+      setShowConsent = _e[1];
+
+  var handlePlayClick = function () {
+    var cookie = getCookie(globals.cookie.name);
+    var isAccepted = globals.cookie.videoCookieTypeRestrictions.reduce(function (acc, current) {
+      var _a, _b;
+
+      if (!acc) return acc;
+      if (!cookie || !(cookie === null || cookie === void 0 ? void 0 : cookie.data.types)) return false; // set acc to false if type is not defined or set to false
+
+      acc = !!((_b = (_a = cookie === null || cookie === void 0 ? void 0 : cookie.data) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b[current]);
+      return acc;
+    }, true);
+
+    if (isAccepted) {
+      setIsActive(true);
+      setShowConsent(false);
+    } else {
+      setShowConsent(true);
+    }
+  };
+
+  var handleConsentActionClick = function () {
+    setShowConsent(false);
+  };
+
+  return React__default.createElement(View, {
+    onClick: !showConsent ? handlePlayClick : undefined,
+    bgImage: isActive ? undefined : bgImage,
+    isActive: isActive,
+    className: className
+  }, !isActive && !showConsent && React__default.createElement(VideoControls, null, playIcon || React__default.createElement(Play, {
+    iconColor: "#000"
+  })), isActive && React__default.createElement(Iframe, {
+    id: "ytplayer",
+    src: "https://www.youtube.com/embed/".concat(embedId, "?autoplay=1"),
+    allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  }), React__default.createElement(ConsentOverlay, {
+    isVisible: showConsent
+  }, React__default.createElement(ConsentContent, null, consentText && React__default.createElement(ConsentText, {
+    isInverted: true
+  }, consentText), consentAction ? consentAction({
+    handleClick: handleConsentActionClick,
+    consentProps: (_b = {}, _b[selectors.buttons.attribute] = '', _b)
+  }) : React__default.createElement(ButtonGhost.View, {
+    as: "button",
+    isInverted: true,
+    onClick: handleConsentActionClick,
+    className: selectors.buttons.class
+  }, React__default.createElement(ButtonGhost.Label, null, "Zustimmung \u00E4ndern")))));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { Filter as F, VideoCard as V };
+//# sourceMappingURL=VideoCard-2557407b.js.map

package/esm/VideoCard-2557407b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoCard-2557407b.js","sources":["../src/components/base/icons/Filter.tsx","../src/components/blocks/VideoCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nconst SVG = styled.svg`\n    display: block;\n`;\n\nconst Filter: React.FC<{\n    iconColor?: string;\n    className?: string;\n    ariaHidden?: boolean;\n}> = ({ iconColor = 'currentColor', className, ariaHidden = true }) => (\n    <SVG\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        className={className}\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden={ariaHidden}\n    >\n        <path\n            d=\"M10 18h4v-2h-4v2ZM3 6v2h18V6H3Zm3 7h12v-2H6v2Z\"\n            fill={iconColor}\n        />\n    </SVG>\n);\n\nexport default Filter;\n","import React, { FC, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { ImageProps } from 'components/blocks/Image';\nimport {\n    mq,\n    getColors as color,\n    getGlobals as global,\n    spacings,\n} from 'utils/styles';\nimport Play from 'components/base/icons/Play';\nimport {\n    CookieConsentData,\n    selectors,\n} from 'utils/cookie-consent/useCookieConsent';\nimport { Cookie, getCookie } from 'utils/cookie-consent/cookie';\nimport Copy from 'components/typography/Copy';\nimport ButtonGhost from 'components/buttons/ButtonGhost';\nimport { useLibTheme } from 'utils/LibThemeProvider';\n\nconst View = styled.div<{\n    bgImage?: ImageProps;\n    isActive?: boolean;\n    onClick?: () => void;\n}>`\n    text-align: center;\n\n    cursor: ${({ onClick }) => onClick && 'pointer'};\n    position: relative;\n\n    padding-bottom: 56.25%;\n\n    background-image: url('${({ bgImage }) => (bgImage ? bgImage.small : '')}');\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    border-radius: ${({ theme }) => global(theme).sections.edgeRadius};\n    overflow: hidden;\n\n    @media ${mq.medium} {\n        text-align: left;\n\n        background-image: ${({ bgImage }) =>\n            bgImage?.medium && `url(\"${bgImage.medium}\")`};\n    }\n\n    @media ${mq.semilarge} {\n        background-image: ${({ bgImage }) =>\n            bgImage?.semilarge && `url(\"${bgImage.semilarge}\")`};\n    }\n\n    @media ${mq.large} {\n        background-image: ${({ bgImage }) =>\n            bgImage?.large && `url(\"${bgImage.large}\")`};\n    }\n\n    @media ${mq.xlarge} {\n        background-image: ${({ bgImage }) =>\n            bgImage?.xlarge && `url(\"${bgImage.xlarge}\")`};\n    }\n\n    &:before {\n        content: ${({ isActive, bgImage }) => !isActive && bgImage && '\"\"'};\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background-color: ${({ theme }) => color(theme).elementBg.medium};\n        opacity: ${({ bgImage }) => (bgImage ? '0.3' : '0')};\n\n        pointer-events: none;\n    }\n\n    &:after {\n        content: ${({ isActive, bgImage }) => !isActive && bgImage && '\"\"'};\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        pointer-events: none;\n\n        background: linear-gradient(\n            358.19deg,\n            rgba(29, 34, 35, 0.52) 12.37%,\n            rgba(29, 34, 35, 0) 59.02%\n        );\n    }\n`;\n\nconst VideoControls = styled.button`\n    display: block;\n    border: none;\n    background: none;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: ${({ theme }) => color(theme).elementBg.light};\n    z-index: 1;\n    padding: 0;\n\n    cursor: pointer;\n\n    & > * {\n        opacity: 0.8;\n        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n        height: 80px;\n        width: 80px;\n\n        color: ${({ theme }) => color(theme).elementBg.dark};\n    }\n\n    ${View}:hover > & > * {\n        transform: scale(1.05);\n        opacity: 1;\n    }\n\n    ${View}:active > & > * {\n        transform: scale(0.95);\n        opacity: 1;\n    }\n\n    &:focus {\n        outline: 2px solid ${({ theme }) => color(theme).primary.default};\n        border-radius: 50%;\n        opacity: 1;\n\n        & > * {\n            color: ${({ theme }) => color(theme).primary.default};\n        }\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n        box-shadow: none;\n    }\n`;\n\nconst ConsentOverlay = styled.div<{ isVisible?: boolean }>`\n    display: ${({ isVisible }) => (isVisible ? 'flex' : 'none')};\n    justify-content: center;\n    align-items: center;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 2;\n    background-color: rgba(0, 0, 0, 0.6);\n    pointer-events: ${({ isVisible }) => (isVisible ? 'all' : 'none')};\n`;\n\nconst ConsentContent = styled.div`\n    max-width: 330px;\n    text-align: center;\n\n    & > * + * {\n        margin-top: ${spacings.nudge * 3}px;\n    }\n`;\n\nconst ConsentText = styled(Copy)``;\n\nconst Iframe = styled.iframe`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    border: none;\n`;\n\nexport interface VideoCardProps {\n    bgImage: ImageProps;\n    embedId: string;\n    playIcon?: React.ReactNode;\n    consentText?: string;\n    consentAction?: (props: {\n        handleClick?: () => void;\n        consentProps: Record<string, string>;\n    }) => React.ReactNode;\n}\n\nconst VideoCard: FC<VideoCardProps & { className?: string }> = ({\n    bgImage,\n    embedId,\n    playIcon,\n    consentText = 'Für die Wiedergabe von Videos muss der Nutzung von Cookies & Daten zugestimmt werden.',\n    consentAction,\n    className,\n}) => {\n    const { globals } = useLibTheme();\n    const [isActive, setIsActive] = useState(false);\n    const [showConsent, setShowConsent] = useState(false);\n\n    const handlePlayClick = () => {\n        const cookie = getCookie(\n            globals.cookie.name\n        ) as Cookie<CookieConsentData>;\n\n        const isAccepted =\n            globals.cookie.videoCookieTypeRestrictions.reduce<boolean>(\n                (acc, current) => {\n                    if (!acc) return acc;\n                    if (!cookie || !cookie?.data.types) return false;\n\n                    // set acc to false if type is not defined or set to false\n                    acc = !!cookie?.data?.types?.[current];\n                    return acc;\n                },\n                true\n            );\n\n        if (isAccepted) {\n            setIsActive(true);\n            setShowConsent(false);\n        } else {\n            setShowConsent(true);\n        }\n    };\n\n    const handleConsentActionClick = () => {\n        setShowConsent(false);\n    };\n\n    return (\n        <View\n            onClick={!showConsent ? handlePlayClick : undefined}\n            bgImage={isActive ? undefined : bgImage}\n            isActive={isActive}\n            className={className}\n        >\n            {!isActive && !showConsent && (\n                <VideoControls>\n                    {playIcon || <Play iconColor=\"#000\" />}\n                </VideoControls>\n            )}\n            {isActive && (\n                <Iframe\n                    id=\"ytplayer\"\n                    src={`https://www.youtube.com/embed/${embedId}?autoplay=1`}\n                    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                />\n            )}\n            <ConsentOverlay isVisible={showConsent}>\n                <ConsentContent>\n                    {consentText && (\n                        <ConsentText isInverted>{consentText}</ConsentText>\n                    )}\n                    {consentAction ? (\n                        consentAction({\n                            handleClick: handleConsentActionClick,\n                            consentProps: {\n                                [selectors.buttons.attribute]: '',\n                            },\n                        })\n                    ) : (\n                        <ButtonGhost.View\n                            as=\"button\"\n                            isInverted\n                            onClick={handleConsentActionClick}\n                            className={selectors.buttons.class}\n                        >\n                            <ButtonGhost.Label>\n                                Zustimmung ändern\n                            </ButtonGhost.Label>\n                        </ButtonGhost.View>\n                    )}\n                </ConsentContent>\n            </ConsentOverlay>\n        </View>\n    );\n};\n\nexport default VideoCard;\n"],"names":["SVG","styled","svg","templateObject_1","__makeTemplateObject","Filter","_a","_b","iconColor","className","_c","ariaHidden","React","createElement","width","height","viewBox","fill","xmlns","d","View","div","onClick","bgImage","small","theme","global","sections","edgeRadius","mq","medium","concat","semilarge","large","xlarge","isActive","color","elementBg","VideoControls","button","templateObject_2","light","dark","primary","default","ConsentOverlay","templateObject_3","isVisible","ConsentContent","spacings","nudge","ConsentText","Copy","templateObject_5","Iframe","iframe","templateObject_6","VideoCard","embedId","playIcon","consentText","consentAction","globals","useLibTheme","_d","useState","setIsActive","_e","showConsent","setShowConsent","handlePlayClick","cookie","getCookie","name","isAccepted","videoCookieTypeRestrictions","reduce","acc","current","data","types","handleConsentActionClick","undefined","Play","id","src","allow","isInverted","handleClick","consentProps","selectors","buttons","attribute","ButtonGhost","as","class","Label"],"mappings":";;;;;;;;;;AAGA,IAAMA,GAAG,GAAGC,MAAM,CAACC,GAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,aAAA;AAAA,EAAA,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAaC,kBAAA,KAAAA,kBAAA,GAAAC,oBAAA,CAAA,CAAA,yBAAA,CAAA,EAAA,CAAA,yBAAA,CAAA,CAAA,CAAb,CAAT,CAAA;;AAIA,IAAMC,MAAM,GAIP,UAACC,EAAD,EAA6D;AAA1D,EAAA,IAAAC,EAAA,GAAAD,EAAA,CAAAE,SAAA;AAAA,MAAAA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,cAAA,KAAZ;AAAA,MAA4BE,SAAS,GAAAH,EAAA,CAAAG,SAArC;AAAA,MAAuCC,EAAiB,GAAAJ,EAAA,CAAAK,UAAxD;AAAA,MAAuCA,UAAU,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,IAAH,GAAOA,EAAxD,CAAA;AAA+D,EAAA,OACnEE,KAAA,CAAAC,aAAA,CAACb,GAAD,EAAI;AACAc,IAAAA,KAAK,EAAC,IADN;AAEAC,IAAAA,MAAM,EAAC,IAFP;AAGAC,IAAAA,OAAO,EAAC,WAHR;AAIAP,IAAAA,SAAS,EAAEA,SAJX;AAKAQ,IAAAA,IAAI,EAAC,MALL;AAMAC,IAAAA,KAAK,EAAC,4BANN;AAMkC,IACrBP,aAAAA,EAAAA,UAAAA;AAPb,GAAJ,EASIC,KACI,CAAAC,aADJ,CACI,MADJ,EACI;AAAAM,IAAAA,CAAC,EAAC,gDAAF;AACAF,IAAAA,IAAI,EAAET,SAAAA;AADN,GADJ,CATJ,CADmE,CAAA;AAetE,EAnBD;;;ACaA,IAAMY,IAAI,GAAGnB,MAAM,CAACoB,GAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,iBAAA;AAAA,EAAA,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,0tCAIR,6CAGiD,4FAKyB,gIAKP,2CAG/C,+DAImC,2BAGhC,kCAEsC,2BAG1C,kCAEkC,2BAGjC,kCAEmC,iDAIiB,wIAMF,wBACb,iFAMe,8UAxDhE,EAOI,UAACf,EAAD,EAAY;AAAT,EAAA,IAAAgB,OAAO,GAAAhB,EAAA,CAAAgB,OAAP,CAAA;AAAc,EAAAA,OAAAA,OAAO,IAAI,SAAX,CAAA;AAAoB,CAPzC,EAYmB,UAAChB,EAAD,EAAY;AAAT,EAAA,IAAAiB,OAAO,GAAAjB,EAAA,CAAAiB,OAAP,CAAA;AAAc,EAAA,OAACA,OAAO,GAAGA,OAAO,CAACC,KAAX,GAAmB,EAA3B,CAAA;AAA8B,CAZlE,EAiBW,UAAClB,EAAD,EAAU;AAAP,EAAA,IAAAmB,KAAK,GAAAnB,EAAA,CAAAmB,KAAL,CAAA;AAAY,EAAA,OAAAC,UAAM,CAACD,KAAD,CAAN,CAAcE,QAAd,CAAuBC,UAAvB,CAAA;AAAiC,CAjB3D,EAoBGC,EAAE,CAACC,MApBN,EAuBkB,UAACxB,EAAD,EAAY;AAAT,EAAA,IAAAiB,OAAO,GAAAjB,EAAA,CAAAiB,OAAP,CAAA;AACnB,EAAA,OAAA,CAAAA,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEO,MAAT,KAAmB,QAAAC,CAAAA,MAAA,CAAQR,OAAO,CAACO,MAAhB,EAA0B,KAA1B,CAAnB,CAAA;AAA6C,CAxB/C,EA2BGD,EAAE,CAACG,SA3BN,EA4BkB,UAAC1B,EAAD,EAAY;AAAT,EAAA,IAAAiB,OAAO,GAAAjB,EAAA,CAAAiB,OAAP,CAAA;AACnB,EAAA,OAAA,CAAAA,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAES,SAAT,KAAsB,QAAAD,CAAAA,MAAA,CAAQR,OAAO,CAACS,SAAhB,EAA6B,KAA7B,CAAtB,CAAA;AAAmD,CA7BrD,EAgCGH,EAAE,CAACI,KAhCN,EAiCkB,UAAC3B,EAAD,EAAY;AAAT,EAAA,IAAAiB,OAAO,GAAAjB,EAAA,CAAAiB,OAAP,CAAA;AACnB,EAAA,OAAA,CAAAA,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEU,KAAT,KAAkB,QAAAF,CAAAA,MAAA,CAAQR,OAAO,CAACU,KAAhB,EAAyB,KAAzB,CAAlB,CAAA;AAA2C,CAlC7C,EAqCGJ,EAAE,CAACK,MArCN,EAsCkB,UAAC5B,EAAD,EAAY;AAAT,EAAA,IAAAiB,OAAO,GAAAjB,EAAA,CAAAiB,OAAP,CAAA;AACnB,EAAA,OAAA,CAAAA,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEW,MAAT,KAAmB,QAAAH,CAAAA,MAAA,CAAQR,OAAO,CAACW,MAAhB,EAA0B,KAA1B,CAAnB,CAAA;AAA6C,CAvC/C,EA2CS,UAAC5B,EAAD,EAAsB;MAAnB6B,QAAQ,GAAA7B,EAAA,CAAA6B;MAAEZ,OAAO,GAAAjB,EAAA,CAAAiB;AAAO,EAAA,OAAA,CAACY,QAAD,IAAaZ,OAAb,IAAwB,IAAxB,CAAA;AAA4B,CA3ChE,EAiDkB,UAACjB,EAAD,EAAU;AAAP,EAAA,IAAAmB,KAAK,GAAAnB,EAAA,CAAAmB,KAAL,CAAA;AAAY,EAAA,OAAAW,SAAK,CAACX,KAAD,CAAL,CAAaY,SAAb,CAAuBP,MAAvB,CAAA;AAA6B,CAjD9D,EAkDS,UAACxB,EAAD,EAAY;AAAT,EAAA,IAAAiB,OAAO,GAAAjB,EAAA,CAAAiB,OAAP,CAAA;AAAc,EAAA,OAACA,OAAO,GAAG,KAAH,GAAW,GAAnB,CAAA;AAAuB,CAlDjD,EAwDS,UAACjB,EAAD,EAAsB;MAAnB6B,QAAQ,GAAA7B,EAAA,CAAA6B;MAAEZ,OAAO,GAAAjB,EAAA,CAAAiB;AAAO,EAAA,OAAA,CAACY,QAAD,IAAaZ,OAAb,IAAwB,IAAxB,CAAA;AAA4B,CAxDhE,CAAV,CAAA;AAyEA,IAAMe,aAAa,GAAGrC,MAAM,CAACsC,MAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,0BAAA;AAAA,EAAA,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAgBC,gBAAA,KAAAA,gBAAA,GAAApC,oBAAA,CAAA,CAAA,6KAAA,EAAA,8OAAA,EAAA,kBAAA,EAAA,uFAAA,EAAA,8HAAA,EAAA,6FAAA,EAAA,sHAAA,CAAA,EAAA,CAAA,6KAAA,EAQqB,8OARrB,EAoBwB,kBApBxB,EAuBzB,uFAvByB,EA4BzB,8HA5ByB,EAkCqC,6FAlCrC,EAuC6B,sHAvC7B,CAAA,CAAA,CAAhB,EAQN,UAACE,EAAD,EAAU;AAAP,EAAA,IAAAmB,KAAK,GAAAnB,EAAA,CAAAmB,KAAL,CAAA;AAAY,EAAA,OAAAW,SAAK,CAACX,KAAD,CAAL,CAAaY,SAAb,CAAuBI,KAAvB,CAAA;AAA4B,CARrC,EAoBF,UAACnC,EAAD,EAAU;AAAP,EAAA,IAAAmB,KAAK,GAAAnB,EAAA,CAAAmB,KAAL,CAAA;AAAY,EAAA,OAAAW,SAAK,CAACX,KAAD,CAAL,CAAaY,SAAb,CAAuBK,IAAvB,CAAA;AAA2B,CApBxC,EAuBbtB,IAvBa,EA4BbA,IA5Ba,EAkCU,UAACd,EAAD,EAAU;AAAP,EAAA,IAAAmB,KAAK,GAAAnB,EAAA,CAAAmB,KAAL,CAAA;AAAY,EAAA,OAAAW,SAAK,CAACX,KAAD,CAAL,CAAakB,OAAb,CAAqBC,OAArB,CAAA;AAA4B,CAlCrD,EAuCE,UAACtC,EAAD,EAAU;AAAP,EAAA,IAAAmB,KAAK,GAAAnB,EAAA,CAAAmB,KAAL,CAAA;AAAY,EAAA,OAAAW,SAAK,CAACX,KAAD,CAAL,CAAakB,OAAb,CAAqBC,OAArB,CAAA;AAA4B,CAvC7C,CAAnB,CAAA;AAiDA,IAAMC,cAAc,GAAG5C,MAAM,CAACoB,GAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,2BAAA;AAAA,EAAA,WAAA,EAAA,aAAA;AAAA,CAAayB,CAAAA,CAAAA,gBAAA,KAAAA,gBAAA,GAAA1C,oBAAA,CAAA,CAAA,iBAAA,EAAA,kOAAA,EAAA,KAAA,CAAA,EAAA,CAAyB,iBAAzB,EAC8B,kOAD9B,EAYoC,KAZpC,CAAA,CAAA,CAAb,EACL,UAACE,EAAD,EAAc;AAAX,EAAA,IAAAyC,SAAS,GAAAzC,EAAA,CAAAyC,SAAT,CAAA;AAAgB,EAAA,OAACA,SAAS,GAAG,MAAH,GAAY,MAAtB,CAAA;AAA6B,CAD3C,EAYE,UAACzC,EAAD,EAAc;AAAX,EAAA,IAAAyC,SAAS,GAAAzC,EAAA,CAAAyC,SAAT,CAAA;AAAgB,EAAA,OAACA,SAAS,GAAG,KAAH,GAAW,MAArB,CAAA;AAA4B,CAZjD,CAApB,CAAA;AAeA,IAAMC,cAAc,GAAG/C,MAAM,CAACoB,GAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,2BAAA;AAAA,EAAA,WAAA,EAAA,aAAA;AAAA,gLAAa,6FAKO,iBALpB,EAKE4B,QAAQ,CAACC,KAAT,GAAiB,CALnB,CAApB,CAAA;AASA,IAAMC,WAAW,GAAGlD,MAAM,CAACmD,IAAD,CAAT,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,wBAAA;AAAA,EAAA,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAeC,gBAAA,KAAAA,gBAAA,GAAAjD,oBAAA,CAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,CAAf,CAAjB,CAAA;AAEA,IAAMkD,MAAM,GAAGrD,MAAM,CAACsD,MAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,mBAAA;AAAA,EAAA,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAgBC,gBAAA,KAAAA,gBAAA,GAAApD,oBAAA,CAAA,CAAA,kHAAA,CAAA,EAAA,CAAA,kHAAA,CAAA,CAAA,CAAhB,CAAZ,CAAA;;AAqBA,IAAMqD,SAAS,GAAgD,UAACnD,EAAD,EAO9D;;;AANG,EAAA,IAAAiB,OAAO,aAAP;AAAA,MACAmC,OAAO,aADP;AAAA,MAEAC,QAAQ,cAFR;AAAA,MAGAjD,EAAA,GAAAJ,EAAA,CAAAsD,WAHA;AAAA,MAGAA,WAAW,GAAAlD,EAAA,KAAA,KAAA,CAAA,GAAG,uFAAH,GAA0FA,EAHrG;AAAA,MAIAmD,aAAa,GAAAvD,EAAA,CAAAuD,aAJb;AAAA,MAKApD,SAAS,GAAAH,EAAA,CAAAG,SALT,CAAA;AAOQ,EAAA,IAAAqD,OAAO,GAAKC,WAAW,EAAA,QAAvB,CAAA;;AACF,EAAA,IAAAC,EAAA,GAA0BC,QAAQ,CAAC,KAAD,CAAlC;AAAA,MAAC9B,QAAQ,GAAA6B,EAAA,CAAA,CAAA,CAAT;AAAA,MAAWE,WAAW,GAAAF,EAAA,CAAA,CAAA,CAAtB,CAAA;;AACA,EAAA,IAAAG,EAAA,GAAgCF,QAAQ,CAAC,KAAD,CAAxC;AAAA,MAACG,WAAW,GAAAD,EAAA,CAAA,CAAA,CAAZ;AAAA,MAAcE,cAAc,GAAAF,EAAA,CAAA,CAAA,CAA5B,CAAA;;AAEN,EAAMG,IAAAA,eAAe,GAAG,YAAA;AACpB,IAAMC,IAAAA,MAAM,GAAGC,SAAS,CACpBV,OAAO,CAACS,MAAR,CAAeE,IADK,CAAxB,CAAA;AAIA,IAAA,IAAMC,UAAU,GACZZ,OAAO,CAACS,MAAR,CAAeI,2BAAf,CAA2CC,MAA3C,CACI,UAACC,GAAD,EAAMC,OAAN,EAAa;;;AACT,MAAA,IAAI,CAACD,GAAL,EAAU,OAAOA,GAAP,CAAA;AACV,MAAI,IAAA,CAACN,MAAD,IAAW,EAACA,MAAM,KAAA,IAAN,IAAAA,MAAM,KAAA,KAAA,CAAN,GAAM,KAAA,CAAN,GAAAA,MAAM,CAAEQ,IAAR,CAAaC,KAAd,CAAf,EAAoC,OAAO,KAAP,CAF3B;;AAKTH,MAAAA,GAAG,GAAG,CAAC,EAAC,CAAAtE,EAAA,GAAA,CAAAD,EAAA,GAAAiE,MAAM,KAAN,IAAA,IAAAA,MAAM,WAAN,SAAA,GAAAA,MAAM,CAAEQ,IAAR,MAAc,IAAd,IAAczE,EAAA,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAcA,EAAA,CAAA0E,KAAd,UAAA,iBAAA,SAAA,MAAsBF,QAAvB,CAAP,CAAA;AACA,MAAA,OAAOD,GAAP,CAAA;AACH,KARL,EASI,IATJ,CADJ,CAAA;;AAaA,IAAA,IAAIH,UAAJ,EAAgB;AACZR,MAAAA,WAAW,CAAC,IAAD,CAAX,CAAA;AACAG,MAAAA,cAAc,CAAC,KAAD,CAAd,CAAA;AACH,KAHD,MAGO;AACHA,MAAAA,cAAc,CAAC,IAAD,CAAd,CAAA;AACH,KAAA;AACJ,GAxBD,CAAA;;AA0BA,EAAMY,IAAAA,wBAAwB,GAAG,YAAA;AAC7BZ,IAAAA,cAAc,CAAC,KAAD,CAAd,CAAA;AACH,GAFD,CAAA;;AAIA,EAAA,OACIzD,cAAA,CAAAC,aAAA,CAACO,IAAD,EAAK;AACDE,IAAAA,OAAO,EAAE,CAAC8C,WAAD,GAAeE,eAAf,GAAiCY,SADzC;AAED3D,IAAAA,OAAO,EAAEY,QAAQ,GAAG+C,SAAH,GAAe3D,OAF/B;AAGDY,IAAAA,QAAQ,EAAEA,QAHT;AAID1B,IAAAA,SAAS,EAAEA,SAAAA;AAJV,GAAL,EAMK,CAAC0B,QAAD,IAAa,CAACiC,WAAd,IACGxD,4BAAA,CAAC0B,aAAD,EAAc,IAAd,EACKqB,QAAQ,IAAI/C,cAAA,CAAAC,aAAA,CAACsE,IAAD,EAAM;AAAA3E,IAAAA,SAAS,EAAC,MAAA;AAAV,GAAN,CADjB,CAPR,EAWK2B,QAAQ,IACLvB,cAAA,CAAAC,aAAA,CAACyC,MAAD,EACI;AAAA8B,IAAAA,EAAE,EAAC,UAAH;AACAC,IAAAA,GAAG,EAAE,gCAAAtD,CAAAA,MAAA,CAAiC2B,OAAjC,EAAqD,aAArD,CADL;AAEA4B,IAAAA,KAAK,EAAC,yEAAA;AAFN,GADJ,CAZR,EAkBI1E,cAAA,CAAAC,aAAA,CAACgC,cAAD,EAAe;AAACE,IAAAA,SAAS,EAAEqB,WAAAA;AAAZ,GAAf,EACIxD,cAAA,CAAAC,aAAA,CAACmC,cAAD,EAAe,IAAf,EACKY,WAAW,IACRhD,cAAC,CAAAC,aAAD,CAACsC,WAAD;AAAaoC,IAAAA,UAAU,EAAA,IAAA;GAAvB,EAAyB3B,WAAzB,CAFR,EAIKC,aAAa,GACVA,aAAa,CAAC;AACV2B,IAAAA,WAAW,EAAEP,wBADH;AAEVQ,IAAAA,YAAY,GAAAlF,EAAA,GAAA,EAAA,EACRA,EAAA,CAACmF,SAAS,CAACC,OAAV,CAAkBC,SAAnB,CAAA,GAA+B,EADvB,EAEXrF,EAFW,CAAA;AAFF,GAAD,CADH,GAQVK,cAAC,CAAAC,aAAD,CAACgF,WAAW,CAACzE,IAAb,EACI;AAAA0E,IAAAA,EAAE,EAAC,QAAH;AACAP,IAAAA,UAAU,EAAA,IADV;AAEAjE,IAAAA,OAAO,EAAE2D,wBAFT;AAGAxE,IAAAA,SAAS,EAAEiF,SAAS,CAACC,OAAV,CAAkBI,KAAAA;AAH7B,GADJ,EAMInF,cAAC,CAAAC,aAAD,CAACgF,WAAW,CAACG,KAAb,EAEoB,IAFpB,EAEoB,wBAFpB,CANJ,CAZR,CADJ,CAlBJ,CADJ,CAAA;AA+CH,EAzFD;;;;;"}

package/esm/{Wrapper-38c912a6.js → Wrapper-f4a70e30.js}

@@ -1,9 +1,9 @@
-import { a as __makeTemplateObject, _ as __assign } from './ClockFilled-cff5900e.js';
+import { a as __makeTemplateObject, _ as __assign } from './ClockFilled-8784ddac.js';
 import * as React from 'react';
 import React__default, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { c as clampValue } from './clamp-12d37b65.js';
-import { m as mq, s as spacings, c as getGlobals, w as withRange } from './styles-eca3acc8.js';
+import { m as mq, s as spacings, c as getGlobals, w as withRange } from './styles-5f78e59d.js';
 import { c as concat } from './concat-ab3c66f2.js';
 
 var gridSettings = {
@@ -417,4 +417,4 @@ var Wrapper = function (_a) {
 var templateObject_1;
 
 export { Grid$1 as G, Section as S, Wrapper as W, getGridWidth as a, gridSettings as g, mapToBgMode as m, wrapperWhitespace as w };
-//# sourceMappingURL=Wrapper-38c912a6.js.map
+//# sourceMappingURL=Wrapper-f4a70e30.js.map