@blateral/b.kit 2.3.0 → 2.3.2-beta.1.0

package/esm/Pointer-2276308c.js

@@ -0,0 +1,111 @@
+import { a as __makeTemplateObject, d as __rest, _ as __assign } from './ClockFilled-6bae80dc.js';
+import * as React from 'react';
+import styled from 'styled-components';
+import { a as getFonts, w as withRange, g as getColors, s as spacings } from './styles-c387bdc6.js';
+
+var View = styled.a.withConfig({
+  displayName: "Pointer__View",
+  componentId: "sc-1jne5k6-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0.2em 0;\n\n    display: inline-block;\n    display: inline-flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n\n    font-family: ", ";\n    ", "\n    font-weight: ", ";\n    text-align: center;\n    text-decoration: ", ";\n    line-height: 1;\n    letter-spacing: ", ";\n\n    perspective: 1000;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-perspective: 1000;\n    -moz-osx-font-smoothing: grayscale;\n    will-change: auto;\n\n    outline-color: ", ";\n    border: none;\n    cursor: pointer;\n\n    pointer-events: ", ";\n\n    background: none;\n    color: ", ";\n\n    & > * {\n        color: ", ";\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n        padding-right: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        opacity: 0.6;\n    }\n"], ["\n    padding: 0.2em 0;\n\n    display: inline-block;\n    display: inline-flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n\n    font-family: ", ";\n    ", "\n    font-weight: ", ";\n    text-align: center;\n    text-decoration: ", ";\n    line-height: 1;\n    letter-spacing: ", ";\n\n    perspective: 1000;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-perspective: 1000;\n    -moz-osx-font-smoothing: grayscale;\n    will-change: auto;\n\n    outline-color: ", ";\n    border: none;\n    cursor: pointer;\n\n    pointer-events: ", ";\n\n    background: none;\n    color: ", ";\n\n    & > * {\n        color: ", ";\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n        padding-right: ", "px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ", ";\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        opacity: 0.6;\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).copy.medium.family;
+}, function (_a) {
+  var theme = _a.theme;
+  return withRange(getFonts(theme).copy.medium.size, 'font-size');
+}, function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).copy.medium.weight;
+}, function (_a) {
+  var textDecoration = _a.textDecoration;
+  return textDecoration ? textDecoration : 'underline';
+}, function (_a) {
+  var theme = _a.theme;
+  return getFonts(theme).copy.medium.letterSpacing;
+}, function (_a) {
+  var theme = _a.theme,
+      inverted = _a.inverted;
+  return inverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+}, function (_a) {
+  var disable = _a.disable;
+  return disable ? 'none' : 'all';
+}, function (_a) {
+  var theme = _a.theme,
+      inverted = _a.inverted,
+      disable = _a.disable;
+  return disable ? getColors(theme).elementBg.medium : inverted ? getColors(theme).text.copyInverted : getColors(theme).text.copy;
+}, function (_a) {
+  var theme = _a.theme,
+      inverted = _a.inverted,
+      disable = _a.disable;
+  return disable ? getColors(theme).elementBg.medium : inverted ? getColors(theme).text.copyInverted : getColors(theme).text.copy;
+}, spacings.nudge, spacings.nudge, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
+});
+var Pointer = React.forwardRef(function (_a, ref) {
+  var as = _a.as,
+      isInverted = _a.isInverted,
+      isDisabled = _a.isDisabled,
+      onClick = _a.onClick,
+      className = _a.className,
+      textDecoration = _a.textDecoration,
+      children = _a.children,
+      rest = __rest(_a, ["as", "isInverted", "isDisabled", "onClick", "className", "textDecoration", "children"]);
+
+  if (as === 'button') {
+    return React.createElement(View, __assign({
+      textDecoration: textDecoration,
+      ref: ref,
+      as: as,
+      inverted: isInverted,
+      disable: isDisabled,
+      onClick: onClick,
+      className: className
+    }, rest), children);
+  } else {
+    return React.createElement(View, __assign({
+      textDecoration: textDecoration,
+      ref: ref,
+      as: as,
+      href: rest.href,
+      "data-disabled": isDisabled,
+      "data-inverted": isInverted,
+      target: rest.isExternal ? '_blank' : undefined,
+      rel: rest.isExternal ? 'noopener noreferrer' : undefined,
+      inverted: isInverted,
+      disable: isDisabled,
+      onClick: onClick,
+      className: className
+    }, rest), children);
+  }
+});
+Pointer.displayName = 'Button';
+var Icon = styled.div.withConfig({
+  displayName: "Pointer__Icon",
+  componentId: "sc-1jne5k6-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    color: ", ";\n\n    transition: transform 0.2s ease-in-out;\n\n    ", "[data-inverted='true'] > & {\n        color: ", ";\n    }\n\n    ", "[data-disabled='true'] > & {\n        color: ", ";\n    }\n\n    ", ":hover > & {\n        transform: translateX(3px);\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    color: ", ";\n\n    transition: transform 0.2s ease-in-out;\n\n    ", "[data-inverted='true'] > & {\n        color: ", ";\n    }\n\n    ", "[data-disabled='true'] > & {\n        color: ", ";\n    }\n\n    ", ":hover > & {\n        transform: translateX(3px);\n    }\n"])), function (_a) {
+  var theme = _a.theme,
+      iconColor = _a.iconColor;
+  return iconColor || getColors(theme).text.copy;
+}, View, function (_a) {
+  var theme = _a.theme,
+      iconColor = _a.iconColor;
+  return iconColor || getColors(theme).text.copyInverted;
+}, View, function (_a) {
+  var theme = _a.theme,
+      iconColor = _a.iconColor;
+  return iconColor || getColors(theme).elementBg.medium;
+}, View);
+var Label = styled.span.withConfig({
+  displayName: "Pointer__Label",
+  componentId: "sc-1jne5k6-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: inline-block;\n"], ["\n    display: inline-block;\n"])));
+var Pointer$1 = {
+  View: Pointer,
+  Label: Label,
+  Icon: Icon
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { Pointer$1 as P };
+//# sourceMappingURL=Pointer-2276308c.js.map

package/esm/Pointer-2276308c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pointer-2276308c.js","sources":["../src/components/buttons/Pointer.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {\n    getColors as color,\n    getFonts as font,\n    spacings,\n    withRange,\n} from 'utils/styles';\n\nconst View = styled.a<{\n    inverted?: boolean;\n    disable?: boolean;\n    textDecoration?: 'none' | 'underline';\n}>`\n    padding: 0.2em 0;\n\n    display: inline-block;\n    display: inline-flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n\n    font-family: ${({ theme }) => font(theme).copy.medium.family};\n    ${({ theme }) => withRange(font(theme).copy.medium.size, 'font-size')}\n    font-weight: ${({ theme }) => font(theme).copy.medium.weight};\n    text-align: center;\n    text-decoration: ${({ textDecoration }) =>\n        textDecoration ? textDecoration : 'underline'};\n    line-height: 1;\n    letter-spacing: ${({ theme }) => font(theme).copy.medium.letterSpacing};\n\n    perspective: 1000;\n    -webkit-font-smoothing: subpixel-antialiased;\n    -webkit-perspective: 1000;\n    -moz-osx-font-smoothing: grayscale;\n    will-change: auto;\n\n    outline-color: ${({ theme, inverted }) =>\n        inverted\n            ? color(theme).primary.inverted\n            : color(theme).primary.default};\n    border: none;\n    cursor: pointer;\n\n    pointer-events: ${({ disable }) => (disable ? 'none' : 'all')};\n\n    background: none;\n    color: ${({ theme, inverted, disable }) =>\n        disable\n            ? color(theme).elementBg.medium\n            : inverted\n            ? color(theme).text.copyInverted\n            : color(theme).text.copy};\n\n    & > * {\n        color: ${({ theme, inverted, disable }) =>\n            disable\n                ? color(theme).elementBg.medium\n                : inverted\n                ? color(theme).text.copyInverted\n                : color(theme).text.copy};\n    }\n\n    & > * + * {\n        margin-left: ${spacings.nudge}px;\n    }\n\n    & > :not(:last-child) {\n        padding-right: ${spacings.nudge}px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            opacity: 0.6;\n        }\n    }\n\n    &:focus {\n        outline: 2px solid ${({ theme }) => color(theme).primary.default};\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &:active {\n        opacity: 0.6;\n    }\n`;\n\ninterface Props {\n    isInverted?: boolean;\n    isDisabled?: boolean;\n    onClick?: () => void;\n    textDecoration?: 'none' | 'underline';\n    className?: string;\n    children?: React.ReactNode;\n}\n\nexport type BtnProps = Props & {\n    as?: 'button';\n};\n\nexport type LinkProps = Props & {\n    as?: 'a';\n    href?: string;\n    isExternal?: boolean;\n};\n\nconst Pointer: React.FC<BtnProps | LinkProps> = React.forwardRef(\n    (\n        {\n            as,\n            isInverted,\n            isDisabled,\n            onClick,\n            className,\n            textDecoration,\n            children,\n            ...rest\n        },\n        ref\n    ) => {\n        if (as === 'button') {\n            return (\n                <View\n                    textDecoration={textDecoration}\n                    ref={ref}\n                    as={as as any}\n                    inverted={isInverted}\n                    disable={isDisabled}\n                    onClick={onClick}\n                    className={className}\n                    {...rest}\n                >\n                    {children}\n                </View>\n            );\n        } else {\n            return (\n                <View\n                    textDecoration={textDecoration}\n                    ref={ref}\n                    as={as as any}\n                    href={(rest as LinkProps).href}\n                    data-disabled={isDisabled}\n                    data-inverted={isInverted}\n                    target={\n                        (rest as LinkProps).isExternal ? '_blank' : undefined\n                    }\n                    rel={\n                        (rest as LinkProps).isExternal\n                            ? 'noopener noreferrer'\n                            : undefined\n                    }\n                    inverted={isInverted}\n                    disable={isDisabled}\n                    onClick={onClick}\n                    className={className}\n                    {...rest}\n                >\n                    {children}\n                </View>\n            );\n        }\n    }\n);\n\nPointer.displayName = 'Button';\n\nconst Icon = styled.div<{ iconColor?: string }>`\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    color: ${({ theme, iconColor }) => iconColor || color(theme).text.copy};\n\n    transition: transform 0.2s ease-in-out;\n\n    ${View}[data-inverted='true'] > & {\n        color: ${({ theme, iconColor }) =>\n            iconColor || color(theme).text.copyInverted};\n    }\n\n    ${View}[data-disabled='true'] > & {\n        color: ${({ theme, iconColor }) =>\n            iconColor || color(theme).elementBg.medium};\n    }\n\n    ${View}:hover > & {\n        transform: translateX(3px);\n    }\n`;\n\nconst Label = styled.span`\n    display: inline-block;\n`;\n\nexport default { View: Pointer, Label: Label, Icon: Icon };\n"],"names":["View","styled","a","templateObject_1","__makeTemplateObject","_a","theme","font","copy","medium","family","withRange","size","weight","textDecoration","letterSpacing","inverted","color","primary","default","disable","elementBg","text","copyInverted","spacings","nudge","Pointer","React","forwardRef","ref","as","isInverted","isDisabled","onClick","className","children","rest","__rest","createElement","__assign","href","target","isExternal","undefined","rel","displayName","Icon","div","templateObject_2","iconColor","Label","span","templateObject_3"],"mappings":"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"}

package/esm/SocialList-f7864b30.js

@@ -0,0 +1,61 @@
+import { a as __makeTemplateObject } from './ClockFilled-6bae80dc.js';
+import React__default from 'react';
+import styled from 'styled-components';
+import { s as spacings, g as getColors } from './styles-c387bdc6.js';
+import { L as Link } from './Link-bccdb082.js';
+import { C as Copy } from './Copy-bca0854c.js';
+
+var View = styled.div.withConfig({
+  displayName: "SocialList__View",
+  componentId: "sc-w600sr-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    & > * {\n        margin: 0;\n        padding: 0;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"], ["\n    & > * {\n        margin: 0;\n        padding: 0;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n"])), spacings.nudge * 2);
+var List = styled.ul.withConfig({
+  displayName: "SocialList__List",
+  componentId: "sc-w600sr-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    list-style: none;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    list-style: none;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 3);
+var IconContainer = styled.li.withConfig({
+  displayName: "SocialList__IconContainer",
+  componentId: "sc-w600sr-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    padding: 0;\n"], ["\n    display: block;\n    padding: 0;\n"])));
+var StyledLink = styled(Link).withConfig({
+  displayName: "SocialList__StyledLink",
+  componentId: "sc-w600sr-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: block;\n    padding: ", "px ", "px;\n    margin: -", "px -", "px;\n    color: ", ";\n    outline: none;\n\n    transition: all ease-in-out 0.2s;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus > * {\n        outline: 2px solid\n            ", ";\n        outline-offset: 2px;\n    }\n\n    &:focus:not(:focus-visible) > * {\n        outline: none;\n    }\n"], ["\n    display: block;\n    padding: ", "px ", "px;\n    margin: -", "px -", "px;\n    color: ", ";\n    outline: none;\n\n    transition: all ease-in-out 0.2s;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus > * {\n        outline: 2px solid\n            ", ";\n        outline-offset: 2px;\n    }\n\n    &:focus:not(:focus-visible) > * {\n        outline: none;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 1.5, spacings.nudge * 2, spacings.nudge * 1.5, 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).primary.inverted : getColors(theme).primary.default;
+});
+
+var SocialList = function (_a) {
+  var _b = _a.isInverted,
+      isInverted = _b === void 0 ? false : _b,
+      title = _a.title,
+      items = _a.items,
+      className = _a.className;
+  return React__default.createElement(View, {
+    className: className
+  }, title && React__default.createElement(Copy, {
+    type: "copy-b",
+    isInverted: isInverted
+  }, title), React__default.createElement(List, null, items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+    return React__default.createElement(IconContainer, {
+      key: i
+    }, React__default.createElement(StyledLink, {
+      isExternal: true,
+      href: item.href,
+      isInverted: isInverted,
+      ariaLabel: item.title || "social_".concat(i)
+    }, item.icon && item.icon({
+      isInverted: isInverted,
+      title: item.title
+    })));
+  })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { SocialList as S };
+//# sourceMappingURL=SocialList-f7864b30.js.map

package/esm/SocialList-f7864b30.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocialList-f7864b30.js","sources":["../src/components/blocks/SocialList.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport styled from 'styled-components';\n\nimport { getColors as color, spacings } from 'utils/styles';\nimport Link from 'components/typography/Link';\nimport Copy from 'components/typography/Copy';\n\nconst View = styled.div`\n    & > * {\n        margin: 0;\n        padding: 0;\n    }\n\n    & > * + * {\n        margin-top: ${spacings.nudge * 2}px;\n    }\n`;\n\nconst List = styled.ul`\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    list-style: none;\n\n    & > * + * {\n        margin-left: ${spacings.nudge * 3}px;\n    }\n`;\n\nconst IconContainer = styled.li`\n    display: block;\n    padding: 0;\n`;\n\nconst StyledLink = styled(Link)`\n    display: block;\n    padding: ${spacings.nudge * 2}px ${spacings.nudge * 1.5}px;\n    margin: -${spacings.nudge * 2}px -${spacings.nudge * 1.5}px;\n    color: ${({ theme, isInverted }) =>\n        isInverted ? color(theme).text.inverted : color(theme).text.default};\n    outline: none;\n\n    transition: all ease-in-out 0.2s;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus > * {\n        outline: 2px solid\n            ${({ theme, isInverted }) =>\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    }\n`;\n\nexport interface SocialItem {\n    href: string;\n    icon: (props: { isInverted?: boolean; title?: string }) => React.ReactNode;\n    title?: string;\n}\n\nconst SocialList: FC<{\n    isInverted?: boolean;\n    title?: string;\n    items?: SocialItem[];\n    className?: string;\n}> = ({ isInverted = false, title, items, className }) => {\n    return (\n        <View className={className}>\n            {title && (\n                <Copy type=\"copy-b\" isInverted={isInverted}>\n                    {title}\n                </Copy>\n            )}\n            <List>\n                {items?.map((item, i) => (\n                    <IconContainer key={i}>\n                        <StyledLink\n                            isExternal\n                            href={item.href}\n                            isInverted={isInverted}\n                            ariaLabel={item.title || `social_${i}`}\n                        >\n                            {item.icon &&\n                                item.icon({ isInverted, title: item.title })}\n                        </StyledLink>\n                    </IconContainer>\n                ))}\n            </List>\n        </View>\n    );\n};\n\nexport default SocialList;\n"],"names":["View","styled","div","spacings","nudge","List","ul","IconContainer","li","templateObject_3","__makeTemplateObject","StyledLink","Link","templateObject_4","_a","theme","isInverted","color","text","inverted","default","primary","SocialList","_b","title","items","className","React","createElement","Copy","type","map","item","i","key","isExternal","href","ariaLabel","concat","icon"],"mappings":"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"}

package/esm/TableBlock-014f9821.js

@@ -0,0 +1,159 @@
+import { a as __makeTemplateObject } from './ClockFilled-6bae80dc.js';
+import React__default, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { H as Heading, C as Copy } from './Copy-bca0854c.js';
+import { s as spacings, g as getColors } from './styles-c387bdc6.js';
+import { u as useLibTheme } from './LibThemeProvider-acf2e2bb.js';
+
+var View$1 = styled.div.withConfig({
+  displayName: "Title__View",
+  componentId: "sc-1pyc768-0"
+})(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) {
+  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$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 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$1, {
+    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$1, templateObject_2$1, templateObject_3$1, templateObject_4$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, TableBlock as a };
+//# sourceMappingURL=TableBlock-014f9821.js.map

package/esm/TableBlock-014f9821.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBlock-014f9821.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';\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 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","theme","color","primary","default","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":";;;;;;;AAOA,IAAMA,MAAI,GAAGC,MAAM,CAACC,GAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,aAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAuCC,kBAAA,KAAAA,kBAAA,GAAAC,oBAAA,CAAA,CAAA,yCAAA,EAAA,iBAAA,EAAA,4CAAA,EAAA,cAAA,CAAA,EAAA,CAAA,yCAAA,EAEqB,iBAFrB,EAGO,4CAHP,EAMT,cANS,CAAA,CAAA,CAAvC,EAEQ,UAACC,EAAD,EAAe;AAAZ,EAAA,IAAAC,UAAU,GAAAD,EAAA,CAAAC,UAAV,CAAA;AAAiB,EAAA,OAACA,UAAU,GAAG,QAAH,GAAc,MAAzB,CAAA;AAAgC,CAF5D,EAGI,UAACD,EAAD,EAAe;AAAZ,EAAA,IAAAC,UAAU,GAAAD,EAAA,CAAAC,UAAV,CAAA;AAAiB,EAAAA,OAAAA,UAAU,IAAI,QAAd,CAAA;AAAsB,CAH9C,EAMYC,QAAQ,CAACC,KAAT,GAAiB,CAN7B,CAAV,CAAA;AAUA,IAAMC,UAAU,GAAGR,MAAM,CAACS,OAAD,CAAT,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,mBAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAkBC,kBAAA,KAAAA,kBAAA,GAAAP,oBAAA,CAAA,CAAA,sPAAA,CAAA,EAAA,CAAA,sPAAA,CAAA,CAAA,CAAlB,CAAhB,CAAA;AAYA,IAAMQ,SAAS,GAAGX,MAAM,CAACS,OAAD,CAAT,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,kBAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAyCG,CAAAA,CAAAA,kBAAA,KAAAA,kBAAA,GAAAT,oBAAA,CAAA,CAAA,+BAAA,EAAA,IAAA,CAAA,EAAA,CAAA,+BAAA,EAa/C,IAb+C,CAAA,CAAA,CAAzC,EAGT,UAACC,EAAD,EAAa;AAAV,EAAA,IAAAS,QAAQ,GAAAT,EAAA,CAAAS,QAAR,CAAA;AACD,EAAA,OAAAA,QAAQ,IACRA,QAAQ,GAAG,CADX,IAEAC,GAAG,0UAAA,8IAI+B,6DACR,2DALvB,EAIuBD,QAJvB,EAKeA,QALf,CAFH,CAAA;AASC,CAbM,CAAf,CAAA;;AAkBA,IAAME,KAAK,GAgCN,UAACX,EAAD,EAWJ;AAVG,EAAA,IAAAY,EAAA,GAAAZ,EAAA,CAAAa,SAAA;AAAA,MAAAA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,SAAH,GAAYA,EAArB;AAAA,MACAE,UAAU,GAAAd,EAAA,CAAAc,UADV;AAAA,MAEAC,YAAY,kBAFZ;AAAA,MAGAC,KAAK,WAHL;AAAA,MAIAC,OAAO,aAJP;AAAA,MAKAC,EAAA,GAAAlB,EAAA,CAAAmB,SALA;AAAA,MAKAA,SAAS,mBAAG,cAAWD,EALvB;AAAA,MAMAT,QAAQ,GAAAT,EAAA,CAAAS,QANR;AAAA,MAOAW,EAAkB,GAAApB,EAAA,CAAAC,UAPlB;AAAA,MAOAA,UAAU,GAAAmB,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQA,EAPlB;AAAA,MAQAC,YAAY,GAAArB,EAAA,CAAAqB,YARZ;AAAA,MASAC,SAAS,GAAAtB,EAAA,CAAAsB,SATT,CAAA;AAWQ,EAAA,IAAAC,MAAM,GAAKC,WAAW,EAAA,OAAtB,CAAA;AAER,EAAA,OACIC,cAAC,CAAAC,aAAD,CAAC/B,MAAD,EAAM;AAAAM,IAAAA,UAAU,EAAEA,UAAZ;AAAwBqB,IAAAA,SAAS,EAAEA,SAAAA;AAAnC,GAAN,EACKR,UAAU,IACPW,cAAA,CAAAC,aAAA,CAACtB,UAAD,EACI;AAAAuB,IAAAA,QAAQ,EAAEZ,YAAY,IAAI,KAA1B;AACAa,IAAAA,IAAI,EAAC,OADL;AAEAC,IAAAA,SAAS,EACLhB,SAAS,KAAK,SAAd,GACMU,MAAM,CAACO,IAAP,CAAYC,QADlB,GAEMC,SALV;AAOAC,IAAAA,UAAU,EAAEpB,SAAS,KAAK,UAP1B;AAQAqB,IAAAA,SAAS,EAAEpB,UAAAA;AARX,GADJ,CAFR,EAcKE,KAAK,IACFS,cAAC,CAAAC,aAAD,CAACnB,SAAD;AACIoB,IAAAA,QAAQ,EAAEV,OAAO,IAAI;AACrBW,IAAAA,IAAI,EAAET,SAAS,KAAK,WAAd,GAA4B,WAA5B,GAA0C;AAChDgB,IAAAA,OAAO,EAAEd;AACTQ,IAAAA,SAAS,EACLhB,SAAS,KAAK,SAAd,GACMU,MAAM,CAACO,IAAP,CAAYC,QADlB,GAEMC;AAEVC,IAAAA,UAAU,EAAEpB,SAAS,KAAK;AAC1BqB,IAAAA,SAAS,EAAElB;AACXP,IAAAA,QAAQ,EAAEA,QAAAA;GAXd,CAfR,CADJ,CAAA;AAgCH,EA9ED;;;ACzCA,IAAMd,IAAI,GAAGC,MAAM,CAACC,GAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,kBAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAaC,CAAAA,CAAAA,gBAAA,KAAAA,gBAAA,GAAAC,oBAAA,CAAA,CAAA,+CAAA,EAAA,gFAAA,CAAA,EAAA,CAAA,+CAAA,EAEkD,gFAFlD,CAAA,CAAA,CAAb,EAEoB,UAACC,EAAD,EAAU;AAAP,EAAA,IAAAoC,KAAK,GAAApC,EAAA,CAAAoC,KAAL,CAAA;AAAY,EAAA,OAAAC,SAAK,CAACD,KAAD,CAAL,CAAaE,OAAb,CAAqBC,OAArB,CAAA;AAA4B,CAF/D,CAAV,CAAA;AAUA,IAAMC,OAAO,GAAG5C,MAAM,CAAC6C,IAAD,CAAT,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,qBAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAenC,gBAAA,KAAAA,gBAAA,GAAAP,oBAAA,CAAA,CAAA,uBAAA,EAAA,sBAAA,EAAA,8BAAA,CAAA,EAAA,CAAA,uBAAA,EACO,sBADP,EAEO,8BAFP,CAAA,CAAA,CAAf,EACQG,QAAQ,CAACC,KADjB,EAEID,QAAQ,CAACC,KAAT,GAAiB,CAFrB,CAAb,CAAA;AAMA,IAAMuC,cAAc,GAAG9C,MAAM,CAACC,GAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,4BAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAa8C,CAAAA,CAAAA,gBAAA,KAAAA,gBAAA,GAAA5C,oBAAA,CAAA,CAAA,mJAAA,EAAA,oMAAA,CAAA,EAAA,CAAA,mJAAA,EAOsC,oMAPtC,CAAA,CAAA,CAAb,EAOQ,UAACC,EAAD,EAAU;AAAP,EAAA,IAAAoC,KAAK,GAAApC,EAAA,CAAAoC,KAAL,CAAA;AAAY,EAAA,OAAAC,SAAK,CAACD,KAAD,CAAL,CAAaE,OAAb,CAAqBC,OAArB,CAAA;AAA4B,CAPnD,CAApB,CAAA;AAqBA,IAAMK,SAAS,GAAGhD,MAAM,CAACiD,KAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,uBAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,0MAAe,sGAKc,0BAET,UAPpB,EAKS3C,QAAQ,CAACC,KAAT,GAAiB,GAL1B,EAOED,QAAQ,CAACC,KAAT,GAAiB,CAPnB,CAAf,CAAA;AAUA,IAAM2C,SAAS,GAAGlD,MAAM,CAAC6C,IAAD,CAAT,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,uBAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAeM,gBAAA,KAAAA,gBAAA,GAAAhD,oBAAA,CAAA,CAAA,sCAAA,EAAA,2BAAA,EAAA,sBAAA,EAAA,oGAAA,EAAA,2BAAA,EAAA,YAAA,CAAA,EAAA,CAG5B,sCAH4B,EAM6C,2BAN7C,EAUa,sBAVb,EAYK,oGAZL,EAiBgB,2BAjBhB,EAkB2C,YAlB3C,CAAA,CAAA,CAAf,EAKF,UAACC,EAAD,EAAsB;MAAnBoC,KAAK,GAAApC,EAAA,CAAAoC;MAAEH,UAAU,GAAAjC,EAAA,CAAAiC;AACzB,EAAA,OAAAA,UAAU,GAAGI,SAAK,CAACD,KAAD,CAAL,CAAaN,IAAb,CAAkBC,QAArB,GAAgCM,SAAK,CAACD,KAAD,CAAL,CAAaN,IAAb,CAAkBS,OAA5D,CAAA;AAAmE,CAN5D,EAOS,UAACvC,EAAD,EAAsB;MAAnBoC,KAAK,GAAApC,EAAA,CAAAoC;MAAEH,UAAU,GAAAjC,EAAA,CAAAiC;AACpC,EAAA,OAAAA,UAAU,GACJI,SAAK,CAACD,KAAD,CAAL,CAAaY,SAAb,CAAuBC,IADnB,GAEJZ,SAAK,CAACD,KAAD,CAAL,CAAaY,SAAb,CAAuBE,MAF7B,CAAA;AAEmC,CAV5B,EAYEhD,QAAQ,CAACC,KAAT,GAAiB,CAZnB,EAiBUD,QAAQ,CAACiD,MAAT,GAAkB,GAjB5B,EAkBO,UAACnD,EAAD,EAAe;AAAZ,EAAA,IAAAoD,UAAU,GAAApD,EAAA,CAAAoD,UAAV,CAAA;AAAiB,EAAA,OAACA,UAAU,GAAG,OAAH,GAAa,MAAxB,CAAA;AAA+B,CAlB1D,CAAf,CAAA;AAsBA,IAAMC,SAAS,GAAGzD,MAAM,CAAC6C,IAAD,CAAT,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,uBAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAGba,gBAAA,KAAAA,gBAAA,GAAAvD,oBAAA,CAAA,CAAA,mBAAA,EAAA,gFAAA,EAAA,8CAAA,EAAA,4BAAA,EAAA,cAAA,CAAA,EAAA,CAAA,mBAAA,EACiC,gFADjC,EAM4E,8CAN5E,EASuE,4BATvE,EAU4C,cAV5C,CAAA,CAAA,CAHa,EAIEG,QAAQ,CAACC,KAAT,GAAiB,CAJnB,EAQS,UAACH,EAAD,EAAmB;MAAhBuD,OAAO,GAAAvD,EAAA,CAAAuD;MAAEnB,KAAK,GAAApC,EAAA,CAAAoC;AACjC,EAAA,OAAAmB,OAAO,GAAGlB,SAAK,CAACD,KAAD,CAAL,CAAaY,SAAb,CAAuBQ,KAA1B,GAAkCnB,SAAK,CAACD,KAAD,CAAL,CAAaY,SAAb,CAAuBE,MAAhE,CAAA;AAAsE,CAT/D,EAYO,UAAClD,EAAD,EAAe;AAAZ,EAAA,IAAAoD,UAAU,GAAApD,EAAA,CAAAoD,UAAV,CAAA;AAAiB,EAAA,OAACA,UAAU,GAAG,OAAH,GAAa,MAAxB,CAAA;AAA+B,CAZ1D,EAaUlD,QAAQ,CAACiD,MAAT,GAAkB,GAb5B,CAAf,CAAA;AA4BMM,IAAAA,UAAU,GAAGC,UAAU,CACzB,UACI1D,EADJ,EASI2D,GATJ,EASO;MAPCC,GAAG,GAAA5D,EAAA,CAAA4D;MACHC,UAAU,GAAA7D,EAAA,CAAA6D;MACVC,QAAQ,GAAA9D,EAAA,CAAA8D;MACRlD,EAAA,GAAAZ,EAAA,CAAAiC;MAAAA,UAAU,GAAGrB,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,GAAKA;MAClBM,EAAe,GAAAlB,EAAA,CAAAuD;MAAfA,OAAO,GAAArC,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQA;MACfE,EAAA,GAAApB,EAAA,CAAA+D;MAAAA,OAAO,GAAG3C,EAAA,KAAA,KAAA,CAAA,GAAA,MAAA,GAAMA;AAIpB,EAAA,OACIK,cAAC,CAAAC,aAAD,CAAC/B,IAAD,EAAM;AAAAgE,IAAAA,GAAG,EAAEA,GAAAA;AAAL,GAAN,EACIlC,cAAA,CAAAC,aAAA,CAACgB,cAAD,EAAe;AAACsB,IAAAA,QAAQ,EAAE,CAAA;AAAX,GAAf,EACIvC,cAAA,CAAAC,aAAA,CAACkB,SAAD,EAAU,IAAV,EACKiB,UAAU,IACPpC,cAAA,CAAAC,aAAA,CAACc,OAAD,EACI;AAAAb,IAAAA,QAAQ,EAAC,SAAT;AACAsC,IAAAA,IAAI,EAAC,QADL;AAEAhC,IAAAA,UAAU,EAAEA,UAAAA;AAFZ,GADJ,EAKK4B,UALL,CAFR,EAUKC,QAAQ,IACLrC,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAA,IAAA,EACID,cACK,CAAAC,aADL,CACK,IADL,EACK,IADL,EACKoC,QAAQ,CAACI,GAAT,CAAa,UAACC,IAAD,EAAOC,EAAP,EAAc;AAAA,IAAA,OACxB3C,cAAC,CAAAC,aAAD,CAACoB,SAAD;AACIuB,MAAAA,GAAG,EAAED;AACLH,MAAAA,IAAI,EAAC;AACLtC,MAAAA,QAAQ,EAAC;AACTM,MAAAA,UAAU,EAAE,CAACA;AACbmB,MAAAA,UAAU,EAAEW,OAAO,KAAK,OAAA;KAL5B,EAOKI,IAPL,CADwB,CAAA;AAU3B,GAVA,CADL,CADJ,CAXR,EA2BI1C,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAA,IAAA,EACKkC,GAAG,CAACM,GAAJ,CAAQ,UAAClE,EAAD,EAAWsE,CAAX,EAAY;AAAT,IAAA,IAAAC,IAAI,GAAAvE,EAAA,CAAAuE,IAAJ,CAAA;AAAc,IAAA,OACtB9C,cAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;AAAI2C,MAAAA,GAAG,EAAEC,CAAAA;AAAT,KAAA,EACKC,IAAI,CAACL,GAAL,CAAS,UAACM,QAAD,EAAWJ,EAAX,EAAa;AACnB,MAAA,OACI3C,cAAC,CAAAC,aAAD,CAAC2B,SAAD,EACI;AAAAgB,QAAAA,GAAG,EAAED,EAAL;AACAzC,QAAAA,QAAQ,EAAC,IADT;AAEA4B,QAAAA,OAAO,EAAEA,OAFT;AAGAH,QAAAA,UAAU,EAAEW,OAAO,KAAK,OAHxB;AAIA7B,QAAAA,SAAS,EAAEsC,QAAAA;AAJX,OADJ,CADJ,CAAA;AASH,KAVA,CADL,CADsB,CAAA;AAczB,GAdA,CADL,CA3BJ,CADJ,CADJ,CADJ,CAAA;AAmDH,CA/DwB,EAA7B;AAkEAf,UAAU,CAACgB,WAAX,GAAyB,YAAzB,CAAA;;;;;"}

package/esm/Tag-cb972e1b.js

@@ -0,0 +1,67 @@
+import { a as __makeTemplateObject, _ as __assign } from './ClockFilled-6bae80dc.js';
+import React__default from 'react';
+import styled, { css } from 'styled-components';
+import { c as copyStyle } from './Copy-bca0854c.js';
+import { L as Link } from './Link-bccdb082.js';
+import { s as spacings, g as getColors } from './styles-c387bdc6.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) {
+  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 || (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;
+  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, __assign({
+    as: tag,
+    isInverted: isInverted,
+    isActive: isActive,
+    onClick: onClick,
+    isClickable: !!onClick || !!(link && link.href),
+    className: className
+  }, link), name || children);
+};
+var templateObject_1, templateObject_2;
+
+export { Tag as T };
+//# sourceMappingURL=Tag-cb972e1b.js.map

package/esm/Tag-cb972e1b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag-cb972e1b.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, 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"],"names":["View","styled","Link","templateObject_2","__makeTemplateObject","_a","isInverted","spacings","nudge","copyStyle","isActive","isClickable","css","templateObject_1","theme","getColors","primary","inverted","default","Tag","name","link","onClick","className","children","tag","href","React","__assign","as"],"mappings":"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"}