@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/Autocomplete/components.mjs

@@ -1,34 +1,87 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
+import { btnStyleReset } from "../Buttons";
+import { InputMain, InputWrap } from "../Forms/Input/Input";
 import { Label } from "../Forms/Label/Label";
-import { InputWrap, InputMain } from "../Forms/Input/Input";
-import { SelectArrow } from "../Select/components";
+import { inputReset } from "../Forms/styles";
 import { Menu } from "../Menu/Menu";
 import { MenuItem } from "../MenuItem/MenuItem";
-import { btnStyleReset } from "../Buttons";
-import { inputReset } from "../Forms/styles";
+import { SelectArrow } from "../Select/components";
 import { ellipsis } from "../styles/styled";
-var AUTOCOMPLETE_ITEM_GUTTER = 3;
+const AUTOCOMPLETE_ITEM_GUTTER = 3;
 /**
  * Space between one selected item and the other
- */
-var AUTOCOMPLETE_ITEM_SPACER = 6;
-var AUTOCOMPLETE_ITEM_REMOVE_WIDTH = 20;
-export var AutocompleteRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-export var AutocompleteLabel = styled(Label)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-export var AutocompleteWrap = styled(InputWrap)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), inputReset);
-export var AutocompleteInner = styled(InputMain)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-wrap: wrap;\n  margin: -", "px;\n  margin-right: 0;\n"], ["\n  display: inline-flex;\n  flex-wrap: wrap;\n  margin: -", "px;\n  margin-right: 0;\n"])), AUTOCOMPLETE_ITEM_SPACER);
-export var AutocompleteItem = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  margin: ", "px;\n  max-width: calc(100% - 6px);\n  user-select: none;\n  align-items: center;\n  padding: 0 ", "px 0 ", "px;\n  font-size: 80%;\n  background: var(--accent400);\n\n  &:hover {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:focus {\n    outline: 0px;\n    background: var(--grey700);\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  margin: ", "px;\n  max-width: calc(100% - 6px);\n  user-select: none;\n  align-items: center;\n  padding: 0 ", "px 0 ", "px;\n  font-size: 80%;\n  background: var(--accent400);\n\n  &:hover {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:focus {\n    outline: 0px;\n    background: var(--grey700);\n  }\n"])), AUTOCOMPLETE_ITEM_GUTTER, AUTOCOMPLETE_ITEM_REMOVE_WIDTH, AUTOCOMPLETE_ITEM_GUTTER);
-export var AutocompleteItemLabel = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 0 ", "px;\n  ", "\n"], ["\n  padding: 0 ", "px;\n  ", "\n"])), AUTOCOMPLETE_ITEM_GUTTER, ellipsis);
-export var AutocompleteItemRemove = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: ", "px;\n  border: 0;\n  height: 100%;\n  color: inherit;\n  line-height: 1;\n"], ["\n  ", "\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: ", "px;\n  border: 0;\n  height: 100%;\n  color: inherit;\n  line-height: 1;\n"])), btnStyleReset, AUTOCOMPLETE_ITEM_REMOVE_WIDTH);
-export var AutocompleteInputWrap = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n"], ["\n  display: flex;\n  flex: 1;\n"])));
-export var AutocompleteInput = styled.input(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-grow: 1;\n  width: 0;\n  min-width: 30px;\n  border: 0;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  background: transparent;\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  flex-grow: 1;\n  width: 0;\n  min-width: 30px;\n  border: 0;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  background: transparent;\n\n  &:focus {\n    outline: none;\n  }\n"])), AUTOCOMPLETE_ITEM_SPACER);
+ */ const AUTOCOMPLETE_ITEM_SPACER = 6;
+const AUTOCOMPLETE_ITEM_REMOVE_WIDTH = 20;
+export const AutocompleteRoot = styled.div`
+  position: relative;
+`;
+export const AutocompleteLabel = styled(Label)``;
+export const AutocompleteWrap = styled(InputWrap)`
+  ${inputReset}
+`;
+export const AutocompleteInner = styled(InputMain)`
+  display: inline-flex;
+  flex-wrap: wrap;
+  margin: -${AUTOCOMPLETE_ITEM_SPACER}px;
+  margin-right: 0;
+`;
+export const AutocompleteItem = styled.span`
+  position: relative;
+  display: inline-flex;
+  margin: ${AUTOCOMPLETE_ITEM_GUTTER}px;
+  max-width: calc(100% - 6px);
+  user-select: none;
+  align-items: center;
+  padding: 0 ${AUTOCOMPLETE_ITEM_REMOVE_WIDTH}px 0 ${AUTOCOMPLETE_ITEM_GUTTER}px;
+  font-size: 80%;
+  background: var(--accent400);
+
+  &:hover {
+    background: var(--accent300);
+    color: white;
+  }
+
+  &:focus {
+    outline: 0px;
+    background: var(--grey700);
+  }
+`;
+export const AutocompleteItemLabel = styled.span`
+  padding: 0 ${AUTOCOMPLETE_ITEM_GUTTER}px;
+  ${ellipsis}
+`;
+export const AutocompleteItemRemove = styled.span`
+  ${btnStyleReset}
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: ${AUTOCOMPLETE_ITEM_REMOVE_WIDTH}px;
+  border: 0;
+  height: 100%;
+  color: inherit;
+  line-height: 1;
+`;
+export const AutocompleteInputWrap = styled.div`
+  display: flex;
+  flex: 1;
+`;
+export const AutocompleteInput = styled.input`
+  flex-grow: 1;
+  width: 0;
+  min-width: 30px;
+  border: 0;
+  padding: 0 ${AUTOCOMPLETE_ITEM_SPACER}px;
+  text-overflow: ellipsis;
+  background: transparent;
+
+  &:focus {
+    outline: none;
+  }
+`;
 /**
  * This cannot be a button otherwise on `Enter` the form would submit instead
  * of opening the dropdown or adding the selection. There are too many events
  * to prevent if we were using a standard HTML `<button>`
- */
-export var AutocompleteInputArrow = styled(SelectArrow)(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""])));
-export var AutocompleteMenu = styled(Menu)(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])));
-export var AutocompleteMenuItem = styled(MenuItem)(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+ */ export const AutocompleteInputArrow = styled(SelectArrow)``;
+export const AutocompleteMenu = styled(Menu)``;
+export const AutocompleteMenuItem = styled(MenuItem)``;

package/Autocomplete/helpers.js

@@ -1,34 +1,34 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.normaliseAutocompleteValue = void 0;
-var tslib_1 = require("tslib");
-var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
-var isArray_1 = tslib_1.__importDefault(require("@koine/utils/isArray"));
-// export function normaliseAutocompleteValue(
-//   value?: AutocompleteValue,
-//   asArray?: true
-// ): string[];
-// export function normaliseAutocompleteValue(
-//   value?: AutocompleteValue,
-//   asArray?: false
-// ): string;
-// export function normaliseAutocompleteValue(
-//   value?: AutocompleteValue,
-//   asArray?: undefined
-// ): string;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "normaliseAutocompleteValue", {
+    enumerable: true,
+    get: function() {
+        return normaliseAutocompleteValue;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _isArray = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isArray"));
+const _isString = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isString"));
 function normaliseAutocompleteValue(value, asArray) {
     if (!value) {
-        return asArray ? [""] : "";
+        return asArray ? [
+            ""
+        ] : "";
     }
-    if ((0, isString_1.default)(value)) {
-        return asArray ? [value] : value;
+    if ((0, _isString.default)(value)) {
+        return asArray ? [
+            value
+        ] : value;
     }
-    if ((0, isArray_1.default)(value)) {
-        var values = value.map(function (valueItem) {
-            return (0, isString_1.default)(valueItem) ? valueItem : valueItem.value;
+    if ((0, _isArray.default)(value)) {
+        const values = value.map((valueItem)=>{
+            return (0, _isString.default)(valueItem) ? valueItem : valueItem.value;
         });
         return asArray ? values : values.join(",");
     }
-    return asArray ? [value.value] : value.value;
+    return asArray ? [
+        value.value
+    ] : value.value;
 }
-exports.normaliseAutocompleteValue = normaliseAutocompleteValue;

package/Autocomplete/helpers.mjs

@@ -1,5 +1,5 @@
-import isString from "@koine/utils/isString";
 import isArray from "@koine/utils/isArray";
+import isString from "@koine/utils/isString";
 // export function normaliseAutocompleteValue(
 //   value?: AutocompleteValue,
 //   asArray?: true
@@ -14,16 +14,22 @@ import isArray from "@koine/utils/isArray";
 // ): string;
 export function normaliseAutocompleteValue(value, asArray) {
     if (!value) {
-        return asArray ? [""] : "";
+        return asArray ? [
+            ""
+        ] : "";
     }
     if (isString(value)) {
-        return asArray ? [value] : value;
+        return asArray ? [
+            value
+        ] : value;
     }
     if (isArray(value)) {
-        var values = value.map(function (valueItem) {
+        const values = value.map((valueItem)=>{
             return isString(valueItem) ? valueItem : valueItem.value;
         });
         return asArray ? values : values.join(",");
     }
-    return asArray ? [value.value] : value.value;
+    return asArray ? [
+        value.value
+    ] : value.value;
 }

package/Autocomplete/index.js

@@ -1,7 +1,15 @@
+// export type { AutocompleteProps } from "./AutocompleteDownshift";
+// export { Autocomplete } from "./AutocompleteDownshift";
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
-var AutocompleteMui_1 = require("./AutocompleteMui");
-Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function () { return AutocompleteMui_1.Autocomplete; } });
-// export type { AutocompleteProps } from "./AutocompleteReach";
-// export { Autocomplete } from "./AutocompleteReach";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Autocomplete", {
+    enumerable: true,
+    get: function() {
+        return _AutocompleteMui.Autocomplete;
+    }
+});
+const _AutocompleteMui = require("./AutocompleteMui");
+ // export type { AutocompleteProps } from "./AutocompleteReach";
+ // export { Autocomplete } from "./AutocompleteReach";

package/Autocomplete/index.mjs

@@ -1,3 +1,4 @@
-export { Autocomplete } from "./AutocompleteMui";
-// export type { AutocompleteProps } from "./AutocompleteReach";
-// export { Autocomplete } from "./AutocompleteReach";
+// export type { AutocompleteProps } from "./AutocompleteDownshift";
+// export { Autocomplete } from "./AutocompleteDownshift";
+export { Autocomplete } from "./AutocompleteMui"; // export type { AutocompleteProps } from "./AutocompleteReach";
+ // export { Autocomplete } from "./AutocompleteReach";

package/Bg/BgColor.js

@@ -1,25 +1,59 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BgContainer = exports.BgColorSkewed = exports.BgColor = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var styles_1 = require("../styles");
-var Grid_1 = require("../Grid");
-exports.BgColor = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (p) { return p.$bg; });
-exports.BgColorSkewed = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  /* overflow: hidden; */\n\n  &:before {\n    z-index: -1;\n    content: \"\";\n    ", "\n  }\n"], ["\n  position: relative;\n  /* overflow: hidden; */\n\n  &:before {\n    z-index: -1;\n    content: \"\";\n    ", "\n  }\n"])), function (p) { return "\n      ".concat(styles_1.overlay, "\n      transform: ").concat(p.$transform, ";\n      background: ").concat(p.$bg, ";\n    "); });
-var BgContainer = function (_a) {
-    var color = _a.color, _b = _a.skewY, skewY = _b === void 0 ? 0 : _b, _c = _a.rotate, rotate = _c === void 0 ? 0 : _c, _d = _a.scaleY, scaleY = _d === void 0 ? 1 : _d, // 0.85,
-    _e = _a.scaleX, // 0.85,
-    scaleX = _e === void 0 ? 1 : _e, // 4,
-    _f = _a.perspective, // 4,
-    perspective = _f === void 0 ? 0 : _f, //100,
-    containerProps = tslib_1.__rest(_a, ["color", "skewY", "rotate", "scaleY", "scaleX", "perspective"]);
-    var $transform = "";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    BgColor: function() {
+        return BgColor;
+    },
+    BgColorSkewed: function() {
+        return BgColorSkewed;
+    },
+    BgContainer: function() {
+        return BgContainer;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _Grid = require("../Grid");
+const _styles = require("../styles");
+const BgColor = _styledcomponents.default.div`
+  background: ${(p)=>p.$bg};
+`;
+const BgColorSkewed = _styledcomponents.default.div`
+  position: relative;
+  /* overflow: hidden; */
+
+  &:before {
+    z-index: -1;
+    content: "";
+    ${(p)=>`
+      ${_styles.overlay}
+      transform: ${p.$transform};
+      background: ${p.$bg};
+    `}
+  }
+`;
+const BgContainer = ({ color, skewY = 0, rotate = 0, scaleY = 1, scaleX = 1, perspective = 0, ...containerProps })=>{
+    let $transform = "";
     if (skewY || rotate) {
-        $transform = "perspective(".concat(perspective, "vw) rotateY(").concat(rotate, "deg) skewY(").concat(skewY, "deg) scaleY(").concat(scaleY, ") scaleX(").concat(scaleX, ")");
+        $transform = `perspective(${perspective}vw) rotateY(${rotate}deg) skewY(${skewY}deg) scaleY(${scaleY}) scaleX(${scaleX})`;
     }
-    return $transform ? ((0, jsx_runtime_1.jsx)(exports.BgColorSkewed, { "$bg": color, "$transform": $transform, children: (0, jsx_runtime_1.jsx)(Grid_1.Container, tslib_1.__assign({ style: { position: "relative" } }, containerProps)) })) : ((0, jsx_runtime_1.jsx)(exports.BgColor, { "$bg": color, children: (0, jsx_runtime_1.jsx)(Grid_1.Container, tslib_1.__assign({}, containerProps)) }));
+    return $transform ? /*#__PURE__*/ React.createElement(BgColorSkewed, {
+        $bg: color,
+        $transform: $transform
+    }, /*#__PURE__*/ React.createElement(_Grid.Container, {
+        style: {
+            position: "relative"
+        },
+        ...containerProps
+    })) : /*#__PURE__*/ React.createElement(BgColor, {
+        $bg: color
+    }, /*#__PURE__*/ React.createElement(_Grid.Container, containerProps));
 };
-exports.BgContainer = BgContainer;
-var templateObject_1, templateObject_2;

package/Bg/BgColor.mjs

@@ -1,21 +1,37 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-import { overlay } from "../styles";
 import { Container } from "../Grid";
-export var BgColor = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (p) { return p.$bg; });
-export var BgColorSkewed = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  /* overflow: hidden; */\n\n  &:before {\n    z-index: -1;\n    content: \"\";\n    ", "\n  }\n"], ["\n  position: relative;\n  /* overflow: hidden; */\n\n  &:before {\n    z-index: -1;\n    content: \"\";\n    ", "\n  }\n"])), function (p) { return "\n      ".concat(overlay, "\n      transform: ").concat(p.$transform, ";\n      background: ").concat(p.$bg, ";\n    "); });
-export var BgContainer = function (_a) {
-    var color = _a.color, _b = _a.skewY, skewY = _b === void 0 ? 0 : _b, _c = _a.rotate, rotate = _c === void 0 ? 0 : _c, _d = _a.scaleY, scaleY = _d === void 0 ? 1 : _d, // 0.85,
-    _e = _a.scaleX, // 0.85,
-    scaleX = _e === void 0 ? 1 : _e, // 4,
-    _f = _a.perspective, // 4,
-    perspective = _f === void 0 ? 0 : _f, //100,
-    containerProps = __rest(_a, ["color", "skewY", "rotate", "scaleY", "scaleX", "perspective"]);
-    var $transform = "";
+import { overlay } from "../styles";
+export const BgColor = styled.div`
+  background: ${(p)=>p.$bg};
+`;
+export const BgColorSkewed = styled.div`
+  position: relative;
+  /* overflow: hidden; */
+
+  &:before {
+    z-index: -1;
+    content: "";
+    ${(p)=>`
+      ${overlay}
+      transform: ${p.$transform};
+      background: ${p.$bg};
+    `}
+  }
+`;
+export const BgContainer = ({ color, skewY = 0, rotate = 0, scaleY = 1, scaleX = 1, perspective = 0, ...containerProps })=>{
+    let $transform = "";
     if (skewY || rotate) {
-        $transform = "perspective(".concat(perspective, "vw) rotateY(").concat(rotate, "deg) skewY(").concat(skewY, "deg) scaleY(").concat(scaleY, ") scaleX(").concat(scaleX, ")");
+        $transform = `perspective(${perspective}vw) rotateY(${rotate}deg) skewY(${skewY}deg) scaleY(${scaleY}) scaleX(${scaleX})`;
     }
-    return $transform ? (_jsx(BgColorSkewed, { "$bg": color, "$transform": $transform, children: _jsx(Container, __assign({ style: { position: "relative" } }, containerProps)) })) : (_jsx(BgColor, { "$bg": color, children: _jsx(Container, __assign({}, containerProps)) }));
+    return $transform ? /*#__PURE__*/ React.createElement(BgColorSkewed, {
+        $bg: color,
+        $transform: $transform
+    }, /*#__PURE__*/ React.createElement(Container, {
+        style: {
+            position: "relative"
+        },
+        ...containerProps
+    })) : /*#__PURE__*/ React.createElement(BgColor, {
+        $bg: color
+    }, /*#__PURE__*/ React.createElement(Container, containerProps));
 };
-var templateObject_1, templateObject_2;

package/Bg/BgPhoto.js

@@ -1,20 +1,80 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BgPhoto = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Grid_1 = require("../Grid");
-var Hidden_1 = require("../Hidden");
-var BgPhotoWrap = (0, styled_components_1.default)(Hidden_1.Hidden)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  z-index: -10;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-position: top left;\n  background-size: contain;\n  filter: hue-rotate(-36deg);\n  opacity: 0.8;\n"], ["\n  z-index: -10;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-position: top left;\n  background-size: contain;\n  filter: hue-rotate(-36deg);\n  opacity: 0.8;\n"])));
-var BgPhotoMask = (0, styled_components_1.default)(Grid_1.Container)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  min-height: 100%;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    right: calc(100% - ", "px);\n    width: ", ";\n    background: linear-gradient(\n        90deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 100%\n      ),\n      linear-gradient(\n        60deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 70%\n      );\n  }\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: ", "px;\n    width: 100vw;\n    background: var(--bodyBg);\n  }\n"], ["\n  position: relative;\n  min-height: 100%;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    right: calc(100% - ", "px);\n    width: ", ";\n    background: linear-gradient(\n        90deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 100%\n      ),\n      linear-gradient(\n        60deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 70%\n      );\n  }\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: ", "px;\n    width: 100vw;\n    background: var(--bodyBg);\n  }\n"])), function (p) { return p.$overlap + 2; }, function (p) {
-    var containerSizePx = p.theme.breakpoints[p.containerSize];
-    return "calc(((100vw - ".concat(containerSizePx, "px) / 2) + ").concat(p.$overlap + 2, "px)");
-}, function (p) { return p.$overlap + 1; });
-var BgPhoto = function (_a) {
-    var src = _a.src, _b = _a.containerSize, containerSize = _b === void 0 ? "xl" : _b, _c = _a.$overlap, $overlap = _c === void 0 ? 0 : _c;
-    var styledProps = { containerSize: containerSize, $overlap: $overlap };
-    return ((0, jsx_runtime_1.jsx)(BgPhotoWrap, { style: { backgroundImage: "url(".concat(src, ")") }, "$max": "xxl", children: (0, jsx_runtime_1.jsx)(BgPhotoMask, tslib_1.__assign({ size: containerSize }, styledProps)) }));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "BgPhoto", {
+    enumerable: true,
+    get: function() {
+        return BgPhoto;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _Grid = require("../Grid");
+const _Hidden = require("../Hidden");
+const BgPhotoWrap = (0, _styledcomponents.default)(_Hidden.Hidden)`
+  z-index: -10;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-position: top left;
+  background-size: contain;
+  filter: hue-rotate(-36deg);
+  opacity: 0.8;
+`;
+const BgPhotoMask = (0, _styledcomponents.default)(_Grid.Container)`
+  position: relative;
+  min-height: 100%;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    right: calc(100% - ${(p)=>p.$overlap + 2}px);
+    width: ${(p)=>{
+    const containerSizePx = p.theme.breakpoints[p.containerSize];
+    return `calc(((100vw - ${containerSizePx}px) / 2) + ${p.$overlap + 2}px)`;
+}};
+    background: linear-gradient(
+        90deg,
+        rgba(var(--bodyBg-rgb, 0)) 0%,
+        rgba(var(--bodyBg-rgb, 1)) 100%
+      ),
+      linear-gradient(
+        60deg,
+        rgba(var(--bodyBg-rgb, 0)) 0%,
+        rgba(var(--bodyBg-rgb, 1)) 70%
+      );
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: ${(p)=>p.$overlap + 1}px;
+    width: 100vw;
+    background: var(--bodyBg);
+  }
+`;
+const BgPhoto = ({ src, containerSize = "xl", $overlap = 0 })=>{
+    const styledProps = {
+        containerSize,
+        $overlap
+    };
+    return /*#__PURE__*/ React.createElement(BgPhotoWrap, {
+        style: {
+            backgroundImage: `url(${src})`
+        },
+        $max: "xxl"
+    }, /*#__PURE__*/ React.createElement(BgPhotoMask, {
+        size: containerSize,
+        ...styledProps
+    }));
 };
-exports.BgPhoto = BgPhoto;
-var templateObject_1, templateObject_2;

package/Bg/BgPhoto.mjs

@@ -1,16 +1,69 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Container } from "../Grid";
 import { Hidden } from "../Hidden";
-var BgPhotoWrap = styled(Hidden)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: -10;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-position: top left;\n  background-size: contain;\n  filter: hue-rotate(-36deg);\n  opacity: 0.8;\n"], ["\n  z-index: -10;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-position: top left;\n  background-size: contain;\n  filter: hue-rotate(-36deg);\n  opacity: 0.8;\n"])));
-var BgPhotoMask = styled(Container)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  min-height: 100%;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    right: calc(100% - ", "px);\n    width: ", ";\n    background: linear-gradient(\n        90deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 100%\n      ),\n      linear-gradient(\n        60deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 70%\n      );\n  }\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: ", "px;\n    width: 100vw;\n    background: var(--bodyBg);\n  }\n"], ["\n  position: relative;\n  min-height: 100%;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    right: calc(100% - ", "px);\n    width: ", ";\n    background: linear-gradient(\n        90deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 100%\n      ),\n      linear-gradient(\n        60deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 70%\n      );\n  }\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: ", "px;\n    width: 100vw;\n    background: var(--bodyBg);\n  }\n"])), function (p) { return p.$overlap + 2; }, function (p) {
-    var containerSizePx = p.theme.breakpoints[p.containerSize];
-    return "calc(((100vw - ".concat(containerSizePx, "px) / 2) + ").concat(p.$overlap + 2, "px)");
-}, function (p) { return p.$overlap + 1; });
-export var BgPhoto = function (_a) {
-    var src = _a.src, _b = _a.containerSize, containerSize = _b === void 0 ? "xl" : _b, _c = _a.$overlap, $overlap = _c === void 0 ? 0 : _c;
-    var styledProps = { containerSize: containerSize, $overlap: $overlap };
-    return (_jsx(BgPhotoWrap, { style: { backgroundImage: "url(".concat(src, ")") }, "$max": "xxl", children: _jsx(BgPhotoMask, __assign({ size: containerSize }, styledProps)) }));
+const BgPhotoWrap = styled(Hidden)`
+  z-index: -10;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-position: top left;
+  background-size: contain;
+  filter: hue-rotate(-36deg);
+  opacity: 0.8;
+`;
+const BgPhotoMask = styled(Container)`
+  position: relative;
+  min-height: 100%;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    right: calc(100% - ${(p)=>p.$overlap + 2}px);
+    width: ${(p)=>{
+    const containerSizePx = p.theme.breakpoints[p.containerSize];
+    return `calc(((100vw - ${containerSizePx}px) / 2) + ${p.$overlap + 2}px)`;
+}};
+    background: linear-gradient(
+        90deg,
+        rgba(var(--bodyBg-rgb, 0)) 0%,
+        rgba(var(--bodyBg-rgb, 1)) 100%
+      ),
+      linear-gradient(
+        60deg,
+        rgba(var(--bodyBg-rgb, 0)) 0%,
+        rgba(var(--bodyBg-rgb, 1)) 70%
+      );
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: ${(p)=>p.$overlap + 1}px;
+    width: 100vw;
+    background: var(--bodyBg);
+  }
+`;
+export const BgPhoto = ({ src, containerSize = "xl", $overlap = 0 })=>{
+    const styledProps = {
+        containerSize,
+        $overlap
+    };
+    return /*#__PURE__*/ React.createElement(BgPhotoWrap, {
+        style: {
+            backgroundImage: `url(${src})`
+        },
+        $max: "xxl"
+    }, /*#__PURE__*/ React.createElement(BgPhotoMask, {
+        size: containerSize,
+        ...styledProps
+    }));
 };
-var templateObject_1, templateObject_2;

package/Bg/BgSvg.js

@@ -1,16 +1,29 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BgSvg = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Root = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: fixed;\n  z-index: -2;\n  bottom: 0;\n  transform: rotate(180deg);\n  opacity: 0.9;\n"], ["\n  position: fixed;\n  z-index: -2;\n  bottom: 0;\n  transform: rotate(180deg);\n  opacity: 0.9;\n"])));
-/**
- * Centered triangle shape
- */
-var BgSvg = function (_a) {
-    var color = _a.color;
-    return ((0, jsx_runtime_1.jsx)(Root, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1200 120", preserveAspectRatio: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M1200 0L0 0 598.97 114.72 1200 0z", fill: color }) }));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "BgSvg", {
+    enumerable: true,
+    get: function() {
+        return BgSvg;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const Root = _styledcomponents.default.svg`
+  position: fixed;
+  z-index: -2;
+  bottom: 0;
+  transform: rotate(180deg);
+  opacity: 0.9;
+`;
+const BgSvg = ({ color })=>{
+    return /*#__PURE__*/ React.createElement(Root, {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1200 120",
+        preserveAspectRatio: "none"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M1200 0L0 0 598.97 114.72 1200 0z",
+        fill: color
+    }));
 };
-exports.BgSvg = BgSvg;
-var templateObject_1;

package/Bg/BgSvg.mjs

@@ -1,12 +1,20 @@
-import { __makeTemplateObject } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-var Root = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: -2;\n  bottom: 0;\n  transform: rotate(180deg);\n  opacity: 0.9;\n"], ["\n  position: fixed;\n  z-index: -2;\n  bottom: 0;\n  transform: rotate(180deg);\n  opacity: 0.9;\n"])));
+const Root = styled.svg`
+  position: fixed;
+  z-index: -2;
+  bottom: 0;
+  transform: rotate(180deg);
+  opacity: 0.9;
+`;
 /**
  * Centered triangle shape
- */
-export var BgSvg = function (_a) {
-    var color = _a.color;
-    return (_jsx(Root, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1200 120", preserveAspectRatio: "none", children: _jsx("path", { d: "M1200 0L0 0 598.97 114.72 1200 0z", fill: color }) }));
+ */ export const BgSvg = ({ color })=>{
+    return /*#__PURE__*/ React.createElement(Root, {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1200 120",
+        preserveAspectRatio: "none"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M1200 0L0 0 598.97 114.72 1200 0z",
+        fill: color
+    }));
 };
-var templateObject_1;