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

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,116 @@
 "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 _jsxruntime = require("react/jsx-runtime");
+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__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            $reverse ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    textSub && /*#__PURE__*/ (0, _jsxruntime.jsx)(Sub, {
+                        $icon: $icon,
+                        $reverse: $reverse,
+                        children: textSub
+                    }),
+                    textMain && /*#__PURE__*/ (0, _jsxruntime.jsx)(Main, {
+                        $icon: $icon,
+                        $reverse: $reverse,
+                        children: textMain
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    textMain && /*#__PURE__*/ (0, _jsxruntime.jsx)(Main, {
+                        $icon: $icon,
+                        $reverse: $reverse,
+                        children: textMain
+                    }),
+                    textSub && /*#__PURE__*/ (0, _jsxruntime.jsx)(Sub, {
+                        $icon: $icon,
+                        $reverse: $reverse,
+                        children: textSub
+                    })
+                ]
+            }),
+            text && /*#__PURE__*/ (0, _jsxruntime.jsx)(Text, {
+                children: 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__*/ (0, _jsxruntime.jsxs)(Root, {
+        as: Btn,
+        ...props,
+        ...styledProps,
+        children: [
+            Icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(ButtonCompositeIcon, {
+                as: Icon,
+                ...iconProps
+            }),
+            Icon ? /*#__PURE__*/ (0, _jsxruntime.jsx)(BesidesIcon, {
+                ...styledProps,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Inner, {
+                    ...innerProps
+                })
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(Inner, {
+                ...innerProps
+            })
+        ]
+    });
 };
-exports.KoineButtonComposite = KoineButtonComposite;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Buttons/ButtonComposite.mjs

@@ -1,28 +1,105 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo } from "react";
 import styled from "styled-components";
-var Root = styled.span(templateObject_1 || (templateObject_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;";
-});
-var ButtonCompositeIcon = styled.svg(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  float: left;\n"], ["\n  float: left;\n"])));
-var BesidesIcon = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: left;\n  line-height: 1.2;\n"], ["\n  text-align: left;\n  line-height: 1.2;\n"])));
-var Main = styled.span(templateObject_4 || (templateObject_4 = __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.span(templateObject_5 || (templateObject_5 = __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.span(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
-var Inner = memo(function (_a) {
-    var textMain = _a.textMain, textSub = _a.textSub, text = _a.text, $reverse = _a.$reverse, $icon = _a.$icon;
-    return (_jsxs(_Fragment, { children: [$reverse ? (_jsxs(_Fragment, { children: [textSub && (_jsx(Sub, { "$icon": $icon, "$reverse": $reverse, children: textSub })), textMain && (_jsx(Main, { "$icon": $icon, "$reverse": $reverse, children: textMain }))] })) : (_jsxs(_Fragment, { children: [textMain && (_jsx(Main, { "$icon": $icon, "$reverse": $reverse, children: textMain })), textSub && (_jsx(Sub, { "$icon": $icon, "$reverse": $reverse, children: textSub }))] })), text && _jsx(Text, { children: text })] }));
-});
-export 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 = __rest(_a, ["Icon", "iconProps", "textMain", "textSub", "textReverse", "text", "Button", "ButtonLink"]);
-    var Btn = props.href ? ButtonLink : Button;
-    var styledProps = {
+const Root = styled.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 = styled.svg`
+  float: left;
+`;
+const BesidesIcon = styled.span`
+  text-align: left;
+  line-height: 1.2;
+`;
+const Main = styled.span`
+  display: block;
+  font-size: 0.9em;
+
+  &:last-child {
+    margin-top: ${(p)=>p.$reverse && !p.$icon ? "0.5em" : "0"};
+  }
+`;
+const Sub = styled.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 = styled.span``;
+const Inner = /*#__PURE__*/ memo(({ textMain, textSub, text, $reverse, $icon })=>/*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            $reverse ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    textSub && /*#__PURE__*/ _jsx(Sub, {
+                        $icon: $icon,
+                        $reverse: $reverse,
+                        children: textSub
+                    }),
+                    textMain && /*#__PURE__*/ _jsx(Main, {
+                        $icon: $icon,
+                        $reverse: $reverse,
+                        children: textMain
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    textMain && /*#__PURE__*/ _jsx(Main, {
+                        $icon: $icon,
+                        $reverse: $reverse,
+                        children: textMain
+                    }),
+                    textSub && /*#__PURE__*/ _jsx(Sub, {
+                        $icon: $icon,
+                        $reverse: $reverse,
+                        children: textSub
+                    })
+                ]
+            }),
+            text && /*#__PURE__*/ _jsx(Text, {
+                children: text
+            })
+        ]
+    }));
+export 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 = __assign({ textMain: textMain, textSub: textSub, text: text }, styledProps);
-    return (_jsxs(Root, __assign({ as: Btn }, props, styledProps, { children: [Icon && _jsx(ButtonCompositeIcon, __assign({ as: Icon }, iconProps)), Icon ? (_jsx(BesidesIcon, __assign({}, styledProps, { children: _jsx(Inner, __assign({}, innerProps)) }))) : (_jsx(Inner, __assign({}, innerProps)))] })));
+    const innerProps = {
+        textMain,
+        textSub,
+        text,
+        ...styledProps
+    };
+    return /*#__PURE__*/ _jsxs(Root, {
+        as: Btn,
+        ...props,
+        ...styledProps,
+        children: [
+            Icon && /*#__PURE__*/ _jsx(ButtonCompositeIcon, {
+                as: Icon,
+                ...iconProps
+            }),
+            Icon ? /*#__PURE__*/ _jsx(BesidesIcon, {
+                ...styledProps,
+                children: /*#__PURE__*/ _jsx(Inner, {
+                    ...innerProps
+                })
+            }) : /*#__PURE__*/ _jsx(Inner, {
+                ...innerProps
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Buttons/ButtonFab.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import { IconButtonProps } from "./IconButton";
 export declare const buttonFab: import("styled-components").FlattenSimpleInterpolation;
-export declare const IconButtonFab: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("./Button").KoineButtonUiProps & {
-    disabled?: boolean | undefined;
-}, never>;
+export declare const IconButtonFab: any;
 export type IconButtonFabProps = IconButtonProps & React.ComponentPropsWithRef<"button">;

package/Buttons/ButtonFab.js

@@ -1,9 +1,27 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButtonFab = exports.buttonFab = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importStar(require("styled-components"));
-var IconButton_1 = require("./IconButton");
-exports.buttonFab = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);\n"], ["\n  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);\n"])));
-exports.IconButtonFab = (0, styled_components_1.default)(IconButton_1.IconButton)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.buttonFab);
-var templateObject_1, templateObject_2;
+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, {
+    buttonFab: function() {
+        return buttonFab;
+    },
+    IconButtonFab: function() {
+        return IconButtonFab;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
+const _IconButton = require("./IconButton");
+const buttonFab = (0, _styledcomponents.css)`
+  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);
+`;
+const IconButtonFab = (0, _styledcomponents.default)(_IconButton.IconButton)`
+  ${buttonFab}
+`;

package/Buttons/ButtonFab.mjs

@@ -1,6 +1,8 @@
-import { __makeTemplateObject } from "tslib";
 import styled, { css } from "styled-components";
 import { IconButton } from "./IconButton";
-export var buttonFab = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);\n"], ["\n  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);\n"])));
-export var IconButtonFab = styled(IconButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), buttonFab);
-var templateObject_1, templateObject_2;
+export const buttonFab = css`
+  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);
+`;
+export const IconButtonFab = styled(IconButton)`
+  ${buttonFab}
+`;

package/Buttons/ButtonLink.d.ts

@@ -1,5 +1,5 @@
-import { KoineComponentProps, KoineComponent } from "../types";
 import { KoineLinkProps } from "../Link";
+import { KoineComponent, KoineComponentProps } from "../types";
 import { KoineButtonUiProps } from "./Button";
 export type KoineButtonLinkProps = KoineButtonUiProps & KoineLinkProps;
 export type ButtonLinkProps = KoineComponentProps<KoineButtonLinkProps, {

package/Buttons/ButtonLink.js

@@ -1,15 +1,29 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineButtonLink = 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 Button_1 = require("./Button");
-var Root = (0, styled_components_1.default)(Button_1.KoineButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
-var KoineButtonLink = function (_a) {
-    var href = _a.href, _b = _a.Link, Link = _b === void 0 ? "a" : _b, props = tslib_1.__rest(_a, ["href", "Link"]);
-    var isRelative = href && href.startsWith("/");
-    return isRelative ? ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ href: href }, props, { as: Link }))) : ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ href: href }, props, { as: "a" })));
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "KoineButtonLink", {
+    enumerable: true,
+    get: function() {
+        return KoineButtonLink;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _Button = require("./Button");
+const Root = (0, _styledcomponents.default)(_Button.KoineButton)`
+  text-decoration: none;
+`;
+const KoineButtonLink = ({ href, Link = "a", ...props })=>{
+    const isRelative = href && href.startsWith("/");
+    return isRelative ? /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
+        href: href,
+        ...props,
+        as: Link
+    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
+        href: href,
+        ...props,
+        as: "a"
+    });
 };
-exports.KoineButtonLink = KoineButtonLink;
-var templateObject_1;

package/Buttons/ButtonLink.mjs

@@ -1,11 +1,18 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { KoineButton } from "./Button";
-var Root = styled(KoineButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
-export var KoineButtonLink = function (_a) {
-    var href = _a.href, _b = _a.Link, Link = _b === void 0 ? "a" : _b, props = __rest(_a, ["href", "Link"]);
-    var isRelative = href && href.startsWith("/");
-    return isRelative ? (_jsx(Root, __assign({ href: href }, props, { as: Link }))) : (_jsx(Root, __assign({ href: href }, props, { as: "a" })));
+const Root = styled(KoineButton)`
+  text-decoration: none;
+`;
+export const KoineButtonLink = ({ href, Link = "a", ...props })=>{
+    const isRelative = href && href.startsWith("/");
+    return isRelative ? /*#__PURE__*/ _jsx(Root, {
+        href: href,
+        ...props,
+        as: Link
+    }) : /*#__PURE__*/ _jsx(Root, {
+        href: href,
+        ...props,
+        as: "a"
+    });
 };
-var templateObject_1;