@blateral/b.kit 2.4.1 → 2.5.0-beta.1.0

package/esm/Pointer-5c77b1f1.js

@@ -0,0 +1,111 @@
+import { a as __makeTemplateObject, d as __rest, _ as __assign } from './ClockFilled-62515a8f.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-da982973.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-5c77b1f1.js.map

package/esm/Pointer-5c77b1f1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pointer-5c77b1f1.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/Section-b76e6909.js

@@ -0,0 +1,185 @@
+import { a as __makeTemplateObject } from './ClockFilled-62515a8f.js';
+import React__default, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { c as concat } from './concat-ab3c66f2.js';
+import { c as getGlobals, w as withRange, m as mq, s as spacings } from './styles-da982973.js';
+
+var getBackground = function (bgColor, mode) {
+  var bgValue = undefined;
+
+  switch (mode) {
+    case 'full':
+      bgValue = bgColor;
+      break;
+
+    case 'inverted':
+      bgValue = bgColor;
+      break;
+
+    case 'larger-left':
+      bgValue = "linear-gradient(to left, transparent 40%, ".concat(bgColor, " 40%)");
+      break;
+
+    case 'larger-right':
+      bgValue = "linear-gradient(to right, transparent 40%, ".concat(bgColor, " 40%)");
+      break;
+
+    default:
+      bgValue = bgColor;
+      break;
+  }
+
+  return bgValue;
+};
+
+var View = styled.section.withConfig({
+  displayName: "Section__View",
+  componentId: "sc-14g80mr-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: relative;\n    overflow: ", ";\n\n    // section paddings\n    ", "\n\n    // section margins\n    ", "\n"], ["\n    position: relative;\n    overflow: ", ";\n\n    // section paddings\n    ", "\n\n    // section margins\n    ", "\n"])), function (_a) {
+  var as = _a.as;
+  return as === 'div' ? 'visible' : 'hidden';
+}, function (_a) {
+  var addSeperation = _a.addSeperation,
+      isStackable = _a.isStackable,
+      bgIdent = _a.bgIdent,
+      theme = _a.theme;
+  var padding = getGlobals(theme).sections.seperation.padding.default;
+  var paddingStacked = getGlobals(theme).sections.seperation.padding.stackable;
+  var forcePadding = getGlobals(theme).sections.seperation.forcePadding;
+
+  if (addSeperation) {
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                ", "\n                ", "\n\n                section[data-stack-ident='true'] + & {\n                    ", ";\n                }\n\n                section[data-bg-ident='", "']\n                    + &[data-bg-ident='", "'] {\n                    padding-top: ", ";\n\n                    @media ", " {\n                        padding-top: ", ";\n                    }\n                }\n            "], ["\n                ", "\n                ", "\n\n                section[data-stack-ident='true'] + & {\n                    ", ";\n                }\n\n                section[data-bg-ident='", "']\n                    + &[data-bg-ident='", "'] {\n                    padding-top: ", ";\n\n                    @media ", " {\n                        padding-top: ", ";\n                    }\n                }\n            "])), withRange(padding, 'padding-top'), withRange(isStackable ? paddingStacked : padding, 'padding-bottom'), withRange(paddingStacked, 'padding-top'), bgIdent, bgIdent, forcePadding ? undefined : '0 !important', mq.xxlarge, forcePadding ? undefined : '0 !important');
+  } else return '';
+}, function (_a) {
+  var addSeperation = _a.addSeperation,
+      isStackable = _a.isStackable,
+      bgIdent = _a.bgIdent,
+      bgColor = _a.bgColor,
+      theme = _a.theme;
+  var margin = getGlobals(theme).sections.seperation.margin.default;
+  var marginStacked = getGlobals(theme).sections.seperation.margin.stackable;
+  var bgColorPart = bgColor ? "__".concat(bgColor) : '';
+
+  if (addSeperation) {
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                *:not([data-bg-ident='light'])\n                    + &[data-bg-ident='larger-left", "'] {\n                    ", ";\n                }\n\n                *:not([data-bg-ident='light'])\n                    + &[data-bg-ident='larger-right", "'] {\n                    ", ";\n                }\n\n                section[data-bg-ident='larger-left", "']\n                    + &:not([data-bg-ident='light']) {\n                    ", ";\n                }\n\n                section[data-bg-ident='larger-right", "']\n                    + &:not([data-bg-ident='light']) {\n                    ", ";\n                }\n\n                section[data-bg-ident='", "']\n                    + &[data-bg-ident='", "'] {\n                    margin-top: 0 !important;\n\n                    @media ", " {\n                        margin-top: 0 !important;\n                    }\n                }\n            "], ["\n                *:not([data-bg-ident='light'])\n                    + &[data-bg-ident='larger-left", "'] {\n                    ", ";\n                }\n\n                *:not([data-bg-ident='light'])\n                    + &[data-bg-ident='larger-right", "'] {\n                    ", ";\n                }\n\n                section[data-bg-ident='larger-left", "']\n                    + &:not([data-bg-ident='light']) {\n                    ", ";\n                }\n\n                section[data-bg-ident='larger-right", "']\n                    + &:not([data-bg-ident='light']) {\n                    ", ";\n                }\n\n                section[data-bg-ident='", "']\n                    + &[data-bg-ident='", "'] {\n                    margin-top: 0 !important;\n\n                    @media ", " {\n                        margin-top: 0 !important;\n                    }\n                }\n            "])), bgColorPart, withRange(margin, 'margin-top'), bgColorPart, withRange(margin, 'margin-top'), bgColorPart, withRange(isStackable ? marginStacked : margin, 'margin-top'), bgColorPart, withRange(isStackable ? marginStacked : margin, 'margin-top'), bgIdent, bgIdent, mq.xxlarge);
+  } else return '';
+});
+var Back = styled.div.withConfig({
+  displayName: "Section__Back",
+  componentId: "sc-14g80mr-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: ", ";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    max-width: ", ";\n    background: ", ";\n    margin: 0 auto;\n    z-index: -1;\n\n    @media ", " {\n        background: ", ";\n    }\n\n    @media ", " {\n        :before {\n            content: ", ";\n            position: absolute;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            width: ", "px;\n            background-color: ", ";\n            transform: translateX(-100%);\n        }\n        :after {\n            content: ", ";\n            position: absolute;\n            top: 0;\n            right: 0;\n            bottom: 0;\n            width: ", "px;\n            background-color: ", ";\n            transform: translateX(100%);\n        }\n    }\n"], ["\n    display: ", ";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    max-width: ", ";\n    background: ", ";\n    margin: 0 auto;\n    z-index: -1;\n\n    @media ", " {\n        background: ", ";\n    }\n\n    @media ", " {\n        :before {\n            content: ", ";\n            position: absolute;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            width: ", "px;\n            background-color: ", ";\n            transform: translateX(-100%);\n        }\n        :after {\n            content: ", ";\n            position: absolute;\n            top: 0;\n            right: 0;\n            bottom: 0;\n            width: ", "px;\n            background-color: ", ";\n            transform: translateX(100%);\n        }\n    }\n"])), function (_a) {
+  var bgColor = _a.bgColor;
+  return bgColor ? 'block' : 'none';
+}, function (_a) {
+  var bgMode = _a.bgMode,
+      clampSolidBg = _a.clampSolidBg;
+
+  if (bgMode !== 'larger-left' && bgMode !== 'larger-right') {
+    return clampSolidBg ? "".concat(spacings.wrapperLarge, "px") : undefined;
+  } else {
+    return "".concat(spacings.wrapper, "px");
+  }
+}, function (_a) {
+  var bgColor = _a.bgColor;
+  return bgColor || undefined;
+}, mq.semilarge, function (_a) {
+  var bgColor = _a.bgColor,
+      bgMode = _a.bgMode;
+  return bgColor && bgMode ? getBackground(bgColor, bgMode) : undefined;
+}, mq.xlarge, function (_a) {
+  var bgMode = _a.bgMode;
+  return bgMode === 'larger-left' ? "\"\"" : undefined;
+}, (spacings.wrapperLarge - spacings.wrapper) / 2, function (_a) {
+  var bgColor = _a.bgColor;
+  return bgColor && bgColor;
+}, function (_a) {
+  var bgMode = _a.bgMode;
+  return bgMode === 'larger-right' ? "\"\"" : undefined;
+}, (spacings.wrapperLarge - spacings.wrapper) / 2, function (_a) {
+  var bgColor = _a.bgColor;
+  return bgColor && bgColor;
+});
+var Section = forwardRef(function (_a, ref) {
+  var anchorId = _a.anchorId,
+      renderAs = _a.renderAs,
+      bgColor = _a.bgColor,
+      bgMode = _a.bgMode,
+      _b = _a.clampSolidBg,
+      clampSolidBg = _b === void 0 ? true : _b,
+      _c = _a.addSeperation,
+      addSeperation = _c === void 0 ? false : _c,
+      _d = _a.isStackable,
+      isStackable = _d === void 0 ? false : _d,
+      className = _a.className,
+      children = _a.children;
+
+  switch (bgMode) {
+    case 'larger-left':
+      bgMode = 'larger-left';
+      break;
+
+    case 'larger-right':
+      bgMode = 'larger-right';
+      break;
+
+    case 'inverted':
+      bgMode = 'inverted';
+      break;
+
+    case 'full':
+      bgMode = 'full';
+      break;
+
+    default:
+      bgMode = undefined;
+  }
+
+  var noPadIdent = addSeperation ? '' : 'nopad';
+  var ident = bgColor && bgMode ? concat(["".concat(bgMode, "__").concat(bgColor), noPadIdent], '--') : 'light';
+  return React__default.createElement(View, {
+    ref: ref,
+    id: anchorId || undefined,
+    as: renderAs,
+    "data-bg-ident": ident,
+    bgIdent: ident,
+    bgColor: bgColor || '',
+    addSeperation: !renderAs || renderAs && renderAs !== 'div' ? addSeperation : false,
+    isStackable: isStackable,
+    "data-stack-ident": isStackable ? 'true' : 'false',
+    className: className
+  }, bgColor && React__default.createElement(Back, {
+    bgColor: bgColor,
+    bgMode: bgMode,
+    clampSolidBg: clampSolidBg
+  }), children);
+});
+Section.displayName = 'Section';
+var mapToBgMode = function (mode, preventSplit, isMirrored) {
+  if (preventSplit === void 0) {
+    preventSplit = false;
+  }
+
+  if (isMirrored === void 0) {
+    isMirrored = false;
+  }
+
+  switch (mode) {
+    case 'full':
+      return 'full';
+
+    case 'inverted':
+      return 'inverted';
+
+    case 'splitted':
+      {
+        if (!preventSplit) return isMirrored ? 'larger-left' : 'larger-right';else return undefined;
+      }
+
+    default:
+      return undefined;
+  }
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { Section as S, mapToBgMode as m };
+//# sourceMappingURL=Section-b76e6909.js.map

package/esm/Section-b76e6909.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section-b76e6909.js","sources":["../src/components/base/Section.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { concat } from 'utils/concat';\nimport { mq, spacings, withRange, getGlobals as global } from 'utils/styles';\n\nexport type BgMode = 'full' | 'larger-left' | 'larger-right' | 'inverted';\n\nconst getBackground = (bgColor: string, mode?: BgMode) => {\n    let bgValue = undefined;\n\n    switch (mode) {\n        case 'full':\n            bgValue = bgColor;\n            break;\n\n        case 'inverted':\n            bgValue = bgColor;\n            break;\n\n        case 'larger-left':\n            bgValue = `linear-gradient(to left, transparent 40%, ${bgColor} 40%)`;\n            break;\n\n        case 'larger-right':\n            bgValue = `linear-gradient(to right, transparent 40%, ${bgColor} 40%)`;\n            break;\n\n        default:\n            bgValue = bgColor;\n            break;\n    }\n    return bgValue;\n};\n\nconst View = styled.section<{\n    as?: SectionType;\n    bgIdent: string;\n    bgColor: string;\n    isStackable?: boolean;\n    addSeperation?: boolean;\n}>`\n    position: relative;\n    overflow: ${({ as }) => (as === 'div' ? 'visible' : 'hidden')};\n\n    // section paddings\n    ${({ addSeperation, isStackable, bgIdent, theme }) => {\n        const padding = global(theme).sections.seperation.padding.default;\n        const paddingStacked =\n            global(theme).sections.seperation.padding.stackable;\n        const forcePadding = global(theme).sections.seperation.forcePadding;\n\n        if (addSeperation) {\n            return css`\n                ${withRange(padding, 'padding-top')}\n                ${withRange(\n                    isStackable ? paddingStacked : padding,\n                    'padding-bottom'\n                )}\n\n                section[data-stack-ident='true'] + & {\n                    ${withRange(paddingStacked, 'padding-top')};\n                }\n\n                section[data-bg-ident='${bgIdent}']\n                    + &[data-bg-ident='${bgIdent}'] {\n                    padding-top: ${forcePadding ? undefined : '0 !important'};\n\n                    @media ${mq.xxlarge} {\n                        padding-top: ${forcePadding\n                            ? undefined\n                            : '0 !important'};\n                    }\n                }\n            `;\n        } else return '';\n    }}\n\n    // section margins\n    ${({ addSeperation, isStackable, bgIdent, bgColor, theme }) => {\n        const margin = global(theme).sections.seperation.margin.default;\n        const marginStacked =\n            global(theme).sections.seperation.margin.stackable;\n\n        const bgColorPart = bgColor ? `__${bgColor}` : '';\n\n        if (addSeperation) {\n            return css`\n                *:not([data-bg-ident='light'])\n                    + &[data-bg-ident='larger-left${bgColorPart}'] {\n                    ${withRange(margin, 'margin-top')};\n                }\n\n                *:not([data-bg-ident='light'])\n                    + &[data-bg-ident='larger-right${bgColorPart}'] {\n                    ${withRange(margin, 'margin-top')};\n                }\n\n                section[data-bg-ident='larger-left${bgColorPart}']\n                    + &:not([data-bg-ident='light']) {\n                    ${withRange(\n                        isStackable ? marginStacked : margin,\n                        'margin-top'\n                    )};\n                }\n\n                section[data-bg-ident='larger-right${bgColorPart}']\n                    + &:not([data-bg-ident='light']) {\n                    ${withRange(\n                        isStackable ? marginStacked : margin,\n                        'margin-top'\n                    )};\n                }\n\n                section[data-bg-ident='${bgIdent}']\n                    + &[data-bg-ident='${bgIdent}'] {\n                    margin-top: 0 !important;\n\n                    @media ${mq.xxlarge} {\n                        margin-top: 0 !important;\n                    }\n                }\n            `;\n        } else return '';\n    }}\n`;\n\nconst Back = styled.div<{\n    bgColor?: string;\n    bgMode?: BgMode;\n    clampSolidBg?: boolean;\n}>`\n    display: ${({ bgColor }) => (bgColor ? 'block' : 'none')};\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    max-width: ${({ bgMode, clampSolidBg }) => {\n        if (bgMode !== 'larger-left' && bgMode !== 'larger-right') {\n            return clampSolidBg ? `${spacings.wrapperLarge}px` : undefined;\n        } else {\n            return `${spacings.wrapper}px`;\n        }\n    }};\n    background: ${({ bgColor }) => bgColor || undefined};\n    margin: 0 auto;\n    z-index: -1;\n\n    @media ${mq.semilarge} {\n        background: ${({ bgColor, bgMode }) =>\n            bgColor && bgMode ? getBackground(bgColor, bgMode) : undefined};\n    }\n\n    @media ${mq.xlarge} {\n        :before {\n            content: ${({ bgMode }) =>\n                bgMode === 'larger-left' ? `\"\"` : undefined};\n            position: absolute;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            width: ${(spacings.wrapperLarge - spacings.wrapper) / 2}px;\n            background-color: ${({ bgColor }) => bgColor && bgColor};\n            transform: translateX(-100%);\n        }\n        :after {\n            content: ${({ bgMode }) =>\n                bgMode === 'larger-right' ? `\"\"` : undefined};\n            position: absolute;\n            top: 0;\n            right: 0;\n            bottom: 0;\n            width: ${(spacings.wrapperLarge - spacings.wrapper) / 2}px;\n            background-color: ${({ bgColor }) => bgColor && bgColor};\n            transform: translateX(100%);\n        }\n    }\n`;\n\nexport type SectionType = 'header' | 'footer' | 'div';\n\nexport interface SectionProps {\n    /** ID value for targeting section with anchor hashes */\n    anchorId?: string;\n\n    /** Render as specific HTML tag type */\n    renderAs?: SectionType;\n\n    /** Background color */\n    bgColor?: string;\n\n    /** Background mode */\n    bgMode?: BgMode;\n\n    /** Clamp solid backgrounds (full, inverted) to large wrapper width */\n    clampSolidBg?: boolean;\n\n    /** Enable section seperation spacing */\n    addSeperation?: boolean;\n\n    /** Allow stack feature for reduced section spacing to following section */\n    isStackable?: boolean;\n}\n\nconst Section = forwardRef<\n    HTMLElement,\n    SectionProps & {\n        className?: string;\n        children?: React.ReactNode;\n    }\n>(\n    (\n        {\n            anchorId,\n            renderAs,\n            bgColor,\n            bgMode,\n            clampSolidBg = true,\n            addSeperation = false,\n            isStackable = false,\n            className,\n            children,\n        },\n        ref\n    ) => {\n        switch (bgMode) {\n            case 'larger-left':\n                bgMode = 'larger-left';\n                break;\n            case 'larger-right':\n                bgMode = 'larger-right';\n                break;\n            case 'inverted':\n                bgMode = 'inverted';\n                break;\n            case 'full':\n                bgMode = 'full';\n                break;\n            default:\n                bgMode = undefined;\n        }\n\n        const noPadIdent = addSeperation ? '' : 'nopad';\n        const ident =\n            bgColor && bgMode\n                ? concat([`${bgMode}__${bgColor}`, noPadIdent], '--')\n                : 'light';\n\n        return (\n            <View\n                ref={ref}\n                id={anchorId || undefined}\n                as={renderAs}\n                data-bg-ident={ident}\n                bgIdent={ident}\n                bgColor={bgColor || ''}\n                addSeperation={\n                    !renderAs || (renderAs && renderAs !== 'div')\n                        ? addSeperation\n                        : false\n                }\n                isStackable={isStackable}\n                data-stack-ident={isStackable ? 'true' : 'false'}\n                className={className}\n            >\n                {bgColor && (\n                    <Back\n                        bgColor={bgColor}\n                        bgMode={bgMode}\n                        clampSolidBg={clampSolidBg}\n                    />\n                )}\n                {children}\n            </View>\n        );\n    }\n);\n\nSection.displayName = 'Section';\n\nexport default Section;\n\nexport const mapToBgMode = (\n    mode?: 'full' | 'splitted' | 'inverted',\n    preventSplit = false,\n    isMirrored = false\n): BgMode | undefined => {\n    switch (mode) {\n        case 'full':\n            return 'full';\n        case 'inverted':\n            return 'inverted';\n        case 'splitted': {\n            if (!preventSplit)\n                return isMirrored ? 'larger-left' : 'larger-right';\n            else return undefined;\n        }\n\n        default:\n            return undefined;\n    }\n};\n"],"names":["getBackground","bgColor","mode","bgValue","undefined","concat","View","styled","section","templateObject_3","__makeTemplateObject","_a","as","addSeperation","isStackable","bgIdent","theme","padding","global","sections","seperation","default","paddingStacked","stackable","forcePadding","css","templateObject_1","withRange","mq","xxlarge","margin","marginStacked","bgColorPart","templateObject_2","Back","div","templateObject_4","bgMode","clampSolidBg","spacings","wrapperLarge","wrapper","semilarge","xlarge","Section","forwardRef","ref","anchorId","renderAs","_b","_c","_d","className","children","noPadIdent","ident","React","createElement","id","displayName","mapToBgMode","preventSplit","isMirrored"],"mappings":";;;;;;AAOA,IAAMA,aAAa,GAAG,UAACC,OAAD,EAAkBC,IAAlB,EAA+B;AACjD,EAAIC,IAAAA,OAAO,GAAGC,SAAd,CAAA;;AAEA,EAAA,QAAQF,IAAR;AACI,IAAA,KAAK,MAAL;AACIC,MAAAA,OAAO,GAAGF,OAAV,CAAA;AACA,MAAA,MAAA;;AAEJ,IAAA,KAAK,UAAL;AACIE,MAAAA,OAAO,GAAGF,OAAV,CAAA;AACA,MAAA,MAAA;;AAEJ,IAAA,KAAK,aAAL;AACIE,MAAAA,OAAO,GAAG,4CAAAE,CAAAA,MAAA,CAA6CJ,OAA7C,EAAoD,OAApD,CAAV,CAAA;AACA,MAAA,MAAA;;AAEJ,IAAA,KAAK,cAAL;AACIE,MAAAA,OAAO,GAAG,6CAAAE,CAAAA,MAAA,CAA8CJ,OAA9C,EAAqD,OAArD,CAAV,CAAA;AACA,MAAA,MAAA;;AAEJ,IAAA;AACIE,MAAAA,OAAO,GAAGF,OAAV,CAAA;AACA,MAAA,MAAA;AAnBR,GAAA;;AAqBA,EAAA,OAAOE,OAAP,CAAA;AACH,CAzBD,CAAA;;AA2BA,IAAMG,IAAI,GAAGC,MAAM,CAACC,OAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,eAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAMRC,gBAAA,KAAAA,gBAAA,GAAAC,oBAAA,CAAA,CAAA,2CAAA,EAAA,oCAAA,EAAA,kCAAA,EAAA,IAAA,CAAA,EAAA,CAAA,2CAAA,EAE+D,oCAF/D,EAmCG,kCAnCH,EAmFG,IAnFH,CAAA,CAAA,CANQ,EAQM,UAACC,EAAD,EAAO;AAAJ,EAAA,IAAAC,EAAE,GAAAD,EAAA,CAAAC,EAAF,CAAA;AAAS,EAAA,OAACA,EAAE,KAAK,KAAP,GAAe,SAAf,GAA2B,QAA5B,CAAA;AAAqC,CARvD,EAWJ,UAACD,EAAD,EAA+C;MAA5CE,aAAa,GAAAF,EAAA,CAAAE;MAAEC,WAAW,GAAAH,EAAA,CAAAG;MAAEC,OAAO,GAAAJ,EAAA,CAAAI;MAAEC,KAAK,GAAAL,EAAA,CAAAK;AAC3C,EAAA,IAAMC,OAAO,GAAGC,UAAM,CAACF,KAAD,CAAN,CAAcG,QAAd,CAAuBC,UAAvB,CAAkCH,OAAlC,CAA0CI,OAA1D,CAAA;AACA,EAAA,IAAMC,cAAc,GAChBJ,UAAM,CAACF,KAAD,CAAN,CAAcG,QAAd,CAAuBC,UAAvB,CAAkCH,OAAlC,CAA0CM,SAD9C,CAAA;AAEA,EAAMC,IAAAA,YAAY,GAAGN,UAAM,CAACF,KAAD,CAAN,CAAcG,QAAd,CAAuBC,UAAvB,CAAkCI,YAAvD,CAAA;;AAEA,EAAA,IAAIX,aAAJ,EAAmB;AACf,IAAOY,OAAAA,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAhB,oBAAA,CAAA,CAAA,oBAAA,EAAA,oBAAA,EAAA,kFAAA,EAAA,iEAAA,EAAA,6CAAA,EAAA,yCAAA,EAAA,kCAAA,EAAA,2CAAA,EAAA,2DAAA,CAAA,EAAA,CAAA,oBAAA,EAC6B,oBAD7B,EAKL,kFALK,EAQwC,iEARxC,EAW0B,6CAX1B,EAY0B,yCAZ1B,EAasD,kCAbtD,EAeiB,2CAfjB,EAkBsB,2DAlBtB,CAAA,CAAA,CAAA,EACJiB,SAAS,CAACV,OAAD,EAAU,aAAV,CADL,EAEJU,SAAS,CACPb,WAAW,GAAGQ,cAAH,GAAoBL,OADxB,EAEP,gBAFO,CAFL,EAQAU,SAAS,CAACL,cAAD,EAAiB,aAAjB,CART,EAWmBP,OAXnB,EAYmBA,OAZnB,EAaaS,YAAY,GAAGpB,SAAH,GAAe,cAbxC,EAeOwB,EAAE,CAACC,OAfV,EAgBiBL,YAAY,GACrBpB,SADqB,GAErB,cAlBR,CAAV,CAAA;AAsBH,GAvBD,MAuBO,OAAO,EAAP,CAAA;AACV,CAzCK,EA4CJ,UAACO,EAAD,EAAwD;AAArD,EAAA,IAAAE,aAAa,GAAAF,EAAA,CAAAE,aAAb;AAAA,MAAeC,WAAW,GAAAH,EAAA,CAAAG,WAA1B;AAAA,MAA4BC,OAAO,GAAAJ,EAAA,CAAAI,OAAnC;AAAA,MAAqCd,OAAO,GAAAU,EAAA,CAAAV,OAA5C;AAAA,MAA8Ce,KAAK,GAAAL,EAAA,CAAAK,KAAnD,CAAA;AACD,EAAA,IAAMc,MAAM,GAAGZ,UAAM,CAACF,KAAD,CAAN,CAAcG,QAAd,CAAuBC,UAAvB,CAAkCU,MAAlC,CAAyCT,OAAxD,CAAA;AACA,EAAA,IAAMU,aAAa,GACfb,UAAM,CAACF,KAAD,CAAN,CAAcG,QAAd,CAAuBC,UAAvB,CAAkCU,MAAlC,CAAyCP,SAD7C,CAAA;AAGA,EAAMS,IAAAA,WAAW,GAAG/B,OAAO,GAAG,IAAA,CAAKI,MAAL,CAAKJ,OAAL,CAAH,GAAoB,EAA/C,CAAA;;AAEA,EAAA,IAAIY,aAAJ,EAAmB;AACf,IAAOY,OAAAA,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAvB,oBAAA,CAAA,CAAA,sGAAA,EAAA,4BAAA,EAAA,6HAAA,EAAA,4BAAA,EAAA,4EAAA,EAAA,kFAAA,EAAA,6EAAA,EAAA,kFAAA,EAAA,iEAAA,EAAA,6CAAA,EAAA,oFAAA,EAAA,+GAAA,CAAA,EAAA,CAAA,sGAAA,EAEyC,4BAFzC,EAG+B,6HAH/B,EAO0C,4BAP1C,EAQ+B,4EAR/B,EAWyC,kFAXzC,EAgBD,6EAhBC,EAmB0C,kFAnB1C,EAwBD,iEAxBC,EA2B0B,6CA3B1B,EA4B0B,oFA5B1B,EA+BiB,+GA/BjB,CAAA,CAAA,CAAA,EAE8BsB,WAF9B,EAGAL,SAAS,CAACG,MAAD,EAAS,YAAT,CAHT,EAO+BE,WAP/B,EAQAL,SAAS,CAACG,MAAD,EAAS,YAAT,CART,EAW8BE,WAX9B,EAaAL,SAAS,CACPb,WAAW,GAAGiB,aAAH,GAAmBD,MADvB,EAEP,YAFO,CAbT,EAmB+BE,WAnB/B,EAqBAL,SAAS,CACPb,WAAW,GAAGiB,aAAH,GAAmBD,MADvB,EAEP,YAFO,CArBT,EA2BmBf,OA3BnB,EA4BmBA,OA5BnB,EA+BOa,EAAE,CAACC,OA/BV,CAAV,CAAA;AAoCH,GArCD,MAqCO,OAAO,EAAP,CAAA;AACV,CAzFK,CAAV,CAAA;AA4FA,IAAMK,IAAI,GAAG3B,MAAM,CAAC4B,GAAV,CAAA,UAAA,CAAA;AAAA,EAAA,WAAA,EAAA,eAAA;AAAA,EAAA,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAIRC,gBAAA,KAAAA,gBAAA,GAAA1B,oBAAA,CAAA,CAAA,iBAAA,EAAA,uGAAA,EAAA,qBAAA,EAAA,yDAAA,EAAA,0BAAA,EAAA,yBAAA,EAAA,8CAAA,EAAA,4HAAA,EAAA,qCAAA,EAAA,kGAAA,EAAA,6HAAA,EAAA,qCAAA,EAAA,iEAAA,CAAA,EAAA,CAAA,iBAAA,EAC0D,uGAD1D,EAaG,qBAbH,EAcqD,yDAdrD,EAkBuB,0BAlBvB,EAoBwE,yBApBxE,EAuBoB,8CAvBpB,EA0ByD,4HA1BzD,EA+BiE,qCA/BjE,EAgCiE,kGAhCjE,EAqC0D,6HArC1D,EA0CiE,qCA1CjE,EA2CiE,iEA3CjE,CAAA,CAAA,CAJQ,EAKK,UAACC,EAAD,EAAY;AAAT,EAAA,IAAAV,OAAO,GAAAU,EAAA,CAAAV,OAAP,CAAA;AAAc,EAAA,OAACA,OAAO,GAAG,OAAH,GAAa,MAArB,CAAA;AAA4B,CALlD,EAWO,UAACU,EAAD,EAAyB;MAAtB0B,MAAM,GAAA1B,EAAA,CAAA0B;MAAEC,YAAY,GAAA3B,EAAA,CAAA2B;;AAChC,EAAA,IAAID,MAAM,KAAK,aAAX,IAA4BA,MAAM,KAAK,cAA3C,EAA2D;AACvD,IAAA,OAAOC,YAAY,GAAG,EAAGjC,CAAAA,MAAH,CAAGkC,QAAQ,CAACC,YAAZ,EAA4B,IAA5B,CAAH,GAAkCpC,SAArD,CAAA;AACH,GAFD,MAEO;AACH,IAAO,OAAA,EAAA,CAAGC,MAAH,CAAGkC,QAAQ,CAACE,OAAZ,MAAA,CAAP,CAAA;AACH,GAAA;AACJ,CAjBK,EAkBQ,UAAC9B,EAAD,EAAY;AAAT,EAAA,IAAAV,OAAO,GAAAU,EAAA,CAAAV,OAAP,CAAA;AAAc,EAAAA,OAAAA,OAAO,IAAIG,SAAX,CAAA;AAAoB,CAlB7C,EAsBGwB,EAAE,CAACc,SAtBN,EAuBY,UAAC/B,EAAD,EAAoB;MAAjBV,OAAO,GAAAU,EAAA,CAAAV;MAAEoC,MAAM,GAAA1B,EAAA,CAAA0B;AAC5B,EAAApC,OAAAA,OAAO,IAAIoC,MAAX,GAAoBrC,aAAa,CAACC,OAAD,EAAUoC,MAAV,CAAjC,GAAqDjC,SAArD,CAAA;AAA8D,CAxBhE,EA2BGwB,EAAE,CAACe,MA3BN,EA6Ba,UAAChC,EAAD,EAAW;AAAR,EAAA,IAAA0B,MAAM,GAAA1B,EAAA,CAAA0B,MAAN,CAAA;AACV,EAAA,OAAAA,MAAM,KAAK,aAAX,GAA2B,MAA3B,GAAkCjC,SAAlC,CAAA;AAA2C,CA9BjD,EAmCW,CAACmC,QAAQ,CAACC,YAAT,GAAwBD,QAAQ,CAACE,OAAlC,IAA6C,CAnCxD,EAoCsB,UAAC9B,EAAD,EAAY;AAAT,EAAA,IAAAV,OAAO,GAAAU,EAAA,CAAAV,OAAP,CAAA;AAAc,EAAAA,OAAAA,OAAO,IAAIA,OAAX,CAAA;AAAkB,CApCzD,EAwCa,UAACU,EAAD,EAAW;AAAR,EAAA,IAAA0B,MAAM,GAAA1B,EAAA,CAAA0B,MAAN,CAAA;AACV,EAAA,OAAAA,MAAM,KAAK,cAAX,GAA4B,MAA5B,GAAmCjC,SAAnC,CAAA;AAA4C,CAzClD,EA8CW,CAACmC,QAAQ,CAACC,YAAT,GAAwBD,QAAQ,CAACE,OAAlC,IAA6C,CA9CxD,EA+CsB,UAAC9B,EAAD,EAAY;AAAT,EAAA,IAAAV,OAAO,GAAAU,EAAA,CAAAV,OAAP,CAAA;AAAc,EAAAA,OAAAA,OAAO,IAAIA,OAAX,CAAA;AAAkB,CA/CzD,CAAV,CAAA;AA8EM2C,IAAAA,OAAO,GAAGC,UAAU,CAOtB,UACIlC,EADJ,EAYImC,GAZJ,EAYO;AAVC,EAAA,IAAAC,QAAQ,cAAR;AAAA,MACAC,QAAQ,GAAArC,EAAA,CAAAqC,QADR;AAAA,MAEA/C,OAAO,GAAAU,EAAA,CAAAV,OAFP;AAAA,MAGAoC,MAAM,GAAA1B,EAAA,CAAA0B,MAHN;AAAA,MAIAY,EAAmB,GAAAtC,EAAA,CAAA2B,YAJnB;AAAA,MAIAA,YAAY,GAAAW,EAAA,KAAA,KAAA,CAAA,GAAG,IAAH,GAAOA,EAJnB;AAAA,MAKAC,EAAqB,GAAAvC,EAAA,CAAAE,aALrB;AAAA,MAKAA,aAAa,GAAGqC,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,GAAKA,EALrB;AAAA,MAMAC,mBANA;AAAA,MAMArC,WAAW,GAAGqC,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,KANd;AAAA,MAOAC,SAAS,GAAAzC,EAAA,CAAAyC,SAPT;AAAA,MAQAC,QAAQ,GAAA1C,EAAA,CAAA0C,QARR,CAAA;;AAYJ,EAAA,QAAQhB,MAAR;AACI,IAAA,KAAK,aAAL;AACIA,MAAAA,MAAM,GAAG,aAAT,CAAA;AACA,MAAA,MAAA;;AACJ,IAAA,KAAK,cAAL;AACIA,MAAAA,MAAM,GAAG,cAAT,CAAA;AACA,MAAA,MAAA;;AACJ,IAAA,KAAK,UAAL;AACIA,MAAAA,MAAM,GAAG,UAAT,CAAA;AACA,MAAA,MAAA;;AACJ,IAAA,KAAK,MAAL;AACIA,MAAAA,MAAM,GAAG,MAAT,CAAA;AACA,MAAA,MAAA;;AACJ,IAAA;AACIA,MAAAA,MAAM,GAAGjC,SAAT,CAAA;AAdR,GAAA;;AAiBA,EAAA,IAAMkD,UAAU,GAAGzC,aAAa,GAAG,EAAH,GAAQ,OAAxC,CAAA;AACA,EAAM0C,IAAAA,KAAK,GACPtD,OAAO,IAAIoC,MAAX,GACMhC,MAAM,CAAC,CAAC,SAAA,CAAGgC,MAAH,EAAS,IAAT,CAAShC,CAAAA,MAAT,CAAcJ,OAAd,CAAD,EAA0BqD,UAA1B,CAAD,EAAwC,IAAxC,CADZ,GAEM,OAHV,CAAA;AAKA,EAAA,OACIE,cAAC,CAAAC,aAAD,CAACnD,IAAD;AACIwC,IAAAA,GAAG,EAAEA;AACLY,IAAAA,EAAE,EAAEX,QAAQ,IAAI3C;AAChBQ,IAAAA,EAAE,EAAEoC;qBACWO;AACfxC,IAAAA,OAAO,EAAEwC;AACTtD,IAAAA,OAAO,EAAEA,OAAO,IAAI;AACpBY,IAAAA,aAAa,EACT,CAACmC,QAAD,IAAcA,QAAQ,IAAIA,QAAQ,KAAK,KAAvC,GACMnC,aADN,GAEM;AAEVC,IAAAA,WAAW,EAAEA;wBACKA,WAAW,GAAG,MAAH,GAAY;AACzCsC,IAAAA,SAAS,EAAEA,SAAAA;GAdf,EAgBKnD,OAAO,IACJuD,cAAA,CAAAC,aAAA,CAACvB,IAAD,EAAK;AACDjC,IAAAA,OAAO,EAAEA,OADR;AAEDoC,IAAAA,MAAM,EAAEA,MAFP;AAGDC,IAAAA,YAAY,EAAEA,YAAAA;AAHb,GAAL,CAjBR,EAuBKe,QAvBL,CADJ,CAAA;AA2BH,CAvEqB,EAA1B;AA0EAT,OAAO,CAACe,WAAR,GAAsB,SAAtB,CAAA;AAIO,IAAMC,WAAW,GAAG,UACvB1D,IADuB,EAEvB2D,YAFuB,EAGvBC,UAHuB,EAGL;AADlB,EAAA,IAAAD,YAAA,KAAA,KAAA,CAAA,EAAA;AAAAA,IAAAA,YAAoB,GAAA,KAApB,CAAA;AAAoB,GAAA;;AACpB,EAAA,IAAAC,UAAA,KAAA,KAAA,CAAA,EAAA;AAAAA,IAAAA,UAAkB,GAAA,KAAlB,CAAA;AAAkB,GAAA;;AAElB,EAAA,QAAQ5D,IAAR;AACI,IAAA,KAAK,MAAL;AACI,MAAA,OAAO,MAAP,CAAA;;AACJ,IAAA,KAAK,UAAL;AACI,MAAA,OAAO,UAAP,CAAA;;AACJ,IAAA,KAAK,UAAL;AAAiB,MAAA;AACb,QAAA,IAAI,CAAC2D,YAAL,EACI,OAAOC,UAAU,GAAG,aAAH,GAAmB,cAApC,CADJ,KAEK,OAAO1D,SAAP,CAAA;AACR,OAAA;;AAED,IAAA;AACI,MAAA,OAAOA,SAAP,CAAA;AAZR,GAAA;AAcH,EAnBM;;;;;"}

package/esm/SocialList-402b8f20.js

@@ -0,0 +1,61 @@
+import { a as __makeTemplateObject } from './ClockFilled-62515a8f.js';
+import React__default from 'react';
+import styled from 'styled-components';
+import { s as spacings, g as getColors } from './styles-da982973.js';
+import { L as Link } from './Link-3fd9c9b8.js';
+import { C as Copy } from './Copy-a28aeb61.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-402b8f20.js.map

package/esm/SocialList-402b8f20.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocialList-402b8f20.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-cc49e089.js

@@ -0,0 +1,159 @@
+import { a as __makeTemplateObject } from './ClockFilled-62515a8f.js';
+import React__default, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { H as Heading, C as Copy } from './Copy-a28aeb61.js';
+import { s as spacings, g as getColors } from './styles-da982973.js';
+import { u as useLibTheme } from './LibThemeProvider-52555ac9.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-cc49e089.js.map