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

package/Bg/index.js

@@ -1,6 +1,8 @@
 "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);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./BgColor"), exports);
+_export_star._(require("./BgPhoto"), exports);
+_export_star._(require("./BgSvg"), exports);

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

@@ -1,31 +1,90 @@
 "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");
-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"]);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "KoineBreadcrumbs", {
+    enumerable: true,
+    get: function() {
+        return KoineBreadcrumbs;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _framermotion = require("framer-motion");
+const _md = require("react-icons/md");
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
+const _titleCase = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/titleCase"));
+const _media = require("../styles/media");
+const LINK_GUTTER_X = 10;
+const Root = _styledcomponents.default.nav`
+  display: flex;
+  position: relative;
+`;
+const Inner = _styledcomponents.default.div`
+  display: flex;
+  font-size: 11px;
+  color: var(--grey100);
+  ${_media.min.sm} {
+    font-size: 12px;
+  }
+  ${_media.max.lg} {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+`;
+const Item = (0, _styledcomponents.default)(_framermotion.m.div)`
+  display: flex;
+  align-items: center;
+  /* margin: 0 10px 0 0; */
+
+  &:first-child {
+    margin-left: -${LINK_GUTTER_X / 2}px;
+  }
+  ${_media.min.sm} {
+    &:first-child {
+      margin-left: -${LINK_GUTTER_X}px;
+    }
+  }
+`;
+const itemChild = (0, _styledcomponents.css)`
+  display: block;
+  padding: 10px ${LINK_GUTTER_X / 2}px;
+
+  ${_media.min.sm} {
+    padding: 10px ${LINK_GUTTER_X}px;
+  }
+`;
+const ItemLink = _styledcomponents.default.a`
+  ${itemChild}
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const ItemCurrent = _styledcomponents.default.span`
+  ${itemChild}
+`;
+const ItemSeparator = (0, _styledcomponents.default)(_md.MdKeyboardArrowRight)``;
+const KoineBreadcrumbs = ({ items = [], Link, ...props })=>{
     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: {
-                    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)); }) }) })));
+    return /*#__PURE__*/ React.createElement(Root, props, /*#__PURE__*/ React.createElement(Inner, null, items.map((item, idx)=>/*#__PURE__*/ React.createElement(Item, {
+            key: idx,
+            initial: {
+                opacity: 0,
+                x: 20
+            },
+            animate: {
+                opacity: 1,
+                x: 0,
+                transition: {
+                    delay: idx * 0.2
+                }
+            }
+        }, item.url && /*#__PURE__*/ React.createElement(ItemLink, {
+            as: Link,
+            href: item.url
+        }, (0, _titleCase.default)(item.title)), !item.url && /*#__PURE__*/ React.createElement(ItemCurrent, null, (0, _titleCase.default)(item.title)), idx < items.length - 1 && /*#__PURE__*/ React.createElement(ItemSeparator, null)))));
 };
-exports.KoineBreadcrumbs = KoineBreadcrumbs;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Breadcrumbs/Breadcrumbs.mjs

@@ -1,27 +1,78 @@
-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__*/ React.createElement(Root, props, /*#__PURE__*/ React.createElement(Inner, null, items.map((item, idx)=>/*#__PURE__*/ React.createElement(Item, {
+            key: idx,
+            initial: {
+                opacity: 0,
+                x: 20
+            },
+            animate: {
+                opacity: 1,
+                x: 0,
+                transition: {
+                    delay: idx * 0.2
+                }
+            }
+        }, item.url && /*#__PURE__*/ React.createElement(ItemLink, {
+            as: Link,
+            href: item.url
+        }, titleCase(item.title)), !item.url && /*#__PURE__*/ React.createElement(ItemCurrent, null, titleCase(item.title)), idx < items.length - 1 && /*#__PURE__*/ React.createElement(ItemSeparator, null)))));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Breadcrumbs/index.js

@@ -1,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Breadcrumbs"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Breadcrumbs"), exports);

package/Buttons/Button.js

@@ -1,17 +1,106 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineButton = exports.btnStyleOutlined = exports.btnStyleContained = exports.btnStyleBase = exports.btnStyleReset = exports.btnStyleUndo = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importStar(require("styled-components"));
-var styled_1 = require("../styles/styled");
-/**
- * Prevent 300ms delay with `touch-action` performance optimization,
- * @see https://twitter.com/argyleink/status/1405881231695302659
- */
-exports.btnStyleUndo = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_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"])));
-exports.btnStyleReset = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__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"])), exports.btnStyleUndo);
-exports.btnStyleBase = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__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"])), exports.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;"; }, styled_1.stateFocus);
-exports.btnStyleContained = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__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"])));
-exports.btnStyleOutlined = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__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"])));
-exports.KoineButton = styled_components_1.default.button(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n"])), exports.btnStyleBase, function (p) { return p.$variant === "outlined" && exports.btnStyleOutlined; }, function (p) { return p.$variant === "contained" && exports.btnStyleContained; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+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, {
+    btnStyleUndo: function() {
+        return btnStyleUndo;
+    },
+    btnStyleReset: function() {
+        return btnStyleReset;
+    },
+    btnStyleBase: function() {
+        return btnStyleBase;
+    },
+    btnStyleContained: function() {
+        return btnStyleContained;
+    },
+    btnStyleOutlined: function() {
+        return btnStyleOutlined;
+    },
+    KoineButton: function() {
+        return KoineButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
+const _styled = require("../styles/styled");
+const btnStyleUndo = (0, _styledcomponents.css)`
+  appearance: none;
+  -webkit-appearance: none;
+  -webkit-touch-callout: none;
+  user-select: none;
+  touch-action: manipulation;
+  outline: 0px;
+  color: var(--bodyColor);
+`;
+const btnStyleReset = (0, _styledcomponents.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;
+  }
+`;
+const btnStyleBase = (0, _styledcomponents.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 {
+    ${_styled.stateFocus}
+  }
+
+  /* This targets icons within a button */
+  & svg {
+    margin: 0 1em 0 0;
+    font-size: 1.25em;
+  }
+`;
+const btnStyleContained = (0, _styledcomponents.css)`
+  color: white;
+  background: var(--accent200);
+  border-color: var(--accent200);
+
+  &:hover:not([disabled]) {
+    background: var(--accent300);
+    border-color: var(--accent300);
+  }
+`;
+const btnStyleOutlined = (0, _styledcomponents.css)`
+  color: var(--accent200);
+  border-color: var(--accent200);
+
+  &:hover:not([disabled]) {
+    background: var(--accent300);
+    border-color: var(--accent300);
+    color: white;
+  }
+`;
+const KoineButton = _styledcomponents.default.button`
+  ${btnStyleBase}
+  ${(p)=>p.$variant === "outlined" && btnStyleOutlined}
+  ${(p)=>p.$variant === "contained" && btnStyleContained}
+`;

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"> & {

package/Buttons/ButtonComposite.js

@@ -1,32 +1,83 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineButtonComposite = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var Root = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  min-width: 0;\n\n  & svg {\n    font-size: 2em !important;\n    margin: 0 0.33em 0 0 !important;\n  }\n"], ["\n  ", "\n  min-width: 0;\n\n  & svg {\n    font-size: 2em !important;\n    margin: 0 0.33em 0 0 !important;\n  }\n"])), function (p) {
-    return p.$icon ? "display: flex;" : "display: inline-block; text-align: left;";
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-var ButtonCompositeIcon = styled_components_1.default.svg(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  float: left;\n"], ["\n  float: left;\n"])));
-var BesidesIcon = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  text-align: left;\n  line-height: 1.2;\n"], ["\n  text-align: left;\n  line-height: 1.2;\n"])));
-var Main = styled_components_1.default.span(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  display: block;\n  font-size: 0.9em;\n\n  &:last-child {\n    margin-top: ", ";\n  }\n"], ["\n  display: block;\n  font-size: 0.9em;\n\n  &:last-child {\n    margin-top: ", ";\n  }\n"])), function (p) { return (p.$reverse && !p.$icon ? "0.5em" : "0"); });
-var Sub = styled_components_1.default.span(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  display: block;\n  text-transform: none;\n  font-size: 0.7em;\n  font-weight: 500;\n\n  ", " + & {\n    margin-top: ", ";\n  }\n"], ["\n  display: block;\n  text-transform: none;\n  font-size: 0.7em;\n  font-weight: 500;\n\n  ", " + & {\n    margin-top: ", ";\n  }\n"])), Main, function (p) { return (p.$reverse && !p.$icon ? "0.5em" : "0"); });
-var Text = styled_components_1.default.span(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject([""], [""])));
-var Inner = (0, react_1.memo)(function (_a) {
-    var textMain = _a.textMain, textSub = _a.textSub, text = _a.text, $reverse = _a.$reverse, $icon = _a.$icon;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [$reverse ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [textSub && ((0, jsx_runtime_1.jsx)(Sub, { "$icon": $icon, "$reverse": $reverse, children: textSub })), textMain && ((0, jsx_runtime_1.jsx)(Main, { "$icon": $icon, "$reverse": $reverse, children: textMain }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [textMain && ((0, jsx_runtime_1.jsx)(Main, { "$icon": $icon, "$reverse": $reverse, children: textMain })), textSub && ((0, jsx_runtime_1.jsx)(Sub, { "$icon": $icon, "$reverse": $reverse, children: textSub }))] })), text && (0, jsx_runtime_1.jsx)(Text, { children: text })] }));
+Object.defineProperty(exports, "KoineButtonComposite", {
+    enumerable: true,
+    get: function() {
+        return KoineButtonComposite;
+    }
 });
-var KoineButtonComposite = function (_a) {
-    var Icon = _a.Icon, _b = _a.iconProps, iconProps = _b === void 0 ? {} : _b, textMain = _a.textMain, textSub = _a.textSub, textReverse = _a.textReverse, text = _a.text, _c = _a.Button, Button = _c === void 0 ? "button" : _c, _d = _a.ButtonLink, ButtonLink = _d === void 0 ? "a" : _d, props = tslib_1.__rest(_a, ["Icon", "iconProps", "textMain", "textSub", "textReverse", "text", "Button", "ButtonLink"]);
-    var Btn = props.href ? ButtonLink : Button;
-    var styledProps = {
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _react = require("react");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const Root = _styledcomponents.default.span`
+  ${(p)=>p.$icon ? `display: flex;` : `display: inline-block; text-align: left;`}
+  min-width: 0;
+
+  & svg {
+    font-size: 2em !important;
+    margin: 0 0.33em 0 0 !important;
+  }
+`;
+const ButtonCompositeIcon = _styledcomponents.default.svg`
+  float: left;
+`;
+const BesidesIcon = _styledcomponents.default.span`
+  text-align: left;
+  line-height: 1.2;
+`;
+const Main = _styledcomponents.default.span`
+  display: block;
+  font-size: 0.9em;
+
+  &:last-child {
+    margin-top: ${(p)=>p.$reverse && !p.$icon ? "0.5em" : "0"};
+  }
+`;
+const Sub = _styledcomponents.default.span`
+  display: block;
+  text-transform: none;
+  font-size: 0.7em;
+  font-weight: 500;
+
+  ${Main} + & {
+    margin-top: ${(p)=>p.$reverse && !p.$icon ? "0.5em" : "0"};
+  }
+`;
+const Text = _styledcomponents.default.span``;
+const Inner = /*#__PURE__*/ (0, _react.memo)(({ textMain, textSub, text, $reverse, $icon })=>/*#__PURE__*/ React.createElement(React.Fragment, null, $reverse ? /*#__PURE__*/ React.createElement(React.Fragment, null, textSub && /*#__PURE__*/ React.createElement(Sub, {
+        $icon: $icon,
+        $reverse: $reverse
+    }, textSub), textMain && /*#__PURE__*/ React.createElement(Main, {
+        $icon: $icon,
+        $reverse: $reverse
+    }, textMain)) : /*#__PURE__*/ React.createElement(React.Fragment, null, textMain && /*#__PURE__*/ React.createElement(Main, {
+        $icon: $icon,
+        $reverse: $reverse
+    }, textMain), textSub && /*#__PURE__*/ React.createElement(Sub, {
+        $icon: $icon,
+        $reverse: $reverse
+    }, textSub)), text && /*#__PURE__*/ React.createElement(Text, null, text)));
+const KoineButtonComposite = ({ Icon, iconProps = {}, textMain, textSub, textReverse, text, Button = "button", ButtonLink = "a", ...props })=>{
+    const Btn = props.href ? ButtonLink : Button;
+    const styledProps = {
         $icon: !!Icon,
         $reverse: textReverse,
-        $twoLines: !!(textMain && textSub && !Icon),
+        $twoLines: !!(textMain && textSub && !Icon)
     };
-    var innerProps = tslib_1.__assign({ textMain: textMain, textSub: textSub, text: text }, styledProps);
-    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ as: Btn }, props, styledProps, { children: [Icon && (0, jsx_runtime_1.jsx)(ButtonCompositeIcon, tslib_1.__assign({ as: Icon }, iconProps)), Icon ? ((0, jsx_runtime_1.jsx)(BesidesIcon, tslib_1.__assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(Inner, tslib_1.__assign({}, innerProps)) }))) : ((0, jsx_runtime_1.jsx)(Inner, tslib_1.__assign({}, innerProps)))] })));
+    const innerProps = {
+        textMain,
+        textSub,
+        text,
+        ...styledProps
+    };
+    return /*#__PURE__*/ React.createElement(Root, {
+        as: Btn,
+        ...props,
+        ...styledProps
+    }, Icon && /*#__PURE__*/ React.createElement(ButtonCompositeIcon, {
+        as: Icon,
+        ...iconProps
+    }), Icon ? /*#__PURE__*/ React.createElement(BesidesIcon, styledProps, /*#__PURE__*/ React.createElement(Inner, innerProps)) : /*#__PURE__*/ React.createElement(Inner, innerProps));
 };
-exports.KoineButtonComposite = KoineButtonComposite;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;