@blateral/b.kit 2.8.4 → 3.0.1

package/esm/{TableBlock-a65315ca.js → TableBlock-5aad5dd2.js}

@@ -1,15 +1,15 @@
-import { a as __makeTemplateObject } from './Filter-19220970.js';
-import * as React from 'react';
+import { a as __makeTemplateObject, _ as __assign, f as ButtonLeft, g as ButtonRight } from './ButtonLeft-a9a132f5.js';
 import React__default, { useRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { H as Heading, C as Copy } from './Copy-fd9e25c0.js';
-import { s as spacings, g as getColors } from './styles-1f1841ef.js';
-import { u as useLibTheme } from './LibThemeProvider-fb1d35ac.js';
+import { H as Heading, C as Copy } from './Copy-5a18e01f.js';
+import { s as spacings, g as getColors } from './styles-f3ba5bae.js';
+import { u as useLibTheme } from './LibThemeProvider-48cad3e8.js';
+import { L as Link } from './Link-d4a291af.js';
 
 var View$1 = styled.div.withConfig({
   displayName: "Title__View",
   componentId: "sc-1pyc768-0"
-})(templateObject_1$3 || (templateObject_1$3 = __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) {
+})(templateObject_1$1 || (templateObject_1$1 = __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) {
@@ -20,12 +20,16 @@ var SuperTitle = styled(Heading).withConfig({
   displayName: "Title__SuperTitle",
   componentId: "sc-1pyc768-1"
 })(templateObject_2$1 || (templateObject_2$1 = __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 TitleLink = styled(Link).withConfig({
+  displayName: "Title__TitleLink",
+  componentId: "sc-1pyc768-2"
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: block;\n    text-decoration: none;\n\n    &:focus-visible {\n        outline: none;\n\n        & > * {\n            outline: 2px dotted currentColor;\n            outline-offset: 2px;\n        }\n    }\n"], ["\n    display: block;\n    text-decoration: none;\n\n    &:focus-visible {\n        outline: none;\n\n        & > * {\n            outline: 2px dotted currentColor;\n            outline-offset: 2px;\n        }\n    }\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) {
+  componentId: "sc-1pyc768-3"
+})(templateObject_5$1 || (templateObject_5$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);
+  return maxLines && maxLines > 0 && css(templateObject_4$1 || (templateObject_4$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) {
@@ -35,6 +39,8 @@ var Title = function (_a) {
       superTitleAs = _a.superTitleAs,
       title = _a.title,
       titleAs = _a.titleAs,
+      titleLink = _a.titleLink,
+      titleId = _a.titleId,
       _c = _a.titleSize,
       titleSize = _c === void 0 ? 'heading-2' : _c,
       maxLines = _a.maxLines,
@@ -52,7 +58,10 @@ var Title = function (_a) {
     textColor: colorMode === 'onImage' ? colors.text.inverted : undefined,
     isInverted: colorMode === 'inverted',
     innerHTML: superTitle
-  }), title && React__default.createElement(MainTitle, {
+  }), title && React__default.createElement(React__default.Fragment, null, (titleLink === null || titleLink === void 0 ? void 0 : titleLink.href) ? React__default.createElement(TitleLink, __assign({
+    ariaLabel: title
+  }, titleLink), React__default.createElement(MainTitle, {
+    id: titleId,
     renderAs: titleAs || 'h2',
     size: titleSize === 'heading-1' ? 'heading-1' : 'heading-2',
     hyphens: titleHyphens,
@@ -60,94 +69,23 @@ var Title = function (_a) {
     isInverted: colorMode === 'inverted',
     innerHTML: title,
     maxLines: maxLines
-  }));
-};
-var templateObject_1$3, templateObject_2$1, templateObject_3$1, templateObject_4$1;
-
-var SVG$1 = styled.svg.withConfig({
-  displayName: "ButtonLeft__SVG",
-  componentId: "sc-1k7dd0m-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
-
-var ButtonLeft = function (_a) {
-  var id = _a.id,
-      className = _a.className,
-      _b = _a.ariaHidden,
-      ariaHidden = _b === void 0 ? true : _b;
-  return React.createElement(SVG$1, {
-    width: "48",
-    height: "48",
-    viewBox: "0 0 48 48",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    "aria-hidden": ariaHidden
-  }, React.createElement("circle", {
-    cx: "24",
-    cy: "24",
-    r: "24",
-    transform: "rotate(-180 24 24)",
-    fill: "#000",
-    fillOpacity: ".4"
-  }), React.createElement("g", {
-    clipPath: "url(#button-left-path-".concat(id, ")")
-  }, React.createElement("path", {
-    d: "m29.51 15.87-1.77-1.77-9.9 9.9 9.9 9.9 1.77-1.77L21.38 24l8.13-8.13Z",
-    fill: "#fff"
-  })), React.createElement("defs", null, React.createElement("clipPath", {
-    id: "button-left-path-".concat(id)
-  }, React.createElement("path", {
-    fill: "#fff",
-    d: "M36 36H12V12h24z"
-  }))));
-};
-var templateObject_1$2;
-
-var SVG = styled.svg.withConfig({
-  displayName: "ButtonRight__SVG",
-  componentId: "sc-ibg8un-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
-
-var ButtonRight = function (_a) {
-  var id = _a.id,
-      className = _a.className,
-      _b = _a.ariaHidden,
-      ariaHidden = _b === void 0 ? true : _b;
-  return React.createElement(SVG, {
-    width: "48",
-    height: "48",
-    viewBox: "0 0 48 48",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    "aria-hidden": ariaHidden
-  }, React.createElement("circle", {
-    cx: "24",
-    cy: "24",
-    r: "24",
-    fill: "#000",
-    fillOpacity: ".4"
-  }), React.createElement("g", {
-    clipPath: "url(#button-right-path-".concat(id, ")")
-  }, React.createElement("path", {
-    d: "m18.49 32.13 1.77 1.77 9.9-9.9-9.9-9.9-1.77 1.77L26.62 24l-8.13 8.13Z",
-    fill: "#fff"
-  })), React.createElement("defs", null, React.createElement("clipPath", {
-    id: "button-right-path-".concat(id)
-  }, React.createElement("path", {
-    fill: "#fff",
-    d: "M12 12h24v24H12z"
-  }))));
+  })) : React__default.createElement(MainTitle, {
+    id: titleId,
+    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$1;
+var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
 
 var View = styled.div.withConfig({
   displayName: "TableBlock__View",
   componentId: "sc-1n2im8m-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: grid;\n    position: relative;\n\n    &:focus {\n        outline: 1px dashed ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: grid;\n    position: relative;\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;
-});
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: grid;\n    position: relative;\n"], ["\n    display: grid;\n    position: relative;\n"])));
 var Caption = styled(Copy).withConfig({
   displayName: "TableBlock__Caption",
   componentId: "sc-1n2im8m-1"
@@ -155,9 +93,10 @@ var Caption = styled(Copy).withConfig({
 var TableContainer = styled.div.withConfig({
   displayName: "TableBlock__TableContainer",
   componentId: "sc-1n2im8m-2"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n\n    grid-column: 1;\n    grid-row: 1;\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    position: relative;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n\n    grid-column: 1;\n    grid-row: 1;\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;
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n\n    grid-column: 1;\n    grid-row: 1;\n    outline: none;\n\n    &:focus-visible {\n        outline: 2px solid\n            ", ";\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n        scrollbar-width: none;\n    }\n"], ["\n    position: relative;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n\n    grid-column: 1;\n    grid-row: 1;\n    outline: none;\n\n    &:focus-visible {\n        outline: 2px solid\n            ", ";\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n        scrollbar-width: none;\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
 });
 var TableBody = styled.table.withConfig({
   displayName: "TableBlock__TableBody",
@@ -192,7 +131,7 @@ var TableData = styled(Copy).withConfig({
 var ButtonContainer = styled.button.withConfig({
   displayName: "TableBlock__ButtonContainer",
   componentId: "sc-1n2im8m-6"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: sticky;\n    bottom: 40px;\n    opacity: ", ";\n    pointer-events: ", ";\n    border: none;\n    background: none;\n\n    grid-column: 1;\n    grid-row: 1;\n    align-self: end;\n    margin: ", "px ", "px;\n\n    cursor: ", ";\n    pointer-events: none;\n\n    transition: opacity ease-in-out 0.2s;\n\n    &:hover {\n        opacity: ", ";\n    }\n\n    & > * {\n        pointer-events: all;\n    }\n"], ["\n    position: sticky;\n    bottom: 40px;\n    opacity: ", ";\n    pointer-events: ", ";\n    border: none;\n    background: none;\n\n    grid-column: 1;\n    grid-row: 1;\n    align-self: end;\n    margin: ", "px ", "px;\n\n    cursor: ", ";\n    pointer-events: none;\n\n    transition: opacity ease-in-out 0.2s;\n\n    &:hover {\n        opacity: ", ";\n    }\n\n    & > * {\n        pointer-events: all;\n    }\n"])), function (_a) {
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: sticky;\n    bottom: 40px;\n    opacity: ", ";\n    pointer-events: ", ";\n    border: none;\n    background: none;\n\n    grid-column: 1;\n    grid-row: 1;\n    align-self: end;\n    margin: ", "px ", "px;\n\n    cursor: ", ";\n    pointer-events: none;\n\n    transition: opacity ease-in-out 0.2s;\n\n    &:hover {\n        opacity: ", ";\n    }\n\n    & > * {\n        pointer-events: all;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ", ";\n    }\n"], ["\n    position: sticky;\n    bottom: 40px;\n    opacity: ", ";\n    pointer-events: ", ";\n    border: none;\n    background: none;\n\n    grid-column: 1;\n    grid-row: 1;\n    align-self: end;\n    margin: ", "px ", "px;\n\n    cursor: ", ";\n    pointer-events: none;\n\n    transition: opacity ease-in-out 0.2s;\n\n    &:hover {\n        opacity: ", ";\n    }\n\n    & > * {\n        pointer-events: all;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ", ";\n    }\n"])), function (_a) {
   var isVisible = _a.isVisible;
   return isVisible ? 1 : 0;
 }, function (_a) {
@@ -204,6 +143,9 @@ var ButtonContainer = styled.button.withConfig({
 }, function (_a) {
   var isVisible = _a.isVisible;
   return isVisible ? 0.7 : 0;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
 });
 var ButtonRightContainer = styled(ButtonContainer).withConfig({
   displayName: "TableBlock__ButtonRightContainer",
@@ -223,16 +165,20 @@ var TableBlock = function (_a) {
       _c = _a.hasBack,
       hasBack = _c === void 0 ? false : _c,
       _d = _a.lastCol,
-      lastCol = _d === void 0 ? 'left' : _d;
+      lastCol = _d === void 0 ? 'left' : _d,
+      _e = _a.ariaControlLeft,
+      ariaControlLeft = _e === void 0 ? 'Scroll table to the left' : _e,
+      _f = _a.ariaControlRight,
+      ariaControlRight = _f === void 0 ? 'Scroll table to the right' : _f;
   var scrollRef = useRef(null);
 
-  var _e = React__default.useState(false),
-      showButtonRight = _e[0],
-      setShowButtonRight = _e[1];
+  var _g = React__default.useState(false),
+      showButtonRight = _g[0],
+      setShowButtonRight = _g[1];
 
-  var _f = React__default.useState(false),
-      showButtonLeft = _f[0],
-      setShowButtonLeft = _f[1];
+  var _h = React__default.useState(false),
+      showButtonLeft = _h[0],
+      setShowButtonLeft = _h[1];
 
   useEffect(function () {
     var scrollEl = scrollRef.current;
@@ -278,8 +224,9 @@ var TableBlock = function (_a) {
 
   var showButtons = rowTitle || row.length > 0;
   return React__default.createElement(View, null, React__default.createElement(TableContainer, {
-    tabIndex: 1,
-    ref: scrollRef
+    tabIndex: 0,
+    ref: scrollRef,
+    isInverted: isInverted
   }, React__default.createElement(TableBody, null, tableTitle && React__default.createElement(Caption, {
     renderAs: "caption",
     type: "copy-b",
@@ -289,6 +236,7 @@ var TableBlock = function (_a) {
       key: ii,
       type: "copy-b",
       renderAs: "th",
+      scope: "col",
       isInverted: !isInverted,
       alignRight: lastCol === 'right'
     }, item);
@@ -310,22 +258,22 @@ var TableBlock = function (_a) {
       marginTop: rowTitle && row.length > 1 ? '80px' : undefined
     },
     isVisible: showButtons && showButtonLeft,
-    onClick: handleLeftClick
-  }, React__default.createElement(ButtonLeft, {
-    id: "left"
-  })), React__default.createElement(ButtonRightContainer, {
+    tabIndex: !showButtons || !showButtonLeft ? -1 : undefined,
+    onClick: handleLeftClick,
+    "aria-label": ariaControlLeft
+  }, React__default.createElement(ButtonLeft, null)), React__default.createElement(ButtonRightContainer, {
     style: {
       marginTop: rowTitle && row.length > 1 ? '80px' : undefined
     },
     isVisible: showButtons && showButtonRight,
-    onClick: handleRightClick
-  }, React__default.createElement(ButtonRight, {
-    id: "right"
-  })));
+    tabIndex: !showButtons || !showButtonRight ? -1 : undefined,
+    onClick: handleRightClick,
+    "aria-label": ariaControlRight
+  }, React__default.createElement(ButtonRight, null)));
 };
 
 TableBlock.displayName = 'TableBlock';
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
 export { Title as T, TableBlock as a };
-//# sourceMappingURL=TableBlock-a65315ca.js.map
+//# sourceMappingURL=TableBlock-5aad5dd2.js.map

package/esm/TableBlock-5aad5dd2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBlock-5aad5dd2.js","sources":["../src/components/blocks/Title.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';\nimport Link, { LinkProps } from 'components/typography/Link';\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 TitleLink = styled(Link)`\n    display: block;\n    text-decoration: none;\n\n    &:focus-visible {\n        outline: none;\n\n        & > * {\n            outline: 2px dotted currentColor;\n            outline-offset: 2px;\n        }\n    }\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    /** Link properties for main title */\n    titleLink?: LinkProps;\n\n    /** ID for main title */\n    titleId?: string;\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    titleLink,\n    titleId,\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\n            {title && (\n                <>\n                    {titleLink?.href ? (\n                        <TitleLink ariaLabel={title} {...titleLink}>\n                            <MainTitle\n                                id={titleId}\n                                renderAs={titleAs || 'h2'}\n                                size={\n                                    titleSize === 'heading-1'\n                                        ? 'heading-1'\n                                        : 'heading-2'\n                                }\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                        </TitleLink>\n                    ) : (\n                        <MainTitle\n                            id={titleId}\n                            renderAs={titleAs || 'h2'}\n                            size={\n                                titleSize === 'heading-1'\n                                    ? 'heading-1'\n                                    : 'heading-2'\n                            }\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                </>\n            )}\n        </View>\n    );\n};\n\nexport default Title;\n","import * as Icons from 'components/base/icons/Icons';\nimport Copy from 'components/typography/Copy';\nimport React, { FC, useEffect, useRef } from 'react';\nimport styled from 'styled-components';\n\nimport { getColors as color, spacings } from 'utils/styles';\n\nconst View = styled.div`\n    display: grid;\n    position: relative;\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<{ isInverted?: boolean }>`\n    position: relative;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n\n    grid-column: 1;\n    grid-row: 1;\n    outline: none;\n\n    &:focus-visible {\n        outline: 2px solid\n            ${({ theme, isInverted }) =>\n                isInverted\n                    ? color(theme).primary.inverted\n                    : color(theme).primary.default};\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\nconst ButtonContainer = styled.button<{ isVisible?: boolean }>`\n    position: sticky;\n    bottom: 40px;\n    opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n    pointer-events: ${({ isVisible }) => (isVisible ? 'all' : 'none')};\n    border: none;\n    background: none;\n\n    grid-column: 1;\n    grid-row: 1;\n    align-self: end;\n    margin: ${spacings.spacer}px ${spacings.nudge * 2}px;\n\n    cursor: ${({ isVisible }) => (isVisible ? 'pointer' : 'default')};\n    pointer-events: none;\n\n    transition: opacity ease-in-out 0.2s;\n\n    &:hover {\n        opacity: ${({ isVisible }) => (isVisible ? 0.7 : 0)};\n    }\n\n    & > * {\n        pointer-events: all;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${({ theme }) => color(theme).primary.default};\n    }\n`;\n\nconst ButtonRightContainer = styled(ButtonContainer)`\n    float: right;\n    justify-self: end;\n`;\n\nconst ButtonLeftContainer = styled(ButtonContainer)`\n    float: left;\n    justify-self: start;\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    ariaControlLeft?: string;\n    ariaControlRight?: string;\n}\n\nconst TableBlock: FC<TableProps> = ({\n    row,\n    tableTitle,\n    rowTitle,\n    isInverted = false,\n    hasBack = false,\n    lastCol = 'left',\n    ariaControlLeft = 'Scroll table to the left',\n    ariaControlRight = 'Scroll table to the right',\n}) => {\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const [showButtonRight, setShowButtonRight] = React.useState(false);\n    const [showButtonLeft, setShowButtonLeft] = React.useState(false);\n\n    useEffect(() => {\n        const scrollEl = scrollRef.current;\n        if (!scrollEl) return;\n\n        const calcControls = () => {\n            if (scrollEl.scrollWidth > scrollEl.offsetWidth) {\n                setShowButtonLeft(scrollEl.scrollLeft > 0);\n                setShowButtonRight(\n                    scrollEl.scrollLeft + scrollEl.offsetWidth <\n                        scrollEl.scrollWidth - 1 // reduced by 1 pixel to prevent bug on some viewport widths\n                );\n            } else {\n                setShowButtonLeft(false);\n                setShowButtonRight(false);\n            }\n        };\n\n        calcControls();\n        window.addEventListener('resize', calcControls);\n        scrollEl.addEventListener('scroll', calcControls);\n\n        return () => {\n            window.removeEventListener('resize', calcControls);\n            scrollEl.removeEventListener('scroll', calcControls);\n        };\n    }, []);\n\n    const handleRightClick = () => {\n        const scrollEl = scrollRef.current;\n        if (!scrollEl) return;\n\n        scrollEl?.scrollBy({ left: scrollEl.offsetWidth, behavior: 'smooth' });\n    };\n\n    const handleLeftClick = () => {\n        const scrollEl = scrollRef.current;\n        if (!scrollEl) return;\n\n        scrollEl?.scrollBy({\n            left: scrollEl.offsetWidth * -1,\n            behavior: 'smooth',\n        });\n    };\n\n    const showButtons = rowTitle || row.length > 0;\n\n    return (\n        <View>\n            <TableContainer\n                tabIndex={0}\n                ref={scrollRef}\n                isInverted={isInverted}\n            >\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                                        scope=\"col\"\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            <ButtonLeftContainer\n                style={{\n                    marginTop: rowTitle && row.length > 1 ? '80px' : undefined,\n                }}\n                isVisible={showButtons && showButtonLeft}\n                tabIndex={!showButtons || !showButtonLeft ? -1 : undefined}\n                onClick={handleLeftClick}\n                aria-label={ariaControlLeft}\n            >\n                <Icons.ButtonLeft />\n            </ButtonLeftContainer>\n            <ButtonRightContainer\n                style={{\n                    marginTop: rowTitle && row.length > 1 ? '80px' : undefined,\n                }}\n                isVisible={showButtons && showButtonRight}\n                tabIndex={!showButtons || !showButtonRight ? -1 : undefined}\n                onClick={handleRightClick}\n                aria-label={ariaControlRight}\n            >\n                <Icons.ButtonRight />\n            </ButtonRightContainer>\n        </View>\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","TitleLink","Link","templateObject_3","MainTitle","templateObject_5","maxLines","css","Title","_b","colorMode","superTitle","superTitleAs","title","titleAs","titleLink","titleId","_c","titleSize","_d","titleHyphens","className","colors","useLibTheme","React","createElement","renderAs","size","textColor","text","inverted","undefined","isInverted","innerHTML","Fragment","href","ariaLabel","id","hyphens","Caption","Copy","TableContainer","theme","color","primary","default","TableBody","table","TableHead","elementBg","dark","medium","spacer","alignRight","TableData","templateObject_6","hasBack","light","ButtonContainer","button","templateObject_7","isVisible","ButtonRightContainer","templateObject_8","ButtonLeftContainer","templateObject_9","TableBlock","row","tableTitle","rowTitle","lastCol","_e","ariaControlLeft","_f","ariaControlRight","scrollRef","useRef","_g","useState","showButtonRight","setShowButtonRight","_h","showButtonLeft","setShowButtonLeft","useEffect","scrollEl","current","calcControls","scrollWidth","offsetWidth","scrollLeft","window","addEventListener","removeEventListener","handleRightClick","scrollBy","left","behavior","handleLeftClick","showButtons","length","tabIndex","ref","type","map","item","ii","key","scope","i","cols","itemText","style","marginTop","onClick","Icons","displayName"],"mappings":"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"}

package/esm/{Tag-217cd89b.js → Tag-f3f23d9b.js}

@@ -1,14 +1,14 @@
-import { a as __makeTemplateObject, _ as __assign } from './Filter-19220970.js';
+import { a as __makeTemplateObject, _ as __assign } from './ButtonLeft-a9a132f5.js';
 import React__default from 'react';
 import styled, { css } from 'styled-components';
-import { c as copyStyle } from './Copy-fd9e25c0.js';
-import { L as Link } from './Link-6067a27f.js';
-import { s as spacings, g as getColors } from './styles-1f1841ef.js';
+import { c as copyStyle } from './Copy-5a18e01f.js';
+import { L as Link } from './Link-d4a291af.js';
+import { s as spacings, g as getColors } from './styles-f3ba5bae.js';
 
 var View = styled(Link).withConfig({
   displayName: "Tag__View",
   componentId: "sc-1mw8uhi-0"
-})(templateObject_2 || (templateObject_2 = __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) {
+})(templateObject_2 || (templateObject_2 = __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-visible {\n        outline: 2px solid\n            ", ";\n        outline-offset: 2px;\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-visible {\n        outline: 2px solid\n            ", ";\n        outline-offset: 2px;\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) {
@@ -31,12 +31,6 @@ var View = styled(Link).withConfig({
   var isClickable = _a.isClickable,
       isInverted = _a.isInverted;
   return isClickable && css(templateObject_1 || (templateObject_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;
@@ -50,7 +44,8 @@ var Tag = function (_a) {
       isActive = _a.isActive,
       onClick = _a.onClick,
       className = _a.className,
-      children = _a.children;
+      children = _a.children,
+      ariaLabel = _a.ariaLabel;
   var tag = (link === null || link === void 0 ? void 0 : link.href) ? 'a' : onClick ? 'button' : 'span';
   return React__default.createElement(View, __assign({
     as: tag,
@@ -58,10 +53,11 @@ var Tag = function (_a) {
     isActive: isActive,
     onClick: onClick,
     isClickable: !!onClick || !!(link && link.href),
+    "aria-label": ariaLabel || name,
     className: className
   }, link), name || children);
 };
 var templateObject_1, templateObject_2;
 
 export { Tag as T };
-//# sourceMappingURL=Tag-217cd89b.js.map
+//# sourceMappingURL=Tag-f3f23d9b.js.map

package/esm/Tag-f3f23d9b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag-f3f23d9b.js","sources":["../src/components/blocks/Tag.tsx"],"sourcesContent":["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 as color, 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-visible {\n        outline: 2px solid\n            ${({ isInverted, theme }) =>\n                isInverted\n                    ? color(theme).primary.inverted\n                    : color(theme).primary.default};\n        outline-offset: 2px;\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        ariaLabel?: string;\n    }\n> = ({\n    name,\n    link,\n    isInverted,\n    isActive,\n    onClick,\n    className,\n    children,\n    ariaLabel,\n}) => {\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            aria-label={ariaLabel || name}\n            className={className}\n            {...link}\n        >\n            {name || children}\n        </View>\n    );\n};\n\nexport default Tag;\n"],"names":["View","styled","Link","templateObject_2","__makeTemplateObject","_a","isInverted","spacings","nudge","copyStyle","isActive","isClickable","css","templateObject_1","theme","color","primary","inverted","default","Tag","name","link","onClick","className","children","ariaLabel","tag","href","React","__assign","as"],"mappings":";;;;;;;AAOA,IAAMA,IAAI,GAAGC,MAAM,CAACC,IAAD,CAAT,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,WAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAeC,CAAAA,CAAAA,gBAAA,KAAAA,gBAAA,GAAAC,oBAAA,CAAA,CAAA,+DAAA,EAAA,iDAAA,EAAA,0NAAA,EAAA,mEAAA,EAAA,oBAAA,EAAA,4GAAA,EAAA,WAAA,EAAA,qEAAA,EAAA,8IAAA,CAAA,EAAA,CAIvB,+DAJuB,EAOyC,iDAPzC,EAUQ,0NAVR,EAsBO,mEAtBP,EA4BmC,oBA5BnC,EAmChB,4GAnCgB,EAwC+C,WAxC/C,EAmDhB,qEAnDgB,EA0DyB,8IA1DzB,CAAA,CAAA,CAAf,EAOA,UAACC,EAAD,EAAe;AAAZ,EAAA,IAAAC,UAAU,GAAAD,EAAA,CAAAC,UAAV,CAAA;AAAiB,EAAA,OAACA,UAAU,GAAG,SAAH,GAAe,SAA1B,CAAA;AAAoC,CAPxD,EAUSC,QAAQ,CAACC,KAVlB,EAsBJC,SAAS,CAAC,MAAD,EAAS,OAAT,CAtBL,EA2BkB,UAACJ,EAAD,EAAyB;MAAtBK,QAAQ,GAAAL,EAAA,CAAAK;MAAEJ,UAAU,GAAAD,EAAA,CAAAC;AACvC,EAAA,OAAAI,QAAQ,KAAKJ,UAAU,GAAG,SAAH,GAAe,SAA9B,CAAR,CAAA;AAAgD,CA5BlD,EA6BO,UAACD,EAAD,EAAyB;MAAtBK,QAAQ,GAAAL,EAAA,CAAAK;MAAEJ,UAAU,GAAAD,EAAA,CAAAC;;AAC5B,EAAA,IAAII,QAAJ,EAAc;AACV,IAAA,OAAOJ,UAAU,GAAG,SAAH,GAAe,OAAhC,CAAA;AACH,GAFD,MAEO;AACH,IAAA,OAAOA,UAAU,GAAG,SAAH,GAAe,SAAhC,CAAA;AACH,GAAA;AACJ,CAnCC,EAwCI,UAACD,EAAD,EAAgB;AAAb,EAAA,IAAAM,WAAW,GAAAN,EAAA,CAAAM,WAAX,CAAA;AAAkB,EAAA,OAACA,WAAW,GAAG,SAAH,GAAe,SAA3B,CAAA;AAAqC,CAxC9D,EA0CJ,UAACN,EAAD,EAA4B;MAAzBM,WAAW,GAAAN,EAAA,CAAAM;MAAEL,UAAU,GAAAD,EAAA,CAAAC;AACxB,EAAA,OAAAK,WAAW,IACXC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAT,oBAAA,CAAA,CAAA,+HAAA,EAAA,gCAAA,EAAA,+CAAA,CAAA,EAAA,CAAA,+HAAA,EAG+D,gCAH/D,EAIkD,+CAJlD,CAAA,CAAA,CAAA,EAG6BE,UAAU,GAAG,SAAH,GAAe,SAHtD,EAIkBA,UAAU,GAAG,SAAH,GAAe,OAJ3C,CADH,CAAA;AAQC,CAnDC,EAuDI,UAACD,EAAD,EAAsB;MAAnBC,UAAU,GAAAD,EAAA,CAAAC;MAAEQ,KAAK,GAAAT,EAAA,CAAAS;AAClB,EAAA,OAAAR,UAAU,GACJS,SAAK,CAACD,KAAD,CAAL,CAAaE,OAAb,CAAqBC,QADjB,GAEJF,SAAK,CAACD,KAAD,CAAL,CAAaE,OAAb,CAAqBE,OAF3B,CAAA;AAEkC,CA1DxC,CAAV,CAAA;;AAyEA,IAAMC,GAAG,GAcL,UAACd,EAAD,EASH;MARGe,IAAI,GAAAf,EAAA,CAAAe;MACJC,IAAI,GAAAhB,EAAA,CAAAgB;MACJf,UAAU,GAAAD,EAAA,CAAAC;MACVI,QAAQ,GAAAL,EAAA,CAAAK;MACRY,OAAO,GAAAjB,EAAA,CAAAiB;MACPC,SAAS,GAAAlB,EAAA,CAAAkB;MACTC,QAAQ,GAAAnB,EAAA,CAAAmB;MACRC,SAAS,GAAApB,EAAA,CAAAoB;AAET,EAAMC,IAAAA,GAAG,GAAG,CAAAL,IAAI,KAAA,IAAJ,IAAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAAA,IAAI,CAAEM,IAAN,IAAa,GAAb,GAAmBL,OAAO,GAAG,QAAH,GAAc,MAApD,CAAA;AAEA,EAAA,OACIM,4BAAA,CAAC5B,IAAD,EAAK6B,QAAA,CAAA;AACDC,IAAAA,EAAE,EAAEJ,GADH;AAEDpB,IAAAA,UAAU,EAAEA,UAFX;AAGDI,IAAAA,QAAQ,EAAEA,QAHT;AAIDY,IAAAA,OAAO,EAAEA,OAJR;AAKDX,IAAAA,WAAW,EAAE,CAAC,CAACW,OAAF,IAAa,CAAC,EAAED,IAAI,IAAIA,IAAI,CAACM,IAAf,CAL1B;AAMW,IAAAF,YAAAA,EAAAA,SAAS,IAAIL,IANxB;AAODG,IAAAA,SAAS,EAAEA,SAAAA;AAPV,GAAA,EAQGF,IARH,CAAL,EAUKD,IAAI,IAAII,QAVb,CADJ,CAAA;AAcH,EAxCD;;;;;"}