@koine/react 2.0.0-alpha.4 → 2.0.0-beta.10

package/Autocomplete/components.js

@@ -1,37 +1,132 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutocompleteMenuItem = exports.AutocompleteMenu = exports.AutocompleteInputArrow = exports.AutocompleteInput = exports.AutocompleteInputWrap = exports.AutocompleteItemRemove = exports.AutocompleteItemLabel = exports.AutocompleteItem = exports.AutocompleteInner = exports.AutocompleteWrap = exports.AutocompleteLabel = exports.AutocompleteRoot = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Label_1 = require("../Forms/Label/Label");
-var Input_1 = require("../Forms/Input/Input");
-var components_1 = require("../Select/components");
-var Menu_1 = require("../Menu/Menu");
-var MenuItem_1 = require("../MenuItem/MenuItem");
-var Buttons_1 = require("../Buttons");
-var styles_1 = require("../Forms/styles");
-var styled_1 = require("../styles/styled");
-var AUTOCOMPLETE_ITEM_GUTTER = 3;
+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, {
+    AutocompleteRoot: function() {
+        return AutocompleteRoot;
+    },
+    AutocompleteLabel: function() {
+        return AutocompleteLabel;
+    },
+    AutocompleteWrap: function() {
+        return AutocompleteWrap;
+    },
+    AutocompleteInner: function() {
+        return AutocompleteInner;
+    },
+    AutocompleteItem: function() {
+        return AutocompleteItem;
+    },
+    AutocompleteItemLabel: function() {
+        return AutocompleteItemLabel;
+    },
+    AutocompleteItemRemove: function() {
+        return AutocompleteItemRemove;
+    },
+    AutocompleteInputWrap: function() {
+        return AutocompleteInputWrap;
+    },
+    AutocompleteInput: function() {
+        return AutocompleteInput;
+    },
+    AutocompleteInputArrow: function() {
+        return AutocompleteInputArrow;
+    },
+    AutocompleteMenu: function() {
+        return AutocompleteMenu;
+    },
+    AutocompleteMenuItem: function() {
+        return AutocompleteMenuItem;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _Buttons = require("../Buttons");
+const _Input = require("../Forms/Input/Input");
+const _Label = require("../Forms/Label/Label");
+const _styles = require("../Forms/styles");
+const _Menu = require("../Menu/Menu");
+const _MenuItem = require("../MenuItem/MenuItem");
+const _components = require("../Select/components");
+const _styled = require("../styles/styled");
+const AUTOCOMPLETE_ITEM_GUTTER = 3;
 /**
  * Space between one selected item and the other
- */
-var AUTOCOMPLETE_ITEM_SPACER = 6;
-var AUTOCOMPLETE_ITEM_REMOVE_WIDTH = 20;
-exports.AutocompleteRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.AutocompleteLabel = (0, styled_components_1.default)(Label_1.Label)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject([""], [""])));
-exports.AutocompleteWrap = (0, styled_components_1.default)(Input_1.InputWrap)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.inputReset);
-exports.AutocompleteInner = (0, styled_components_1.default)(Input_1.InputMain)(templateObject_4 || (templateObject_4 = tslib_1.__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);
-exports.AutocompleteItem = styled_components_1.default.span(templateObject_5 || (templateObject_5 = tslib_1.__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);
-exports.AutocompleteItemLabel = styled_components_1.default.span(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  padding: 0 ", "px;\n  ", "\n"], ["\n  padding: 0 ", "px;\n  ", "\n"])), AUTOCOMPLETE_ITEM_GUTTER, styled_1.ellipsis);
-exports.AutocompleteItemRemove = styled_components_1.default.span(templateObject_7 || (templateObject_7 = tslib_1.__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"])), Buttons_1.btnStyleReset, AUTOCOMPLETE_ITEM_REMOVE_WIDTH);
-exports.AutocompleteInputWrap = styled_components_1.default.div(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n"], ["\n  display: flex;\n  flex: 1;\n"])));
-exports.AutocompleteInput = styled_components_1.default.input(templateObject_9 || (templateObject_9 = tslib_1.__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);
-/**
- * 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>`
- */
-exports.AutocompleteInputArrow = (0, styled_components_1.default)(components_1.SelectArrow)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject([""], [""])));
-exports.AutocompleteMenu = (0, styled_components_1.default)(Menu_1.Menu)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject([""], [""])));
-exports.AutocompleteMenuItem = (0, styled_components_1.default)(MenuItem_1.MenuItem)(templateObject_12 || (templateObject_12 = tslib_1.__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;
+ */ const AUTOCOMPLETE_ITEM_SPACER = 6;
+const AUTOCOMPLETE_ITEM_REMOVE_WIDTH = 20;
+const AutocompleteRoot = _styledcomponents.default.div`
+  position: relative;
+`;
+const AutocompleteLabel = (0, _styledcomponents.default)(_Label.Label)``;
+const AutocompleteWrap = (0, _styledcomponents.default)(_Input.InputWrap)`
+  ${_styles.inputReset}
+`;
+const AutocompleteInner = (0, _styledcomponents.default)(_Input.InputMain)`
+  display: inline-flex;
+  flex-wrap: wrap;
+  margin: -${AUTOCOMPLETE_ITEM_SPACER}px;
+  margin-right: 0;
+`;
+const AutocompleteItem = _styledcomponents.default.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);
+  }
+`;
+const AutocompleteItemLabel = _styledcomponents.default.span`
+  padding: 0 ${AUTOCOMPLETE_ITEM_GUTTER}px;
+  ${_styled.ellipsis}
+`;
+const AutocompleteItemRemove = _styledcomponents.default.span`
+  ${_Buttons.btnStyleReset}
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: ${AUTOCOMPLETE_ITEM_REMOVE_WIDTH}px;
+  border: 0;
+  height: 100%;
+  color: inherit;
+  line-height: 1;
+`;
+const AutocompleteInputWrap = _styledcomponents.default.div`
+  display: flex;
+  flex: 1;
+`;
+const AutocompleteInput = _styledcomponents.default.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;
+  }
+`;
+const AutocompleteInputArrow = (0, _styledcomponents.default)(_components.SelectArrow)``;
+const AutocompleteMenu = (0, _styledcomponents.default)(_Menu.Menu)``;
+const AutocompleteMenuItem = (0, _styledcomponents.default)(_MenuItem.MenuItem)``;

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.d.ts

@@ -1,12 +1,7 @@
 /// <reference types="react" />
 import { ContainerProps } from "../Grid";
-export declare const BgColor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $bg: BgContainerProps["color"];
-}, never>;
-export declare const BgColorSkewed: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $bg: BgContainerProps["color"];
-    $transform: string;
-}, never>;
+export declare const BgColor: any;
+export declare const BgColorSkewed: any;
 export type BgContainerProps = ContainerProps & {
     color: NonNullable<React.CSSProperties["background"]>;
     /**

package/Bg/BgColor.js

@@ -1,25 +1,64 @@
 "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 _jsxruntime = require("react/jsx-runtime");
+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__*/ (0, _jsxruntime.jsx)(BgColorSkewed, {
+        $bg: color,
+        $transform: $transform,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.Container, {
+            style: {
+                position: "relative"
+            },
+            ...containerProps
+        })
+    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(BgColor, {
+        $bg: color,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.Container, {
+            ...containerProps
+        })
+    });
 };
-exports.BgContainer = BgContainer;
-var templateObject_1, templateObject_2;

package/Bg/BgColor.mjs

@@ -1,21 +1,42 @@
-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__*/ _jsx(BgColorSkewed, {
+        $bg: color,
+        $transform: $transform,
+        children: /*#__PURE__*/ _jsx(Container, {
+            style: {
+                position: "relative"
+            },
+            ...containerProps
+        })
+    }) : /*#__PURE__*/ _jsx(BgColor, {
+        $bg: color,
+        children: /*#__PURE__*/ _jsx(Container, {
+            ...containerProps
+        })
+    });
 };
-var templateObject_1, templateObject_2;