oolib 1.2.0 → 1.5.0

package/dist/assets/fonts/style.css

@@ -0,0 +1,162 @@
+@font-face {
+  font-family: 'noto_sans';
+  src: url('./notosans-bold-webfont.woff2') format('woff2'),
+    url('./notosans-bold-webfont.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans';
+  src: url('./notosans-bolditalic-webfont.woff2') format('woff2'),
+    url('./notosans-bolditalic-webfont.woff') format('woff');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'noto_sans';
+  src: url('./notosans-italic-webfont.woff2') format('woff2'),
+    url('./notosans-italic-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'noto_sans';
+  src: url('./notosans-regular-webfont.woff2') format('woff2'),
+    url('./notosans-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans';
+  src: url('./notosans-semibold-webfont.woff2') format('woff2'),
+    url('./notosans-semibold-webfont.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans';
+  src: url('./notosans-semibolditalic-webfont.woff2') format('woff2'),
+    url('./notosans-semibolditalic-webfont.woff') format('woff');
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'noto_serif';
+  src: url('./notoserif-italic-webfont.woff2') format('woff2'),
+    url('./notoserif-italic-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'noto_serif';
+  src: url('./notoserif-regular-webfont.woff2') format('woff2'),
+    url('./notoserif-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_serif';
+  src: url('./notoserif-bold-webfont.woff2') format('woff2'),
+    url('./notoserif-bold-webfont.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_serif';
+  src: url('./notoserif-bolditalic-webfont.woff2') format('woff2'),
+    url('./notoserif-bolditalic-webfont.woff') format('woff');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'noto_sans_gu';
+  src: url('./notosansgujaratiui-bold-webfont.woff2') format('woff2'),
+    url('./notosansgujaratiui-bold-webfont.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans_gu';
+  src: url('./notosansgujaratiui-regular-webfont.woff2') format('woff2'),
+    url('./notosansgujaratiui-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans_kn';
+  src: url('./notosanskannadaui-bold-webfont.woff2') format('woff2'),
+    url('./notosanskannadaui-bold-webfont.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans_kn';
+  src: url('./notosanskannadaui-regular-webfont.woff2') format('woff2'),
+    url('./notosanskannadaui-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans_or';
+  src: url('./notosansoriyaui-bold-webfont.woff2') format('woff2'),
+    url('./notosansoriyaui-bold-webfont.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans_or';
+  src: url('./notosansoriyaui-regular-webfont.woff2') format('woff2'),
+    url('./notosansoriyaui-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans_te';
+  src: url('./notosansteluguui-bold-webfont.woff2') format('woff2'),
+    url('./notosansteluguui-bold-webfont.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans_te';
+  src: url('./notosansteluguui-regular-webfont.woff2') format('woff2'),
+    url('./notosansteluguui-regular-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'noto_sans_devanagari';
+  src: url('./notosansdevanagari-regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'noto_sans_devanagari';
+  src: url('./notosansdevanagari-bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'noto_sans_devanagari';
+  src: url('./NotoSansDevanagari-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+}

package/dist/components/buttons/index.d.ts

@@ -0,0 +1,6 @@
+export function ButtonPrimary(props: any): JSX.Element;
+export function ButtonSecondary(props: any): JSX.Element;
+export function ButtonCustom(props: any): JSX.Element;
+export function ButtonGhost(props: any): JSX.Element;
+export function UploadButton(props: any): JSX.Element;
+export function GoogleLogin(props: any): JSX.Element;

package/dist/components/buttons/index.js

@@ -0,0 +1,89 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GoogleLogin = exports.UploadButton = exports.ButtonGhost = exports.ButtonCustom = exports.ButtonSecondary = exports.ButtonPrimary = void 0;
+var react_1 = __importStar(require("react"));
+var index_styled_1 = require("./index.styled");
+var typo_1 = require("../typo");
+var icons_1 = require("../../icons");
+var DisplayIcon = function (_a) {
+    var icon = _a.icon, size = _a.size;
+    var IconComp = icons_1.phosphorIcons[icon];
+    return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" }));
+};
+var ButtonStyledWrapper = function (_a) {
+    var props = _a.props, variant = _a.variant;
+    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, onClick = props.onClick, active = props.active, S = props.S, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className;
+    var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
+    var size = (S && "S") || 'M';
+    var composition = icon && displayText ? 'icon+text' : !displayText && 'iconOnly';
+    return (react_1.default.createElement(index_styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? 'submit' : 'button', onClick: onClick, composition: composition, width: width, color: color },
+        icon && react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20 }),
+        displayText && react_1.default.createElement(typo_1.SANS_3, { semibold: true }, displayText)));
+};
+var Button = function (_a) {
+    var props = _a.props, variant = _a.variant;
+    var link = props.link, onClick = props.onClick;
+    var handleOpenLink = function () {
+        window.open(link.val);
+    };
+    var buttonAction = onClick || handleOpenLink;
+    return (react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: buttonAction }), variant: variant }));
+};
+var ButtonPrimary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: 'primary' })); };
+exports.ButtonPrimary = ButtonPrimary;
+var ButtonSecondary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: 'secondary' })); };
+exports.ButtonSecondary = ButtonSecondary;
+var ButtonCustom = function (props) { return (react_1.default.createElement(Button, { props: props, variant: 'custom' })); };
+exports.ButtonCustom = ButtonCustom;
+var ButtonGhost = function (props) { return react_1.default.createElement(Button, { props: props, variant: 'ghost' }); };
+exports.ButtonGhost = ButtonGhost;
+var UploadButton = function (props) {
+    var inputRef = (0, react_1.useRef)(null);
+    var mutilple = props.mutilple, onChange = props.onChange, variant = props.variant, id = props.id;
+    var handleFileUpload = function () {
+        inputRef.current.click();
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", { id: id, ref: inputRef, type: "file", multiple: mutilple, onChange: onChange, style: { display: 'none' } }),
+        react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: handleFileUpload }), variant: variant || 'secondary' })));
+};
+exports.UploadButton = UploadButton;
+var GoogleLogin = function (props) {
+    var theme = props.theme, S = props.S, disabled = props.disabled, width = props.width;
+    var displayText = 'Sign up with Google';
+    var size = (S && "S") || 'M';
+    return (react_1.default.createElement(index_styled_1.ButtonStyled, { size: size, disabled: disabled, width: width, onClick: function () { return window.open('/api/OAuth/google', '_self'); }, variant: "googleAuth", theme: theme },
+        react_1.default.createElement(DisplayIcon, { icon: 'OkeGoogleIcon', size: 24 }),
+        displayText && react_1.default.createElement(typo_1.SANS_3, { semibold: true }, displayText)));
+};
+exports.GoogleLogin = GoogleLogin;

package/dist/components/buttons/index.styled.d.ts

@@ -0,0 +1 @@
+export const ButtonStyled: any;

package/dist/components/buttons/index.styled.js

@@ -0,0 +1,176 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_2 = require("styled-components");
+var mixins_1 = require("../../themes/mixins");
+var colors_1 = require("../../themes/colors");
+var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor70 = colors_1.colors.greyColor70, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
+//sizes
+var SIZES = {
+    S: "3rem",
+    M: "4rem",
+};
+var ButtonPrimary = (0, styled_components_2.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: none; // $none;\n  background-color: ", "; // primaryColor40: primaryColor100\n  color: ", "; // greyColor100: white\n\n  ", "\n  &:hover {\n    background-color: ", "; // $primaryColor10 : $primaryColor40\n    color: ", "; // greyColor100 :  $primaryColorText;\n  }\n"], ["\n  border: none; // $none;\n  background-color: ", "; // primaryColor40: primaryColor100\n  color: ", "; // greyColor100: white\n\n  ", "\n  &:hover {\n    background-color: ", "; // $primaryColor10 : $primaryColor40\n    color: ", "; // greyColor100 :  $primaryColorText;\n  }\n"])), function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? colors.primaryColor40
+        : colors.primaryColor100;
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? greyColor100 : white;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", "; //greyColor70 : $greyColor15;\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "], ["\n      background-color: ", "; //greyColor70 : $greyColor15;\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "])), function (_a) {
+        var invert = _a.invert;
+        return invert ? greyColor70 : greyColor15;
+    }, greyColor40);
+}, function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? colors.primaryColor10
+        : colors.primaryColor40;
+}, function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? greyColor100
+        : colors.primaryColorText;
+});
+var ButtonSecondary = (0, styled_components_2.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: 2px solid\n    ", "; // primaryColor40 : $primaryColor100;\n  background-color: ", "; // greyColor100: white\n  color: ", "; // primaryColor40: primaryColorText\n\n  ", "\n  ", "\n    &:hover {\n    background-color: ", "; // $primaryColor10 : $primaryColor40\n    color: ", "; // $primaryColorText;\n  }\n"], ["\n  border: 2px solid\n    ", "; // primaryColor40 : $primaryColor100;\n  background-color: ", "; // greyColor100: white\n  color: ", "; // primaryColor40: primaryColorText\n\n  ", "\n  ", "\n    &:hover {\n    background-color: ", "; // $primaryColor10 : $primaryColor40\n    color: ", "; // $primaryColorText;\n  }\n"])), function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? colors.primaryColor40
+        : colors.primaryColor100;
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? greyColor100 : white;
+}, function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? colors.primaryColor40
+        : colors.primaryColorText;
+}, function (_a) {
+    var active = _a.active;
+    return active && (0, styled_components_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), function (_a) {
+        var invert = _a.invert, colors = _a.theme.colors;
+        return invert ? colors.primaryColor40 : colors.primaryColor10;
+    }, function (_a) {
+        var colors = _a.theme.colors;
+        return colors.primaryColorText;
+    });
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background-color: ", "; //greyColor80 : $white;\n      border: 2px solid ", ";\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "], ["\n      background-color: ", "; //greyColor80 : $white;\n      border: 2px solid ", ";\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "])), function (_a) {
+        var invert = _a.invert;
+        return invert ? greyColor80 : white;
+    }, greyColor15, greyColor40);
+}, function (_a) {
+    var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
+    return active
+        ? ""
+        : invert
+            ? colors.primaryColor10
+            : colors.primaryColor40;
+}, function (_a) {
+    var colors = _a.theme.colors;
+    return colors.primaryColorText;
+});
+var ButtonCustom = (0, styled_components_2.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 2px solid\n    ", "; // $primaryColor100;\n  box-shadow: -4px 4px 1px\n    ", "; //$lightShadowColor;\n  background-color: ", "; //greyColor100 : $white;\n  color: ", "; // primaryColor40 : $primaryColorText;\n\n  ", "\n  &:hover {\n    background-color: ", "; // $greyColor80 : $primaryColor40\n  }\n"], ["\n  border: 2px solid\n    ", "; // $primaryColor100;\n  box-shadow: -4px 4px 1px\n    ", "; //$lightShadowColor;\n  background-color: ", "; //greyColor100 : $white;\n  color: ", "; // primaryColor40 : $primaryColorText;\n\n  ", "\n  &:hover {\n    background-color: ", "; // $greyColor80 : $primaryColor40\n  }\n"])), function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? colors.primaryColor40
+        : colors.primaryColor100;
+}, function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? colors.primaryColor40
+        : colors.primaryColor100;
+}, function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert ? greyColor100 : white;
+}, function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? colors.primaryColor40
+        : colors.primaryColorText;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_2.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      color: ", "; //$greyColor40;\n      border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n      box-shadow: -4px 4px 1px ", "; // $darkShadowColor;\n      pointer-events: none;\n      background-color: ", "; //greyColor80 : white\n    "], ["\n      color: ", "; //$greyColor40;\n      border: 2px solid ", "; // $darkShadowColor : $greyColor15;\n      box-shadow: -4px 4px 1px ", "; // $darkShadowColor;\n      pointer-events: none;\n      background-color: ", "; //greyColor80 : white\n    "])), greyColor40, function (_a) {
+        var invert = _a.invert;
+        return (invert ? greyColor40 : greyColor15);
+    }, greyColor40, function (_a) {
+        var invert = _a.invert;
+        return invert ? greyColor80 : white;
+    });
+}, function (_a) {
+    var invert = _a.invert, colors = _a.theme.colors;
+    return invert
+        ? greyColor80
+        : colors.primaryColor40;
+});
+var ButtonGhost = (0, styled_components_2.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", "; //$white;\n  color: ", "; //primaryColor40 : greyColor100\n  ", "\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", "; // $greyColor70 : $primaryColor10\n  }\n"], ["\n  background-color: ", "; //$white;\n  color: ", "; //primaryColor40 : greyColor100\n  ", "\n  ", "\n\n  ", "\n  &:hover {\n    background-color: ", "; // $greyColor70 : $primaryColor10\n  }\n"])), function (_a) {
+    var active = _a.active, colors = _a.theme.colors;
+    return active ? colors.primaryColor40 : 'inherit';
+}, function (_a) {
+    var invert = _a.invert, composition = _a.composition, colors = _a.theme.colors;
+    return invert
+        ? colors.primaryColor40
+        : composition === 'iconOnly'
+            ? greyColor100
+            : colors.primaryColorText;
+}, function (_a) {
+    var color = _a.color;
+    return color && (0, styled_components_2.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), color);
+}, function (_a) {
+    var invert = _a.invert;
+    return invert && (0, styled_components_2.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), function (_a) {
+        var active = _a.active;
+        return active ? greyColor80 : greyColor100;
+    });
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_2.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "], ["\n      color: ", "; //$greyColor40;\n      pointer-events: none;\n    "])), greyColor40);
+}, function (_a) {
+    var invert = _a.invert, active = _a.active, colors = _a.theme.colors;
+    return active
+        ? ""
+        : invert
+            ? greyColor70
+            : colors.primaryColor10;
+});
+var GoogleButton = (0, styled_components_2.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  color: #4285f4;\n  border: 2px solid #4285f4;\n  background-color: ", ";\n  ", "\n"], ["\n  color: #4285f4;\n  border: 2px solid #4285f4;\n  background-color: ", ";\n  ", "\n"])), white, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_2.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+});
+var buttonVariantSetting = {
+    primary: ButtonPrimary,
+    secondary: ButtonSecondary,
+    ghost: ButtonGhost,
+    custom: ButtonCustom,
+    googleAuth: GoogleButton,
+};
+exports.ButtonStyled = styled_components_1.default.button(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 2px;\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  cursor: pointer;\n  border: none;\n  border-radius: 2px;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var composition = _a.composition, size = _a.size;
+    switch (composition) {
+        case 'iconOnly':
+            return (0, styled_components_2.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          padding: 0;\n          height: ", ";\n          width: ", ";\n        "], ["\n          padding: 0;\n          height: ", ";\n          width: ", ";\n        "])), SIZES[size], SIZES[size]);
+        case 'icon+text':
+            return (0, styled_components_2.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n          padding: 0 2rem 0 1.5rem;\n          height: ", ";\n        "], ["\n          padding: 0 2rem 0 1.5rem;\n          height: ", ";\n        "])), SIZES[size]);
+        default:
+            return (0, styled_components_2.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          padding: 0 2rem;\n          height: ", ";\n        "], ["\n          padding: 0 2rem;\n          height: ", ";\n        "])), SIZES[size]);
+    }
+}, function (_a) {
+    var width = _a.width;
+    return width && (0, styled_components_2.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width);
+}, (0, mixins_1.kpTransition)('background-color'), function (_a) {
+    var variant = _a.variant;
+    return buttonVariantSetting[variant];
+});
+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, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

package/dist/components/loader/index.d.ts

@@ -0,0 +1 @@
+export function Loader(props: any): JSX.Element;