@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

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.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.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.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;

package/Bg/BgPhoto.mjs

@@ -1,16 +1,71 @@
-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__*/ _jsx(BgPhotoWrap, {
+        style: {
+            backgroundImage: `url(${src})`
+        },
+        $max: "xxl",
+        children: /*#__PURE__*/ _jsx(BgPhotoMask, {
+            size: containerSize,
+            ...styledProps
+        })
+    });
 };
-var templateObject_1, templateObject_2;

package/Bg/BgSvg.mjs

@@ -1,12 +1,22 @@
-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__*/ _jsx(Root, {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1200 120",
+        preserveAspectRatio: "none",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M1200 0L0 0 598.97 114.72 1200 0z",
+            fill: color
+        })
+    });
 };
-var templateObject_1;

package/Breadcrumbs/Breadcrumbs.d.ts

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

package/Breadcrumbs/Breadcrumbs.mjs

@@ -1,27 +1,91 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from "styled-components";
 import { m } from "framer-motion";
 import { MdKeyboardArrowRight as IconDelimiter } from "react-icons/md";
+import styled, { css } from "styled-components";
 import titleCase from "@koine/utils/titleCase";
 import { max, min } from "../styles/media";
-var LINK_GUTTER_X = 10;
-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"]);
+const LINK_GUTTER_X = 10;
+const Root = styled.nav`
+  display: flex;
+  position: relative;
+`;
+const Inner = styled.div`
+  display: flex;
+  font-size: 11px;
+  color: var(--grey100);
+  ${min.sm} {
+    font-size: 12px;
+  }
+  ${max.lg} {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+`;
+const Item = styled(m.div)`
+  display: flex;
+  align-items: center;
+  /* margin: 0 10px 0 0; */
+
+  &:first-child {
+    margin-left: -${LINK_GUTTER_X / 2}px;
+  }
+  ${min.sm} {
+    &:first-child {
+      margin-left: -${LINK_GUTTER_X}px;
+    }
+  }
+`;
+const itemChild = css`
+  display: block;
+  padding: 10px ${LINK_GUTTER_X / 2}px;
+
+  ${min.sm} {
+    padding: 10px ${LINK_GUTTER_X}px;
+  }
+`;
+const ItemLink = styled.a`
+  ${itemChild}
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const ItemCurrent = styled.span`
+  ${itemChild}
+`;
+const ItemSeparator = styled(IconDelimiter)``;
+export const KoineBreadcrumbs = ({ items = [], Link, ...props })=>{
     if (!items.length) {
         return null;
     }
-    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 && (_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)); }) }) })));
+    return /*#__PURE__*/ _jsx(Root, {
+        ...props,
+        children: /*#__PURE__*/ _jsx(Inner, {
+            children: items.map((item, idx)=>/*#__PURE__*/ _jsxs(Item, {
+                    initial: {
+                        opacity: 0,
+                        x: 20
+                    },
+                    animate: {
+                        opacity: 1,
+                        x: 0,
+                        transition: {
+                            delay: idx * 0.2
+                        }
+                    },
+                    children: [
+                        item.url && /*#__PURE__*/ _jsx(ItemLink, {
+                            as: Link,
+                            href: item.url,
+                            children: titleCase(item.title)
+                        }),
+                        !item.url && /*#__PURE__*/ _jsx(ItemCurrent, {
+                            children: titleCase(item.title)
+                        }),
+                        idx < items.length - 1 && /*#__PURE__*/ _jsx(ItemSeparator, {})
+                    ]
+                }, idx))
+        })
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Buttons/Button.d.ts

@@ -8,7 +8,7 @@ export declare const btnStyleReset: import("styled-components").FlattenSimpleInt
 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";

package/Buttons/Button.mjs

@@ -1,14 +1,78 @@
-import { __makeTemplateObject } from "tslib";
 import styled, { css } from "styled-components";
 import { stateFocus } from "../styles/styled";
 /**
  * Prevent 300ms delay with `touch-action` performance optimization,
  * @see https://twitter.com/argyleink/status/1405881231695302659
- */
-export var btnStyleUndo = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  appearance: none;\n  -webkit-appearance: none;\n  -webkit-touch-callout: none;\n  user-select: none;\n  touch-action: manipulation;\n  outline: 0px;\n  color: var(--bodyColor);\n"], ["\n  appearance: none;\n  -webkit-appearance: none;\n  -webkit-touch-callout: none;\n  user-select: none;\n  touch-action: manipulation;\n  outline: 0px;\n  color: var(--bodyColor);\n"])));
-export var btnStyleReset = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border-width: 1px;\n  border-style: solid;\n  border-color: transparent;\n  cursor: pointer;\n  ", "\n\n  &[disabled] {\n    cursor: default;\n    opacity: 0.7;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border-width: 1px;\n  border-style: solid;\n  border-color: transparent;\n  cursor: pointer;\n  ", "\n\n  &[disabled] {\n    cursor: default;\n    opacity: 0.7;\n  }\n"])), btnStyleUndo);
-export var btnStyleBase = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n\n  min-width: ", ";\n  padding: ", ";\n  border-radius: 0;\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: 600;\n  ", "\n\n  &:focus,\n  &:active,\n  &:visited {\n    ", "\n  }\n\n  /* This targets icons within a button */\n  & svg {\n    margin: 0 1em 0 0;\n    font-size: 1.25em;\n  }\n"], ["\n  ", "\n\n  min-width: ", ";\n  padding: ", ";\n  border-radius: 0;\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: 600;\n  ", "\n\n  &:focus,\n  &:active,\n  &:visited {\n    ", "\n  }\n\n  /* This targets icons within a button */\n  & svg {\n    margin: 0 1em 0 0;\n    font-size: 1.25em;\n  }\n"])), btnStyleReset, function (p) { return (p.$noGutter ? "0" : "150px"); }, function (p) { return (p.$noGutter ? "0" : "10px 30px"); }, function (p) { return p.$block && "width: 100%; display: flex;"; }, stateFocus);
-export var btnStyleContained = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: white;\n  background: var(--accent200);\n  border-color: var(--accent200);\n\n  &:hover:not([disabled]) {\n    background: var(--accent300);\n    border-color: var(--accent300);\n  }\n"], ["\n  color: white;\n  background: var(--accent200);\n  border-color: var(--accent200);\n\n  &:hover:not([disabled]) {\n    background: var(--accent300);\n    border-color: var(--accent300);\n  }\n"])));
-export var btnStyleOutlined = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: var(--accent200);\n  border-color: var(--accent200);\n\n  &:hover:not([disabled]) {\n    background: var(--accent300);\n    border-color: var(--accent300);\n    color: white;\n  }\n"], ["\n  color: var(--accent200);\n  border-color: var(--accent200);\n\n  &:hover:not([disabled]) {\n    background: var(--accent300);\n    border-color: var(--accent300);\n    color: white;\n  }\n"])));
-export var KoineButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), btnStyleBase, function (p) { return p.$variant === "outlined" && btnStyleOutlined; }, function (p) { return p.$variant === "contained" && btnStyleContained; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+ */ export const btnStyleUndo = css`
+  appearance: none;
+  -webkit-appearance: none;
+  -webkit-touch-callout: none;
+  user-select: none;
+  touch-action: manipulation;
+  outline: 0px;
+  color: var(--bodyColor);
+`;
+export const btnStyleReset = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  cursor: pointer;
+  ${btnStyleUndo}
+
+  &[disabled] {
+    cursor: default;
+    opacity: 0.7;
+  }
+`;
+export const btnStyleBase = css`
+  ${btnStyleReset}
+
+  min-width: ${(p)=>p.$noGutter ? "0" : "150px"};
+  padding: ${(p)=>p.$noGutter ? "0" : "10px 30px"};
+  border-radius: 0;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: 600;
+  ${(p)=>p.$block && `width: 100%; display: flex;`}
+
+  &:focus,
+  &:active,
+  &:visited {
+    ${stateFocus}
+  }
+
+  /* This targets icons within a button */
+  & svg {
+    margin: 0 1em 0 0;
+    font-size: 1.25em;
+  }
+`;
+export const btnStyleContained = css`
+  color: white;
+  background: var(--accent200);
+  border-color: var(--accent200);
+
+  &:hover:not([disabled]) {
+    background: var(--accent300);
+    border-color: var(--accent300);
+  }
+`;
+export const btnStyleOutlined = css`
+  color: var(--accent200);
+  border-color: var(--accent200);
+
+  &:hover:not([disabled]) {
+    background: var(--accent300);
+    border-color: var(--accent300);
+    color: white;
+  }
+`;
+export const KoineButton = styled.button`
+  ${btnStyleBase}
+  ${(p)=>p.$variant === "outlined" && btnStyleOutlined}
+  ${(p)=>p.$variant === "contained" && btnStyleContained}
+`;

package/Buttons/ButtonComposite.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { IconBaseProps, IconType } from "react-icons/lib";
-import { KoineComponentProps, KoineComponent } from "../types";
+import { KoineComponent, KoineComponentProps } from "../types";
 import { KoineButtonProps } from "./Button";
 import { ButtonLinkProps } from "./ButtonLink";
 export type KoineButtonCompositeProps = KoineButtonProps & Omit<ButtonLinkProps, "Koine"> & {