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

package/Autocomplete/AutocompleteReach.js

@@ -1,115 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
-// TODO: remove, just use mui version...
-exports.Autocomplete = null;
-// import {
-//   forwardRef,
-//   useCallback,
-//   useState,
-//   ForwardedRef,
-//   ReactNode,
-//   ComponentPropsWithRef,
-//   CSSProperties,
-//   ChangeEventHandler,
-// } from "react";
-// import {
-//   Combobox,
-//   ComboboxInput,
-//   ComboboxPopover,
-//   ComboboxList,
-//   ComboboxOption,
-//   ComboboxOptionText,
-// } from "@reach/combobox";
-// import {
-//   AutocompleteRoot,
-//   AutocompleteInput,
-//   AutocompleteLabel,
-// } from "./components";
-// import type { Option } from "../types";
-// import type { SetRequired } from "@koine/utils";
-// export type AutocompleteOption =
-//   | null
-//   | (Option & {
-//       key: string;
-//     });
-// export type AutocompleteProps = SetRequired<
-//   ComponentPropsWithRef<"input">,
-//   "onChange" | "name"
-// > & {
-//   onSelect?: (option?: AutocompleteOption) => any;
-//   options: AutocompleteOption[];
-//   loadOptions: (query?: string) => Promise<AutocompleteOption[]>;
-//   label?: string | ReactNode;
-//   className?: string;
-//   style?: CSSProperties;
-//   $ref: ForwardedRef<HTMLInputElement>;
-// };
-// export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
-//   function Autocomplete(
-//     {
-//       options = [],
-//       label,
-//       name,
-//       value,
-//       onChange,
-//       loadOptions,
-//       $ref,
-//       className,
-//       style,
-//       ...props
-//     },
-//     ref
-//   ) {
-//     const [items, setItems] = useState(options);
-//     const [loading, setLoading] = useState(false);
-//     const handleInputValueChange: ChangeEventHandler<HTMLInputElement> =
-//       useCallback(
-//         async (event) => {
-//           const inputValue = event.target.value;
-//           if (loadOptions) {
-//             setLoading(true);
-//             try {
-//               const newOptions = await loadOptions(inputValue);
-//               setItems(newOptions);
-//             } catch (e) {}
-//             setLoading(false);
-//           }
-//         },
-//         [loadOptions]
-//       );
-//     return (
-//       <AutocompleteRoot>
-//         {label && <AutocompleteLabel>{label}</AutocompleteLabel>}
-//         <Combobox aria-label="choose a fruit" openOnFocus={true}>
-//           <AutocompleteInput
-//             forwardedAs={ComboboxInput}
-//             ref={$ref}
-//             onChange={handleInputValueChange}
-//             selectOnClick={true}
-//             autocomplete={false}
-//           />
-//           {(!!items.length || loading) && (
-//             <ComboboxPopover>
-//               <ComboboxList persistSelection>
-//                 {items
-//                   // .filter(item => !inputValue || item.includes(inputValue))
-//                   .map(
-//                     (item, index) =>
-//                       item && (
-//                         <ComboboxOption
-//                           key={`${item.value}${index}`}
-//                           value={item.label}
-//                         >
-//                           <ComboboxOptionText />
-//                         </ComboboxOption>
-//                       )
-//                   )}
-//               </ComboboxList>
-//             </ComboboxPopover>
-//           )}
-//         </Combobox>
-//       </AutocompleteRoot>
-//     );
-//   }
-// );
+export var Autocomplete = null;

package/Autocomplete/components.d.ts

@@ -1,21 +1,12 @@
-/// <reference types="react" />
-export declare const AutocompleteRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItem: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteItemRemove: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInputWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-/**
- * 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 declare const AutocompleteInputArrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Select/components").SelectArrowProps & import("react").RefAttributes<HTMLSpanElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteMenu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const AutocompleteMenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    $active?: boolean | undefined;
-    disabled?: boolean | undefined;
-}, never>;
+export declare const AutocompleteRoot: any;
+export declare const AutocompleteLabel: any;
+export declare const AutocompleteWrap: any;
+export declare const AutocompleteInner: any;
+export declare const AutocompleteItem: any;
+export declare const AutocompleteItemLabel: any;
+export declare const AutocompleteItemRemove: any;
+export declare const AutocompleteInputWrap: any;
+export declare const AutocompleteInput: any;
+export declare const AutocompleteInputArrow: any;
+export declare const AutocompleteMenu: any;
+export declare const AutocompleteMenuItem: any;

package/Autocomplete/components.js

@@ -1,37 +1,26 @@
-"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");
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+import { btnStyleReset } from "../Buttons/index.js";
+import { InputMain, InputWrap } from "../Forms/Input/Input.js";
+import { Label } from "../Forms/Label/Label.js";
+import { inputReset } from "../Forms/styles.js";
+import { Menu } from "../Menu/Menu.js";
+import { MenuItem } from "../MenuItem/MenuItem.js";
+import { SelectArrow } from "../Select/components.js";
+import { ellipsis } from "../styles/styled.js";
 var 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([""], [""])));
+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);
+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;

package/Autocomplete/helpers.d.ts

@@ -1,3 +1,3 @@
-import type { Option } from "../types";
+import type { Option } from "../types.js";
 export type AutocompleteValue = null | undefined | (string | Option)[] | Option | string;
 export declare function normaliseAutocompleteValue(value?: AutocompleteValue, asArray?: boolean): any;

package/Autocomplete/helpers.js

@@ -1,34 +1,16 @@
-"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;
-function normaliseAutocompleteValue(value, asArray) {
+import { isArray, isString } from "@koine/utils";
+export function normaliseAutocompleteValue(value, asArray) {
     if (!value) {
         return asArray ? [""] : "";
     }
-    if ((0, isString_1.default)(value)) {
+    if (isString(value)) {
         return asArray ? [value] : value;
     }
-    if ((0, isArray_1.default)(value)) {
+    if (isArray(value)) {
         var values = value.map(function (valueItem) {
-            return (0, isString_1.default)(valueItem) ? valueItem : valueItem.value;
+            return isString(valueItem) ? valueItem : valueItem.value;
         });
         return asArray ? values : values.join(",");
     }
     return asArray ? [value.value] : value.value;
 }
-exports.normaliseAutocompleteValue = normaliseAutocompleteValue;

package/Autocomplete/index.d.ts

@@ -1,2 +1,2 @@
-export type { AutocompleteProps, AutocompleteConfig } from "./AutocompleteMui";
-export { Autocomplete } from "./AutocompleteMui";
+export type { AutocompleteProps, AutocompleteConfig } from "./AutocompleteMui.js";
+export { Autocomplete } from "./AutocompleteMui.js";

package/Autocomplete/index.js

@@ -1,7 +1 @@
-"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";
+export { Autocomplete } from "./AutocompleteMui.js";

package/Bg/BgColor.d.ts

@@ -1,36 +1,12 @@
-/// <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>;
+import { ContainerProps } from "../Grid/index.js";
+export declare const BgColor: any;
+export declare const BgColorSkewed: any;
 export type BgContainerProps = ContainerProps & {
     color: NonNullable<React.CSSProperties["background"]>;
-    /**
-     * In `deg` unit.
-     * @default 0
-     */
     skewY?: number;
-    /**
-     * In `deg` unit. Suggested `10` to `20`
-     * @default 0
-     */
     rotate?: number;
-    /**
-     * @default  1
-     */
     scaleY?: number;
-    /**
-     * @default 1
-     */
     scaleX?: number;
-    /**
-     * In `vw` unit
-     * @default 0
-     */
     perspective?: number;
 };
 export declare const BgContainer: ({ color, skewY, rotate, scaleY, scaleX, perspective, ...containerProps }: BgContainerProps) => import("react/jsx-runtime").JSX.Element;

package/Bg/BgColor.js

@@ -1,25 +1,16 @@
-"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"]);
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Container } from "../Grid/index.js";
+import { overlay } from "../styles/index.js";
+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, _e = _a.scaleX, scaleX = _e === void 0 ? 1 : _e, _f = _a.perspective, perspective = _f === void 0 ? 0 : _f, containerProps = __rest(_a, ["color", "skewY", "rotate", "scaleY", "scaleX", "perspective"]);
     var $transform = "";
     if (skewY || rotate) {
         $transform = "perspective(".concat(perspective, "vw) rotateY(").concat(rotate, "deg) skewY(").concat(skewY, "deg) scaleY(").concat(scaleY, ") scaleX(").concat(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 ? (_jsx(BgColorSkewed, { "$bg": color, "$transform": $transform, children: _jsx(Container, __assign({ style: { position: "relative" } }, containerProps)) })) : (_jsx(BgColor, { "$bg": color, children: _jsx(Container, __assign({}, containerProps)) }));
 };
-exports.BgContainer = BgContainer;
 var templateObject_1, templateObject_2;

package/Bg/BgPhoto.d.ts

@@ -1,13 +1,8 @@
-import { ContainerProps } from "../Grid";
+import { ContainerProps } from "../Grid/index.js";
 export type BgPhotoPropsStyled = Required<Pick<BgPhotoProps, "containerSize" | "$overlap">>;
 export type BgPhotoProps = {
     src: string;
     containerSize?: ContainerProps["size"];
-    /**
-     * Bg photo overlap on container, in px
-     *
-     * @default 0
-     */
     $overlap?: number;
 };
 export declare const BgPhoto: ({ src, containerSize, $overlap, }: BgPhotoProps) => import("react/jsx-runtime").JSX.Element;

package/Bg/BgPhoto.js

@@ -1,20 +1,16 @@
-"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) {
+import { __assign, __makeTemplateObject } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Container } from "../Grid/index.js";
+import { Hidden } from "../Hidden/index.js";
+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; });
-var BgPhoto = function (_a) {
+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 ((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)) }));
+    return (_jsx(BgPhotoWrap, { style: { backgroundImage: "url(".concat(src, ")") }, "$max": "xxl", children: _jsx(BgPhotoMask, __assign({ size: containerSize }, styledProps)) }));
 };
-exports.BgPhoto = BgPhoto;
 var templateObject_1, templateObject_2;

package/Bg/BgSvg.d.ts

@@ -1,7 +1,4 @@
 export type BgSvgProps = {
     color: string;
 };
-/**
- * Centered triangle shape
- */
 export declare const BgSvg: ({ color }: BgSvgProps) => import("react/jsx-runtime").JSX.Element;

package/Bg/BgSvg.js

@@ -1,16 +1,9 @@
-"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) {
+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"])));
+export 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 }) }));
+    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 }) }));
 };
-exports.BgSvg = BgSvg;
 var templateObject_1;

package/Bg/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./BgColor";
-export * from "./BgPhoto";
-export * from "./BgSvg";
+export * from "./BgColor.js";
+export * from "./BgPhoto.js";
+export * from "./BgSvg.js";

package/Bg/index.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./BgColor"), exports);
-tslib_1.__exportStar(require("./BgPhoto"), exports);
-tslib_1.__exportStar(require("./BgSvg"), exports);
+export * from "./BgColor.js";
+export * from "./BgPhoto.js";
+export * from "./BgSvg.js";

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import { KoineComponentProps, KoineComponent } from "../types";
+import { KoineComponent, KoineComponentProps } from "../types.js";
 export type BreadcrumbsItem = {
     title: string;
     url?: string;

package/Breadcrumbs/Breadcrumbs.js

@@ -1,31 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineBreadcrumbs = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importStar(require("styled-components"));
-var framer_motion_1 = require("framer-motion");
-var md_1 = require("react-icons/md");
-var titleCase_1 = tslib_1.__importDefault(require("@koine/utils/titleCase"));
-var media_1 = require("../styles/media");
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { m } from "framer-motion";
+import { MdKeyboardArrowRight as IconDelimiter } from "react-icons/md";
+import styled, { css } from "styled-components";
+import { titleCase } from "@koine/utils";
+import { max, min } from "../styles/media.js";
 var LINK_GUTTER_X = 10;
-var Root = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  position: relative;\n"], ["\n  display: flex;\n  position: relative;\n"])));
-var Inner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  font-size: 11px;\n  color: var(--grey100);\n  ", " {\n    font-size: 12px;\n  }\n  ", " {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"], ["\n  display: flex;\n  font-size: 11px;\n  color: var(--grey100);\n  ", " {\n    font-size: 12px;\n  }\n  ", " {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"])), media_1.min.sm, media_1.max.lg);
-var Item = (0, styled_components_1.default)(framer_motion_1.m.div)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* margin: 0 10px 0 0; */\n\n  &:first-child {\n    margin-left: -", "px;\n  }\n  ", " {\n    &:first-child {\n      margin-left: -", "px;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  /* margin: 0 10px 0 0; */\n\n  &:first-child {\n    margin-left: -", "px;\n  }\n  ", " {\n    &:first-child {\n      margin-left: -", "px;\n    }\n  }\n"])), LINK_GUTTER_X / 2, media_1.min.sm, LINK_GUTTER_X);
-var itemChild = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  display: block;\n  padding: 10px ", "px;\n\n  ", " {\n    padding: 10px ", "px;\n  }\n"], ["\n  display: block;\n  padding: 10px ", "px;\n\n  ", " {\n    padding: 10px ", "px;\n  }\n"])), LINK_GUTTER_X / 2, media_1.min.sm, LINK_GUTTER_X);
-var ItemLink = styled_components_1.default.a(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  ", "\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n"])), itemChild);
-var ItemCurrent = styled_components_1.default.span(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), itemChild);
-var ItemSeparator = (0, styled_components_1.default)(md_1.MdKeyboardArrowRight)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject([""], [""])));
-var KoineBreadcrumbs = function (_a) {
-    var _b = _a.items, items = _b === void 0 ? [] : _b, Link = _a.Link, props = tslib_1.__rest(_a, ["items", "Link"]);
+var Root = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n"], ["\n  display: flex;\n  position: relative;\n"])));
+var Inner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  font-size: 11px;\n  color: var(--grey100);\n  ", " {\n    font-size: 12px;\n  }\n  ", " {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"], ["\n  display: flex;\n  font-size: 11px;\n  color: var(--grey100);\n  ", " {\n    font-size: 12px;\n  }\n  ", " {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"])), min.sm, max.lg);
+var Item = styled(m.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* margin: 0 10px 0 0; */\n\n  &:first-child {\n    margin-left: -", "px;\n  }\n  ", " {\n    &:first-child {\n      margin-left: -", "px;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  /* margin: 0 10px 0 0; */\n\n  &:first-child {\n    margin-left: -", "px;\n  }\n  ", " {\n    &:first-child {\n      margin-left: -", "px;\n    }\n  }\n"])), LINK_GUTTER_X / 2, min.sm, LINK_GUTTER_X);
+var itemChild = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  padding: 10px ", "px;\n\n  ", " {\n    padding: 10px ", "px;\n  }\n"], ["\n  display: block;\n  padding: 10px ", "px;\n\n  ", " {\n    padding: 10px ", "px;\n  }\n"])), LINK_GUTTER_X / 2, min.sm, LINK_GUTTER_X);
+var ItemLink = styled.a(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  ", "\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n"])), itemChild);
+var ItemCurrent = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), itemChild);
+var ItemSeparator = styled(IconDelimiter)(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
+export var KoineBreadcrumbs = function (_a) {
+    var _b = _a.items, items = _b === void 0 ? [] : _b, Link = _a.Link, props = __rest(_a, ["items", "Link"]);
     if (!items.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({}, props, { children: (0, jsx_runtime_1.jsx)(Inner, { children: items.map(function (item, idx) { return ((0, jsx_runtime_1.jsxs)(Item, { initial: { opacity: 0, x: 20 }, animate: {
+    return (_jsx(Root, __assign({}, props, { children: _jsx(Inner, { children: items.map(function (item, idx) { return (_jsxs(Item, { initial: { opacity: 0, x: 20 }, animate: {
                     opacity: 1,
                     x: 0,
                     transition: { delay: idx * 0.2 },
-                }, children: [item.url && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: item.url, children: (0, titleCase_1.default)(item.title) })), !item.url && (0, jsx_runtime_1.jsx)(ItemCurrent, { children: (0, titleCase_1.default)(item.title) }), idx < items.length - 1 && (0, jsx_runtime_1.jsx)(ItemSeparator, {})] }, idx)); }) }) })));
+                }, children: [item.url && (_jsx(ItemLink, { as: Link, href: item.url, children: titleCase(item.title) })), !item.url && _jsx(ItemCurrent, { children: titleCase(item.title) }), idx < items.length - 1 && _jsx(ItemSeparator, {})] }, idx)); }) }) })));
 };
-exports.KoineBreadcrumbs = KoineBreadcrumbs;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Breadcrumbs/index.d.ts

@@ -1 +1 @@
-export * from "./Breadcrumbs";
+export * from "./Breadcrumbs.js";

package/Breadcrumbs/index.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Breadcrumbs"), exports);
+export * from "./Breadcrumbs.js";

package/Buttons/Button.d.ts

@@ -1,14 +1,10 @@
 /// <reference types="react" />
-/**
- * Prevent 300ms delay with `touch-action` performance optimization,
- * @see https://twitter.com/argyleink/status/1405881231695302659
- */
 export declare const btnStyleUndo: import("styled-components").FlattenSimpleInterpolation;
 export declare const btnStyleReset: import("styled-components").FlattenSimpleInterpolation;
 export declare const btnStyleBase: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<KoineButtonUiProps, import("styled-components").DefaultTheme>>;
 export declare const btnStyleContained: import("styled-components").FlattenSimpleInterpolation;
 export declare const btnStyleOutlined: import("styled-components").FlattenSimpleInterpolation;
-export declare const KoineButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, KoineButtonUiProps, never>;
+export declare const KoineButton: any;
 export type KoineButtonUiProps = {
     disabled?: boolean;
     $variant?: "contained" | "outlined";