From 788ee3d5db7718c87abbf2d4687791ef9e04ffbc Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Tue, 1 Nov 2022 19:19:48 -0600 Subject: [PATCH] Release v0.0.3 (#101) --- dist/cjs/components/Button/Button.d.ts | 4 +- dist/cjs/components/Button/Button.types.d.ts | 24 +- .../components/GlobalStyles/GlobalStyles.d.ts | 5 +- .../ThemeHandler/ThemeHandler.types.d.ts | 4 +- dist/cjs/global/themes.d.ts | 408 ++++----- dist/cjs/index.js | 776 +++++++++++++++++- dist/cjs/utils/StoryThemeProvider.d.ts | 6 +- dist/esm/components/Button/Button.d.ts | 4 +- dist/esm/components/Button/Button.types.d.ts | 24 +- .../components/GlobalStyles/GlobalStyles.d.ts | 5 +- .../ThemeHandler/ThemeHandler.types.d.ts | 4 +- dist/esm/global/themes.d.ts | 408 ++++----- dist/esm/index.js | 772 ++++++++++++++++- dist/esm/utils/StoryThemeProvider.d.ts | 6 +- dist/mds.d.ts | 39 +- package.json | 2 +- rollup.config.js | 14 +- 17 files changed, 2032 insertions(+), 473 deletions(-) diff --git a/dist/cjs/components/Button/Button.d.ts b/dist/cjs/components/Button/Button.d.ts index c4e2d46a..6c44cbad 100644 --- a/dist/cjs/components/Button/Button.d.ts +++ b/dist/cjs/components/Button/Button.d.ts @@ -1,4 +1,6 @@ import React, { FC } from "react"; import { ButtonProps } from "./Button.types"; -declare const Button: FC>; +declare const Button: FC< + ButtonProps & React.ButtonHTMLAttributes +>; export default Button; diff --git a/dist/cjs/components/Button/Button.types.d.ts b/dist/cjs/components/Button/Button.types.d.ts index cb4b0bae..81543af5 100644 --- a/dist/cjs/components/Button/Button.types.d.ts +++ b/dist/cjs/components/Button/Button.types.d.ts @@ -1,17 +1,17 @@ import { MouseEventHandler, ReactNode } from "react"; export interface ButtonProps { - id: string; - name?: string; - label?: string; - variant?: "regular" | "callAction" | "secondary"; - icon?: ReactNode; - iconLocation?: "start" | "end"; - fullWidth?: boolean; - disabled?: boolean; - collapseOnSmall?: boolean; - onClick?: MouseEventHandler; - children?: ReactNode | string; + id: string; + name?: string; + label?: string; + variant?: "regular" | "callAction" | "secondary"; + icon?: ReactNode; + iconLocation?: "start" | "end"; + fullWidth?: boolean; + disabled?: boolean; + collapseOnSmall?: boolean; + onClick?: MouseEventHandler; + children?: ReactNode | string; } export interface ConstructProps { - parentChildren: ReactNode | string | undefined; + parentChildren: ReactNode | string | undefined; } diff --git a/dist/cjs/components/GlobalStyles/GlobalStyles.d.ts b/dist/cjs/components/GlobalStyles/GlobalStyles.d.ts index 682687a3..555ec418 100644 --- a/dist/cjs/components/GlobalStyles/GlobalStyles.d.ts +++ b/dist/cjs/components/GlobalStyles/GlobalStyles.d.ts @@ -1,2 +1,5 @@ -declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>; +declare const GlobalStyles: import("styled-components").GlobalStyleComponent< + {}, + import("styled-components").DefaultTheme +>; export default GlobalStyles; diff --git a/dist/cjs/components/ThemeHandler/ThemeHandler.types.d.ts b/dist/cjs/components/ThemeHandler/ThemeHandler.types.d.ts index 8df8c851..d104376b 100644 --- a/dist/cjs/components/ThemeHandler/ThemeHandler.types.d.ts +++ b/dist/cjs/components/ThemeHandler/ThemeHandler.types.d.ts @@ -1,5 +1,5 @@ import { ReactNode } from "react"; export interface ThemeHandlerProps { - darkMode?: boolean; - children: ReactNode; + darkMode?: boolean; + children: ReactNode; } diff --git a/dist/cjs/global/themes.d.ts b/dist/cjs/global/themes.d.ts index 8bcdf78e..64b9c4e3 100644 --- a/dist/cjs/global/themes.d.ts +++ b/dist/cjs/global/themes.d.ts @@ -1,214 +1,214 @@ export declare const lightColors: { - white: string; - defaultFontColor: string; - bulletColor: string; - borderColor: string; - mainGrey: string; - disabledGrey: string; - hoverGrey: string; - pressedGrey: string; - actionDisabledGrey: string; - mainBlue: string; - hoverBlue: string; - pressedBlue: string; - mainRed: string; - hoverRed: string; - lightRed: string; - divisorColor: string; - disabledBGGrey: string; - disabledInnerGrey: string; + white: string; + defaultFontColor: string; + bulletColor: string; + borderColor: string; + mainGrey: string; + disabledGrey: string; + hoverGrey: string; + pressedGrey: string; + actionDisabledGrey: string; + mainBlue: string; + hoverBlue: string; + pressedBlue: string; + mainRed: string; + hoverRed: string; + lightRed: string; + divisorColor: string; + disabledBGGrey: string; + disabledInnerGrey: string; }; export declare const darkColors: { - dark: string; - defaultFontColor: string; - bulletColor: string; - borderColor: string; - mainGrey: string; - disabledGrey: string; - hoverGrey: string; - borderPressedGrey: string; - pressedGrey: string; - mainWhite: string; - disabledWhite: string; - hoverWhite: string; - pressedWhite: string; - mainRed: string; - hoverRed: string; - divisorColor: string; - disabledBGGrey: string; - disabledInnerGrey: string; + dark: string; + defaultFontColor: string; + bulletColor: string; + borderColor: string; + mainGrey: string; + disabledGrey: string; + hoverGrey: string; + borderPressedGrey: string; + pressedGrey: string; + mainWhite: string; + disabledWhite: string; + hoverWhite: string; + pressedWhite: string; + mainRed: string; + hoverRed: string; + divisorColor: string; + disabledBGGrey: string; + disabledInnerGrey: string; }; export declare const lightTheme: { - bgColor: string; - fontColor: string; - borderColor: string; - bulletColor: string; - logoColor: string; - buttons: { - regular: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; - callAction: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; - secondary: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; + bgColor: string; + fontColor: string; + borderColor: string; + bulletColor: string; + logoColor: string; + buttons: { + regular: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; }; + callAction: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; + }; + secondary: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; + }; + }; }; export declare const darkTheme: { - bgColor: string; - fontColor: string; - borderColor: string; - bulletColor: string; - logoColor: string; - buttons: { - regular: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; - callAction: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; - secondary: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; + bgColor: string; + fontColor: string; + borderColor: string; + bulletColor: string; + logoColor: string; + buttons: { + regular: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; + }; + callAction: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; + }; + secondary: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; }; + }; }; diff --git a/dist/cjs/index.js b/dist/cjs/index.js index b7cea4c5..8c3bc32b 100644 --- a/dist/cjs/index.js +++ b/dist/cjs/index.js @@ -1,2 +1,776 @@ -"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),o=require("styled-components");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(t),e=n(o),a=function(){return a=Object.assign||function(t){for(var o,n=1,r=arguments.length;n-1},Et=function(t,o){var n=this.__data__,r=Ct(n,t);return r<0?(++this.size,n.push([t,o])):n[r][1]=o,this};function Bt(t){var o=-1,n=null==t?0:t.length;for(this.clear();++o svg":{fill:vo(o,"buttons.".concat(s,".enabled.text"),"#000"),color:vo(o,"buttons.".concat(s,".enabled.text"),"#000"),width:"14px",height:"14px"}},"&:disabled":{cursor:"not-allowed",backgroundColor:vo(o,"buttons.".concat(s,".disabled.background"),"#fff"),borderColor:vo(o,"buttons.".concat(s,".disabled.border"),"#000"),borderWeight:"1px",borderStyle:"solid",color:vo(o,"buttons.".concat(s,".disabled.text"),"#000"),"& .buttonIcon > svg":{fill:vo(o,"buttons.".concat(s,".disabled.text"),"#000"),color:vo(o,"buttons.".concat(s,".disabled.text"),"#000")}},"&:hover:not(:disabled)":{backgroundColor:vo(o,"buttons.".concat(s,".hover.background"),"#fff"),borderColor:vo(o,"buttons.".concat(s,".hover.border"),"#000"),borderWeight:"1px",borderStyle:"solid",color:vo(o,"buttons.".concat(s,".hover.text"),"#000"),"& .buttonIcon > svg":{fill:vo(o,"buttons.".concat(s,".hover.text"),"#000"),color:vo(o,"buttons.".concat(s,".hover.text"),"#000")}},"&:active:not(:disabled)":{backgroundColor:vo(o,"buttons.".concat(s,".pressed.background"),"#fff"),border:vo(o,"buttons.".concat(s,".pressed.border"),"#000"),borderWeight:"1px",borderStyle:"solid",color:vo(o,"buttons.".concat(s,".pressed.text"),"#000"),"& .buttonIcon > svg":{fill:vo(o,"buttons.".concat(s,".pressed.text"),"#000"),color:vo(o,"buttons.".concat(s,".pressed.text"),"#000")}}},d)})),mo="#fff",xo="#5B5C5C",_o="#E7EAEB",Co="#07193E",Lo="#0D2453",ko="#05132F",jo="#C51B3F",Oo="#D5D7D7",Eo="#B4B4B4",Bo="#19202A",qo="#A2ADC0",So="#707988",zo="#E6ECEC",Ao="#B5BCBD",Io="#EFEDED",Fo="#C3CBCB",Po="#FF3958",Do="#616A7C",To="#3A3F4A",Wo={bgColor:mo,fontColor:"#000",borderColor:"#E2E2E2",bulletColor:"#2781B0",logoColor:jo,buttons:{regular:{enabled:{border:xo,text:xo,background:mo,iconColor:xo},disabled:{border:Eo,text:Eo,background:Oo,iconColor:Eo},hover:{border:xo,text:xo,background:"#E6EAEB",iconColor:xo},pressed:{border:xo,text:xo,background:"#D5D7D8",iconColor:xo}},callAction:{enabled:{border:Co,text:mo,background:Co,iconColor:mo},disabled:{border:_o,text:xo,background:_o,iconColor:xo},hover:{border:Lo,text:mo,background:Lo,iconColor:mo},pressed:{border:ko,text:mo,background:ko,iconColor:mo}},secondary:{enabled:{border:jo,text:jo,background:mo,iconColor:jo},disabled:{border:Eo,text:Eo,background:Oo,iconColor:Eo},hover:{border:"#C83B51",text:jo,background:"#FCF2F4",iconColor:jo},pressed:{border:jo,text:mo,background:jo,iconColor:mo}}}},$o={bgColor:Bo,fontColor:"#8E98A9",borderColor:"#8E98A9",bulletColor:"#4B586A",logoColor:Po,buttons:{regular:{enabled:{border:qo,text:qo,background:Bo,iconColor:qo},disabled:{border:To,text:To,background:Do,iconColor:To},hover:{border:qo,text:qo,background:"#4B586A",iconColor:qo},pressed:{border:So,text:So,background:"#333D4B",iconColor:So}},callAction:{enabled:{border:zo,text:Bo,background:zo,iconColor:Bo},disabled:{border:Ao,text:Bo,background:Ao,iconColor:Bo},hover:{border:Io,text:Bo,background:Io,iconColor:Bo},pressed:{border:Fo,text:Bo,background:Fo,iconColor:Bo}},secondary:{enabled:{border:Po,text:Po,background:Bo,iconColor:Po},disabled:{border:To,text:To,background:Do,iconColor:To},hover:{border:Po,text:Po,background:"#4B586A",iconColor:Po},pressed:{border:Po,text:Bo,background:Po,iconColor:Bo}}}},Ro=require("../assets/fonts/Lato/Lato-Black.woff"),Ho=require("../assets/fonts/Lato/Lato-BlackItalic.woff"),Mo=require("../assets/fonts/Lato/Lato-Bold.woff"),Go=require("../assets/fonts/Lato/Lato-BoldItalic.woff"),No=require("../assets/fonts/Lato/Lato-Hairline.woff"),Uo=require("../assets/fonts/Lato/Lato-HairlineItalic.woff"),Jo=require("../assets/fonts/Lato/Lato-Italic.woff"),Ko=require("../assets/fonts/Lato/Lato-Light.woff"),Qo=require("../assets/fonts/Lato/Lato-LightItalic.woff"),Vo=require("../assets/fonts/Lato/Lato-Regular.woff"),Xo=require("../assets/fonts/Lato/Lato-Thin.woff"),Yo=require("../assets/fonts/Lato/Lato-Black.woff2"),Zo=require("../assets/fonts/Lato/Lato-BlackItalic.woff2"),tn=require("../assets/fonts/Lato/Lato-Bold.woff2"),on=require("../assets/fonts/Lato/Lato-BoldItalic.woff2"),nn=require("../assets/fonts/Lato/Lato-Hairline.woff2"),rn=require("../assets/fonts/Lato/Lato-HairlineItalic.woff2"),en=require("../assets/fonts/Lato/Lato-Italic.woff2"),an=require("../assets/fonts/Lato/Lato-Light.woff2"),ln=require("../assets/fonts/Lato/Lato-LightItalic.woff2"),cn=require("../assets/fonts/Lato/Lato-Regular.woff2"),fn=require("../assets/fonts/Lato/Lato-Thin.woff2"),sn=o.createGlobalStyle(yo||(ho=["\n ","\n"],go=["\n ","\n"],Object.defineProperty?Object.defineProperty(ho,"raw",{value:go}):ho.raw=go,yo=ho),(function(t){var o=t.theme;return'\n /* Fonts */\n @font-face {\n font-family: "Lato";\n src: url('.concat(Zo,') format("woff2"),\n url(').concat(Ho,') format("woff");\n font-weight: 900;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(').concat(tn,') format("woff2"),\n url(').concat(Mo,') format("woff");\n font-weight: bold;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(').concat(on,') format("woff2"),\n url(').concat(Go,') format("woff");\n font-weight: bold;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(').concat(an,') format("woff2"),\n url(').concat(Ko,') format("woff");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(').concat(Yo,') format("woff2"),\n url(').concat(Ro,') format("woff");\n font-weight: 900;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(').concat(en,') format("woff2"),\n url(').concat(Jo,') format("woff");\n font-weight: normal;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato Hairline";\n src: url(').concat(nn,') format("woff2"),\n url(').concat(No,') format("woff");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(').concat(cn,') format("woff2"),\n url(').concat(Vo,') format("woff");\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato Hairline";\n src: url(').concat(rn,') format("woff2"),\n url(').concat(Uo,') format("woff");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(').concat(ln,') format("woff2"),\n url(').concat(Qo,') format("woff");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(').concat(fn,') format("woff2"),\n url(').concat(Xo,') format("woff");\n font-weight: 100;\n font-style: normal;\n font-display: swap;\n }\n \n /* Main Page styling */\n \n *, *::before, *::after {\n box-sizing: inherit;\n outline:0;\n }\n \n html {\n box-sizing: border-box;\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n body {\n background-color: ').concat(vo(o,"bgColor","#fff"),";\n color: ").concat(vo(o,"fontColor","#000"),";\n height: 100vh;\n width: 100vw;\n font-family: 'Lato', sans-serif;\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-weight: 400;\n font-size: 14px;\n line-height: 1.5;\n transition: background-color 0s\n }\n \n fieldset, section {\n border: 1px solid ").concat(vo(o,"borderColor","#E2E2E2"),";\n border-radius: 3px;\n background-color: transparent;\n padding: 25px;\n }\n \n hr {\n border-top: 0;\n border-left: 0;\n borderR-right: 0;\n border-color: ").concat(vo(o,"borderColor","#E2E2E2"),";\n background-color: transparent;\n }\n \n ul {\n padding-left: 20px;\n list-style: none;\n \n li:not([class*=\"Mui\"])::before {\n content: '■';\n color: ").concat(vo(o,"bulletColor","#2781B0"),';\n font-size: 20px;\n display: inline-block;\n width: 1em;\n margin-left: -1em;\n }\n \n ul {\n list-style: none;\n li:not([class*="Mui"])::before {\n content: "○";\n color: ').concat(vo(o,"bulletColor","#2781B0"),",\n font-size: 20px;\n display: inline-block;\n width: 1em;\n margin-left: -1em;\n }\n }\n }\n \n button:active, button:focus, input: active, input:focus {\n outline: 0;\n }\n \n .min-icon {\n width: 26px;\n }\n \n #root: {\n height: 100%;\n width: 100%;\n display: flex;\n flex-flow: column;\n align-items: stretch;\n }\n \n #preload {\n display: none;\n }\n \n #loader-block {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100vh;\n justify-content: center;\n align-items: center;\n }\n ")}));exports.Button=function(o){var n=o.label,e=o.variant,i=void 0===e?"regular":e,l=o.icon,c=o.iconLocation,f=void 0===c?"end":c,s=o.onClick,u=o.disabled,d=o.fullWidth,b=o.collapseOnSmall,p=void 0===b||b,h=o.children,g=function(t,o){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&o.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(r=Object.getOwnPropertySymbols(t);e -1; + }, + Et = function (t, o) { + var n = this.__data__, + r = Ct(n, t); + return r < 0 ? (++this.size, n.push([t, o])) : (n[r][1] = o), this; + }; +function Bt(t) { + var o = -1, + n = null == t ? 0 : t.length; + for (this.clear(); ++o < n; ) { + var r = t[o]; + this.set(r[0], r[1]); + } +} +(Bt.prototype.clear = Lt), + (Bt.prototype.delete = kt), + (Bt.prototype.get = jt), + (Bt.prototype.has = Ot), + (Bt.prototype.set = Et); +var qt = Bt, + St = Y(s, "Map"), + zt = ht, + At = qt, + It = St; +var Ft = function (t) { + var o = typeof t; + return "string" == o || "number" == o || "symbol" == o || "boolean" == o + ? "__proto__" !== t + : null === t; +}; +var Pt = function (t, o) { + var n = t.__data__; + return Ft(o) ? n["string" == typeof o ? "string" : "hash"] : n.map; + }, + Dt = Pt; +var Tt = Pt; +var Wt = Pt; +var $t = Pt; +var Rt = function () { + (this.size = 0), + (this.__data__ = { + hash: new zt(), + map: new (It || At)(), + string: new zt(), + }); + }, + Ht = function (t) { + var o = Dt(this, t).delete(t); + return (this.size -= o ? 1 : 0), o; + }, + Mt = function (t) { + return Tt(this, t).get(t); + }, + Gt = function (t) { + return Wt(this, t).has(t); + }, + Nt = function (t, o) { + var n = $t(this, t), + r = n.size; + return n.set(t, o), (this.size += n.size == r ? 0 : 1), this; + }; +function Ut(t) { + var o = -1, + n = null == t ? 0 : t.length; + for (this.clear(); ++o < n; ) { + var r = t[o]; + this.set(r[0], r[1]); + } +} +(Ut.prototype.clear = Rt), + (Ut.prototype.delete = Ht), + (Ut.prototype.get = Mt), + (Ut.prototype.has = Gt), + (Ut.prototype.set = Nt); +var Jt = Ut; +function Kt(t, o) { + if ("function" != typeof t || (null != o && "function" != typeof o)) + throw new TypeError("Expected a function"); + var n = function () { + var r = arguments, + e = o ? o.apply(this, r) : r[0], + a = n.cache; + if (a.has(e)) return a.get(e); + var i = t.apply(this, r); + return (n.cache = a.set(e, i) || a), i; + }; + return (n.cache = new (Kt.Cache || Jt)()), n; +} +Kt.Cache = Jt; +var Qt = Kt; +var Vt = + /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g, + Xt = /\\(\\)?/g, + Yt = (function (t) { + var o = Qt(t, function (t) { + return 500 === n.size && n.clear(), t; + }), + n = o.cache; + return o; + })(function (t) { + var o = []; + return ( + 46 === t.charCodeAt(0) && o.push(""), + t.replace(Vt, function (t, n, r, e) { + o.push(r ? e.replace(Xt, "$1") : n || t); + }), + o + ); + }); +var Zt = function (t, o) { + for (var n = -1, r = null == t ? 0 : t.length, e = Array(r); ++n < r; ) + e[n] = o(t[n], n, t); + return e; + }, + to = l, + oo = k, + no = u ? u.prototype : void 0, + ro = no ? no.toString : void 0; +var eo = function t(o) { + if ("string" == typeof o) return o; + if (to(o)) return Zt(o, t) + ""; + if (oo(o)) return ro ? ro.call(o) : ""; + var n = o + ""; + return "0" == n && 1 / o == -Infinity ? "-0" : n; + }, + ao = eo; +var io = l, + lo = q, + co = Yt, + fo = function (t) { + return null == t ? "" : ao(t); + }; +var so = k; +var uo = function (t, o) { + return io(t) ? t : lo(t, o) ? [t] : co(fo(t)); + }, + bo = function (t) { + if ("string" == typeof t || so(t)) return t; + var o = t + ""; + return "0" == o && 1 / t == -Infinity ? "-0" : o; + }; +var po = function (t, o) { + for (var n = 0, r = (o = uo(o, t)).length; null != t && n < r; ) + t = t[bo(o[n++])]; + return n && n == r ? t : void 0; +}; +var ho, + go, + yo, + vo = function (t, o, n) { + var r = null == t ? void 0 : po(t, o); + return void 0 === r ? n : r; + }, + wo = e.default.button(function (t) { + var o = t.theme, + n = t.fullWidth, + r = t.variant, + e = t.iconLocation, + i = t.icon, + l = t.label, + c = t.collapseOnSmall, + f = t.parentChildren, + s = r || "regular", + u = + (l || f) && i + ? { + marginLeft: "end" === e ? "0" : "10px", + marginRight: "start" === e ? "0" : "10px", + } + : { marginRight: 0, marginLeft: 0 }, + d = {}; + return ( + c && + i && + ((l && "" !== l.trim()) || f) && + (d = { + "@media (max-width: 768px)": { + padding: "0 14px", + "& .button-label": { display: "none" }, + }, + }), + a( + { + borderRadius: "3px", + cursor: "pointer", + width: n ? "100%" : "initial", + height: "39px", + fontFamily: "'Lato', sans-serif", + fontWeight: "bold", + fontSize: "14px", + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + margin: 0, + padding: (l && "" !== l.trim()) || f ? "0 25px" : "0 14px", + transition: "all 0.2s linear", + backgroundColor: vo( + o, + "buttons.".concat(s, ".enabled.background"), + "#fff" + ), + borderColor: vo(o, "buttons.".concat(s, ".enabled.border"), "#000"), + borderWidth: "1px", + borderStyle: "solid", + color: vo(o, "buttons.".concat(s, ".enabled.text"), "#000"), + "& .button-label": a({ whiteSpace: n ? "normal" : "nowrap" }, u), + "& .buttonIcon": { + display: "block", + height: "14px", + "& > svg": { + fill: vo(o, "buttons.".concat(s, ".enabled.text"), "#000"), + color: vo(o, "buttons.".concat(s, ".enabled.text"), "#000"), + width: "14px", + height: "14px", + }, + }, + "&:disabled": { + cursor: "not-allowed", + backgroundColor: vo( + o, + "buttons.".concat(s, ".disabled.background"), + "#fff" + ), + borderColor: vo( + o, + "buttons.".concat(s, ".disabled.border"), + "#000" + ), + borderWeight: "1px", + borderStyle: "solid", + color: vo(o, "buttons.".concat(s, ".disabled.text"), "#000"), + "& .buttonIcon > svg": { + fill: vo(o, "buttons.".concat(s, ".disabled.text"), "#000"), + color: vo(o, "buttons.".concat(s, ".disabled.text"), "#000"), + }, + }, + "&:hover:not(:disabled)": { + backgroundColor: vo( + o, + "buttons.".concat(s, ".hover.background"), + "#fff" + ), + borderColor: vo(o, "buttons.".concat(s, ".hover.border"), "#000"), + borderWeight: "1px", + borderStyle: "solid", + color: vo(o, "buttons.".concat(s, ".hover.text"), "#000"), + "& .buttonIcon > svg": { + fill: vo(o, "buttons.".concat(s, ".hover.text"), "#000"), + color: vo(o, "buttons.".concat(s, ".hover.text"), "#000"), + }, + }, + "&:active:not(:disabled)": { + backgroundColor: vo( + o, + "buttons.".concat(s, ".pressed.background"), + "#fff" + ), + border: vo(o, "buttons.".concat(s, ".pressed.border"), "#000"), + borderWeight: "1px", + borderStyle: "solid", + color: vo(o, "buttons.".concat(s, ".pressed.text"), "#000"), + "& .buttonIcon > svg": { + fill: vo(o, "buttons.".concat(s, ".pressed.text"), "#000"), + color: vo(o, "buttons.".concat(s, ".pressed.text"), "#000"), + }, + }, + }, + d + ) + ); + }), + mo = "#fff", + xo = "#5B5C5C", + _o = "#E7EAEB", + Co = "#07193E", + Lo = "#0D2453", + ko = "#05132F", + jo = "#C51B3F", + Oo = "#D5D7D7", + Eo = "#B4B4B4", + Bo = "#19202A", + qo = "#A2ADC0", + So = "#707988", + zo = "#E6ECEC", + Ao = "#B5BCBD", + Io = "#EFEDED", + Fo = "#C3CBCB", + Po = "#FF3958", + Do = "#616A7C", + To = "#3A3F4A", + Wo = { + bgColor: mo, + fontColor: "#000", + borderColor: "#E2E2E2", + bulletColor: "#2781B0", + logoColor: jo, + buttons: { + regular: { + enabled: { border: xo, text: xo, background: mo, iconColor: xo }, + disabled: { border: Eo, text: Eo, background: Oo, iconColor: Eo }, + hover: { border: xo, text: xo, background: "#E6EAEB", iconColor: xo }, + pressed: { border: xo, text: xo, background: "#D5D7D8", iconColor: xo }, + }, + callAction: { + enabled: { border: Co, text: mo, background: Co, iconColor: mo }, + disabled: { border: _o, text: xo, background: _o, iconColor: xo }, + hover: { border: Lo, text: mo, background: Lo, iconColor: mo }, + pressed: { border: ko, text: mo, background: ko, iconColor: mo }, + }, + secondary: { + enabled: { border: jo, text: jo, background: mo, iconColor: jo }, + disabled: { border: Eo, text: Eo, background: Oo, iconColor: Eo }, + hover: { + border: "#C83B51", + text: jo, + background: "#FCF2F4", + iconColor: jo, + }, + pressed: { border: jo, text: mo, background: jo, iconColor: mo }, + }, + }, + }, + $o = { + bgColor: Bo, + fontColor: "#8E98A9", + borderColor: "#8E98A9", + bulletColor: "#4B586A", + logoColor: Po, + buttons: { + regular: { + enabled: { border: qo, text: qo, background: Bo, iconColor: qo }, + disabled: { border: To, text: To, background: Do, iconColor: To }, + hover: { border: qo, text: qo, background: "#4B586A", iconColor: qo }, + pressed: { border: So, text: So, background: "#333D4B", iconColor: So }, + }, + callAction: { + enabled: { border: zo, text: Bo, background: zo, iconColor: Bo }, + disabled: { border: Ao, text: Bo, background: Ao, iconColor: Bo }, + hover: { border: Io, text: Bo, background: Io, iconColor: Bo }, + pressed: { border: Fo, text: Bo, background: Fo, iconColor: Bo }, + }, + secondary: { + enabled: { border: Po, text: Po, background: Bo, iconColor: Po }, + disabled: { border: To, text: To, background: Do, iconColor: To }, + hover: { border: Po, text: Po, background: "#4B586A", iconColor: Po }, + pressed: { border: Po, text: Bo, background: Po, iconColor: Bo }, + }, + }, + }, + Ro = require("../assets/fonts/Lato/Lato-Black.woff"), + Ho = require("../assets/fonts/Lato/Lato-BlackItalic.woff"), + Mo = require("../assets/fonts/Lato/Lato-Bold.woff"), + Go = require("../assets/fonts/Lato/Lato-BoldItalic.woff"), + No = require("../assets/fonts/Lato/Lato-Hairline.woff"), + Uo = require("../assets/fonts/Lato/Lato-HairlineItalic.woff"), + Jo = require("../assets/fonts/Lato/Lato-Italic.woff"), + Ko = require("../assets/fonts/Lato/Lato-Light.woff"), + Qo = require("../assets/fonts/Lato/Lato-LightItalic.woff"), + Vo = require("../assets/fonts/Lato/Lato-Regular.woff"), + Xo = require("../assets/fonts/Lato/Lato-Thin.woff"), + Yo = require("../assets/fonts/Lato/Lato-Black.woff2"), + Zo = require("../assets/fonts/Lato/Lato-BlackItalic.woff2"), + tn = require("../assets/fonts/Lato/Lato-Bold.woff2"), + on = require("../assets/fonts/Lato/Lato-BoldItalic.woff2"), + nn = require("../assets/fonts/Lato/Lato-Hairline.woff2"), + rn = require("../assets/fonts/Lato/Lato-HairlineItalic.woff2"), + en = require("../assets/fonts/Lato/Lato-Italic.woff2"), + an = require("../assets/fonts/Lato/Lato-Light.woff2"), + ln = require("../assets/fonts/Lato/Lato-LightItalic.woff2"), + cn = require("../assets/fonts/Lato/Lato-Regular.woff2"), + fn = require("../assets/fonts/Lato/Lato-Thin.woff2"), + sn = o.createGlobalStyle( + yo || + ((ho = ["\n ", "\n"]), + (go = ["\n ", "\n"]), + Object.defineProperty + ? Object.defineProperty(ho, "raw", { value: go }) + : (ho.raw = go), + (yo = ho)), + function (t) { + var o = t.theme; + return '\n /* Fonts */\n @font-face {\n font-family: "Lato";\n src: url(' + .concat(Zo, ') format("woff2"),\n url(') + .concat( + Ho, + ') format("woff");\n font-weight: 900;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(tn, ') format("woff2"),\n url(') + .concat( + Mo, + ') format("woff");\n font-weight: bold;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(on, ') format("woff2"),\n url(') + .concat( + Go, + ') format("woff");\n font-weight: bold;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(an, ') format("woff2"),\n url(') + .concat( + Ko, + ') format("woff");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(Yo, ') format("woff2"),\n url(') + .concat( + Ro, + ') format("woff");\n font-weight: 900;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(en, ') format("woff2"),\n url(') + .concat( + Jo, + ') format("woff");\n font-weight: normal;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato Hairline";\n src: url(' + ) + .concat(nn, ') format("woff2"),\n url(') + .concat( + No, + ') format("woff");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(cn, ') format("woff2"),\n url(') + .concat( + Vo, + ') format("woff");\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato Hairline";\n src: url(' + ) + .concat(rn, ') format("woff2"),\n url(') + .concat( + Uo, + ') format("woff");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(ln, ') format("woff2"),\n url(') + .concat( + Qo, + ') format("woff");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(fn, ') format("woff2"),\n url(') + .concat( + Xo, + ') format("woff");\n font-weight: 100;\n font-style: normal;\n font-display: swap;\n }\n \n /* Main Page styling */\n \n *, *::before, *::after {\n box-sizing: inherit;\n outline:0;\n }\n \n html {\n box-sizing: border-box;\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n body {\n background-color: ' + ) + .concat(vo(o, "bgColor", "#fff"), ";\n color: ") + .concat( + vo(o, "fontColor", "#000"), + ";\n height: 100vh;\n width: 100vw;\n font-family: 'Lato', sans-serif;\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-weight: 400;\n font-size: 14px;\n line-height: 1.5;\n transition: background-color 0s\n }\n \n fieldset, section {\n border: 1px solid " + ) + .concat( + vo(o, "borderColor", "#E2E2E2"), + ";\n border-radius: 3px;\n background-color: transparent;\n padding: 25px;\n }\n \n hr {\n border-top: 0;\n border-left: 0;\n borderR-right: 0;\n border-color: " + ) + .concat( + vo(o, "borderColor", "#E2E2E2"), + ";\n background-color: transparent;\n }\n \n ul {\n padding-left: 20px;\n list-style: none;\n \n li:not([class*=\"Mui\"])::before {\n content: '■';\n color: " + ) + .concat( + vo(o, "bulletColor", "#2781B0"), + ';\n font-size: 20px;\n display: inline-block;\n width: 1em;\n margin-left: -1em;\n }\n \n ul {\n list-style: none;\n li:not([class*="Mui"])::before {\n content: "○";\n color: ' + ) + .concat( + vo(o, "bulletColor", "#2781B0"), + ",\n font-size: 20px;\n display: inline-block;\n width: 1em;\n margin-left: -1em;\n }\n }\n }\n \n button:active, button:focus, input: active, input:focus {\n outline: 0;\n }\n \n .min-icon {\n width: 26px;\n }\n \n #root: {\n height: 100%;\n width: 100%;\n display: flex;\n flex-flow: column;\n align-items: stretch;\n }\n \n #preload {\n display: none;\n }\n \n #loader-block {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100vh;\n justify-content: center;\n align-items: center;\n }\n " + ); + } + ); +(exports.Button = function (o) { + var n = o.label, + e = o.variant, + i = void 0 === e ? "regular" : e, + l = o.icon, + c = o.iconLocation, + f = void 0 === c ? "end" : c, + s = o.onClick, + u = o.disabled, + d = o.fullWidth, + b = o.collapseOnSmall, + p = void 0 === b || b, + h = o.children, + g = (function (t, o) { + var n = {}; + for (var r in t) + Object.prototype.hasOwnProperty.call(t, r) && + o.indexOf(r) < 0 && + (n[r] = t[r]); + if (null != t && "function" == typeof Object.getOwnPropertySymbols) { + var e = 0; + for (r = Object.getOwnPropertySymbols(t); e < r.length; e++) + o.indexOf(r[e]) < 0 && + Object.prototype.propertyIsEnumerable.call(t, r[e]) && + (n[r[e]] = t[r[e]]); + } + return n; + })(o, [ + "label", + "variant", + "icon", + "iconLocation", + "onClick", + "disabled", + "fullWidth", + "collapseOnSmall", + "children", + ]), + y = null; + return ( + l && (y = r.default.createElement("span", { className: "buttonIcon" }, l)), + r.default.createElement( + wo, + a( + { + onClick: s, + disabled: u || !1, + variant: i || "regular", + iconLocation: f || "end", + label: n || "", + fullWidth: d || !1, + collapseOnSmall: !!p, + icon: y, + parentChildren: h || null, + }, + g + ), + r.default.createElement( + t.Fragment, + null, + l && "start" === f && y, + r.default.createElement( + "span", + { className: "button-label" }, + h, + h && n ? " " : "", + n + ), + l && "end" === f && y + ) + ) + ); +}), + (exports.GlobalStyles = sn), + (exports.ThemeHandler = function (t) { + var n = t.darkMode, + e = void 0 !== n && n, + a = t.children; + return r.default.createElement(o.ThemeProvider, { theme: e ? $o : Wo }, a); + }); //# sourceMappingURL=index.js.map diff --git a/dist/cjs/utils/StoryThemeProvider.d.ts b/dist/cjs/utils/StoryThemeProvider.d.ts index 5a5e41bf..73298b0e 100644 --- a/dist/cjs/utils/StoryThemeProvider.d.ts +++ b/dist/cjs/utils/StoryThemeProvider.d.ts @@ -1,6 +1,8 @@ import React from "react"; interface IStoryThemeProvider { - children: React.ReactNode; + children: React.ReactNode; } -declare const StoryThemeProvider: ({ children }: IStoryThemeProvider) => JSX.Element; +declare const StoryThemeProvider: ({ + children, +}: IStoryThemeProvider) => JSX.Element; export default StoryThemeProvider; diff --git a/dist/esm/components/Button/Button.d.ts b/dist/esm/components/Button/Button.d.ts index c4e2d46a..6c44cbad 100644 --- a/dist/esm/components/Button/Button.d.ts +++ b/dist/esm/components/Button/Button.d.ts @@ -1,4 +1,6 @@ import React, { FC } from "react"; import { ButtonProps } from "./Button.types"; -declare const Button: FC>; +declare const Button: FC< + ButtonProps & React.ButtonHTMLAttributes +>; export default Button; diff --git a/dist/esm/components/Button/Button.types.d.ts b/dist/esm/components/Button/Button.types.d.ts index cb4b0bae..81543af5 100644 --- a/dist/esm/components/Button/Button.types.d.ts +++ b/dist/esm/components/Button/Button.types.d.ts @@ -1,17 +1,17 @@ import { MouseEventHandler, ReactNode } from "react"; export interface ButtonProps { - id: string; - name?: string; - label?: string; - variant?: "regular" | "callAction" | "secondary"; - icon?: ReactNode; - iconLocation?: "start" | "end"; - fullWidth?: boolean; - disabled?: boolean; - collapseOnSmall?: boolean; - onClick?: MouseEventHandler; - children?: ReactNode | string; + id: string; + name?: string; + label?: string; + variant?: "regular" | "callAction" | "secondary"; + icon?: ReactNode; + iconLocation?: "start" | "end"; + fullWidth?: boolean; + disabled?: boolean; + collapseOnSmall?: boolean; + onClick?: MouseEventHandler; + children?: ReactNode | string; } export interface ConstructProps { - parentChildren: ReactNode | string | undefined; + parentChildren: ReactNode | string | undefined; } diff --git a/dist/esm/components/GlobalStyles/GlobalStyles.d.ts b/dist/esm/components/GlobalStyles/GlobalStyles.d.ts index 682687a3..555ec418 100644 --- a/dist/esm/components/GlobalStyles/GlobalStyles.d.ts +++ b/dist/esm/components/GlobalStyles/GlobalStyles.d.ts @@ -1,2 +1,5 @@ -declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>; +declare const GlobalStyles: import("styled-components").GlobalStyleComponent< + {}, + import("styled-components").DefaultTheme +>; export default GlobalStyles; diff --git a/dist/esm/components/ThemeHandler/ThemeHandler.types.d.ts b/dist/esm/components/ThemeHandler/ThemeHandler.types.d.ts index 8df8c851..d104376b 100644 --- a/dist/esm/components/ThemeHandler/ThemeHandler.types.d.ts +++ b/dist/esm/components/ThemeHandler/ThemeHandler.types.d.ts @@ -1,5 +1,5 @@ import { ReactNode } from "react"; export interface ThemeHandlerProps { - darkMode?: boolean; - children: ReactNode; + darkMode?: boolean; + children: ReactNode; } diff --git a/dist/esm/global/themes.d.ts b/dist/esm/global/themes.d.ts index 8bcdf78e..64b9c4e3 100644 --- a/dist/esm/global/themes.d.ts +++ b/dist/esm/global/themes.d.ts @@ -1,214 +1,214 @@ export declare const lightColors: { - white: string; - defaultFontColor: string; - bulletColor: string; - borderColor: string; - mainGrey: string; - disabledGrey: string; - hoverGrey: string; - pressedGrey: string; - actionDisabledGrey: string; - mainBlue: string; - hoverBlue: string; - pressedBlue: string; - mainRed: string; - hoverRed: string; - lightRed: string; - divisorColor: string; - disabledBGGrey: string; - disabledInnerGrey: string; + white: string; + defaultFontColor: string; + bulletColor: string; + borderColor: string; + mainGrey: string; + disabledGrey: string; + hoverGrey: string; + pressedGrey: string; + actionDisabledGrey: string; + mainBlue: string; + hoverBlue: string; + pressedBlue: string; + mainRed: string; + hoverRed: string; + lightRed: string; + divisorColor: string; + disabledBGGrey: string; + disabledInnerGrey: string; }; export declare const darkColors: { - dark: string; - defaultFontColor: string; - bulletColor: string; - borderColor: string; - mainGrey: string; - disabledGrey: string; - hoverGrey: string; - borderPressedGrey: string; - pressedGrey: string; - mainWhite: string; - disabledWhite: string; - hoverWhite: string; - pressedWhite: string; - mainRed: string; - hoverRed: string; - divisorColor: string; - disabledBGGrey: string; - disabledInnerGrey: string; + dark: string; + defaultFontColor: string; + bulletColor: string; + borderColor: string; + mainGrey: string; + disabledGrey: string; + hoverGrey: string; + borderPressedGrey: string; + pressedGrey: string; + mainWhite: string; + disabledWhite: string; + hoverWhite: string; + pressedWhite: string; + mainRed: string; + hoverRed: string; + divisorColor: string; + disabledBGGrey: string; + disabledInnerGrey: string; }; export declare const lightTheme: { - bgColor: string; - fontColor: string; - borderColor: string; - bulletColor: string; - logoColor: string; - buttons: { - regular: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; - callAction: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; - secondary: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; + bgColor: string; + fontColor: string; + borderColor: string; + bulletColor: string; + logoColor: string; + buttons: { + regular: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; }; + callAction: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; + }; + secondary: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; + }; + }; }; export declare const darkTheme: { - bgColor: string; - fontColor: string; - borderColor: string; - bulletColor: string; - logoColor: string; - buttons: { - regular: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; - callAction: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; - secondary: { - enabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - disabled: { - border: string; - text: string; - background: string; - iconColor: string; - }; - hover: { - border: string; - text: string; - background: string; - iconColor: string; - }; - pressed: { - border: string; - text: string; - background: string; - iconColor: string; - }; - }; + bgColor: string; + fontColor: string; + borderColor: string; + bulletColor: string; + logoColor: string; + buttons: { + regular: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; + }; + callAction: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; + }; + secondary: { + enabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + disabled: { + border: string; + text: string; + background: string; + iconColor: string; + }; + hover: { + border: string; + text: string; + background: string; + iconColor: string; + }; + pressed: { + border: string; + text: string; + background: string; + iconColor: string; + }; }; + }; }; diff --git a/dist/esm/index.js b/dist/esm/index.js index 371c919f..4ce6d15d 100644 --- a/dist/esm/index.js +++ b/dist/esm/index.js @@ -1,2 +1,772 @@ -import t,{Fragment as o}from"react";import n,{ThemeProvider as r,createGlobalStyle as e}from"styled-components";var a=function(){return a=Object.assign||function(t){for(var o,n=1,r=arguments.length;n-1},Et=function(t,o){var n=this.__data__,r=Ct(n,t);return r<0?(++this.size,n.push([t,o])):n[r][1]=o,this};function Bt(t){var o=-1,n=null==t?0:t.length;for(this.clear();++o svg":{fill:vo(o,"buttons.".concat(s,".enabled.text"),"#000"),color:vo(o,"buttons.".concat(s,".enabled.text"),"#000"),width:"14px",height:"14px"}},"&:disabled":{cursor:"not-allowed",backgroundColor:vo(o,"buttons.".concat(s,".disabled.background"),"#fff"),borderColor:vo(o,"buttons.".concat(s,".disabled.border"),"#000"),borderWeight:"1px",borderStyle:"solid",color:vo(o,"buttons.".concat(s,".disabled.text"),"#000"),"& .buttonIcon > svg":{fill:vo(o,"buttons.".concat(s,".disabled.text"),"#000"),color:vo(o,"buttons.".concat(s,".disabled.text"),"#000")}},"&:hover:not(:disabled)":{backgroundColor:vo(o,"buttons.".concat(s,".hover.background"),"#fff"),borderColor:vo(o,"buttons.".concat(s,".hover.border"),"#000"),borderWeight:"1px",borderStyle:"solid",color:vo(o,"buttons.".concat(s,".hover.text"),"#000"),"& .buttonIcon > svg":{fill:vo(o,"buttons.".concat(s,".hover.text"),"#000"),color:vo(o,"buttons.".concat(s,".hover.text"),"#000")}},"&:active:not(:disabled)":{backgroundColor:vo(o,"buttons.".concat(s,".pressed.background"),"#fff"),border:vo(o,"buttons.".concat(s,".pressed.border"),"#000"),borderWeight:"1px",borderStyle:"solid",color:vo(o,"buttons.".concat(s,".pressed.text"),"#000"),"& .buttonIcon > svg":{fill:vo(o,"buttons.".concat(s,".pressed.text"),"#000"),color:vo(o,"buttons.".concat(s,".pressed.text"),"#000")}}},d)})),mo=function(n){var r=n.label,e=n.variant,i=void 0===e?"regular":e,l=n.icon,c=n.iconLocation,f=void 0===c?"end":c,s=n.onClick,u=n.disabled,d=n.fullWidth,b=n.collapseOnSmall,p=void 0===b||b,h=n.children,g=function(t,o){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&o.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(r=Object.getOwnPropertySymbols(t);e -1; + }, + Et = function (t, o) { + var n = this.__data__, + r = Ct(n, t); + return r < 0 ? (++this.size, n.push([t, o])) : (n[r][1] = o), this; + }; +function Bt(t) { + var o = -1, + n = null == t ? 0 : t.length; + for (this.clear(); ++o < n; ) { + var r = t[o]; + this.set(r[0], r[1]); + } +} +(Bt.prototype.clear = Lt), + (Bt.prototype.delete = kt), + (Bt.prototype.get = Ot), + (Bt.prototype.has = jt), + (Bt.prototype.set = Et); +var qt = Bt, + St = Y(s, "Map"), + zt = ht, + At = qt, + It = St; +var Ft = function (t) { + var o = typeof t; + return "string" == o || "number" == o || "symbol" == o || "boolean" == o + ? "__proto__" !== t + : null === t; +}; +var Pt = function (t, o) { + var n = t.__data__; + return Ft(o) ? n["string" == typeof o ? "string" : "hash"] : n.map; + }, + Dt = Pt; +var Wt = Pt; +var $t = Pt; +var Rt = Pt; +var Tt = function () { + (this.size = 0), + (this.__data__ = { + hash: new zt(), + map: new (It || At)(), + string: new zt(), + }); + }, + Ht = function (t) { + var o = Dt(this, t).delete(t); + return (this.size -= o ? 1 : 0), o; + }, + Mt = function (t) { + return Wt(this, t).get(t); + }, + Nt = function (t) { + return $t(this, t).has(t); + }, + Gt = function (t, o) { + var n = Rt(this, t), + r = n.size; + return n.set(t, o), (this.size += n.size == r ? 0 : 1), this; + }; +function Ut(t) { + var o = -1, + n = null == t ? 0 : t.length; + for (this.clear(); ++o < n; ) { + var r = t[o]; + this.set(r[0], r[1]); + } +} +(Ut.prototype.clear = Tt), + (Ut.prototype.delete = Ht), + (Ut.prototype.get = Mt), + (Ut.prototype.has = Nt), + (Ut.prototype.set = Gt); +var Jt = Ut; +function Kt(t, o) { + if ("function" != typeof t || (null != o && "function" != typeof o)) + throw new TypeError("Expected a function"); + var n = function () { + var r = arguments, + e = o ? o.apply(this, r) : r[0], + a = n.cache; + if (a.has(e)) return a.get(e); + var i = t.apply(this, r); + return (n.cache = a.set(e, i) || a), i; + }; + return (n.cache = new (Kt.Cache || Jt)()), n; +} +Kt.Cache = Jt; +var Qt = Kt; +var Vt = + /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g, + Xt = /\\(\\)?/g, + Yt = (function (t) { + var o = Qt(t, function (t) { + return 500 === n.size && n.clear(), t; + }), + n = o.cache; + return o; + })(function (t) { + var o = []; + return ( + 46 === t.charCodeAt(0) && o.push(""), + t.replace(Vt, function (t, n, r, e) { + o.push(r ? e.replace(Xt, "$1") : n || t); + }), + o + ); + }); +var Zt = function (t, o) { + for (var n = -1, r = null == t ? 0 : t.length, e = Array(r); ++n < r; ) + e[n] = o(t[n], n, t); + return e; + }, + to = l, + oo = k, + no = u ? u.prototype : void 0, + ro = no ? no.toString : void 0; +var eo = function t(o) { + if ("string" == typeof o) return o; + if (to(o)) return Zt(o, t) + ""; + if (oo(o)) return ro ? ro.call(o) : ""; + var n = o + ""; + return "0" == n && 1 / o == -Infinity ? "-0" : n; + }, + ao = eo; +var io = l, + lo = q, + co = Yt, + fo = function (t) { + return null == t ? "" : ao(t); + }; +var so = k; +var uo = function (t, o) { + return io(t) ? t : lo(t, o) ? [t] : co(fo(t)); + }, + bo = function (t) { + if ("string" == typeof t || so(t)) return t; + var o = t + ""; + return "0" == o && 1 / t == -Infinity ? "-0" : o; + }; +var po = function (t, o) { + for (var n = 0, r = (o = uo(o, t)).length; null != t && n < r; ) + t = t[bo(o[n++])]; + return n && n == r ? t : void 0; +}; +var ho, + go, + yo, + vo = function (t, o, n) { + var r = null == t ? void 0 : po(t, o); + return void 0 === r ? n : r; + }, + wo = n.button(function (t) { + var o = t.theme, + n = t.fullWidth, + r = t.variant, + e = t.iconLocation, + i = t.icon, + l = t.label, + c = t.collapseOnSmall, + f = t.parentChildren, + s = r || "regular", + u = + (l || f) && i + ? { + marginLeft: "end" === e ? "0" : "10px", + marginRight: "start" === e ? "0" : "10px", + } + : { marginRight: 0, marginLeft: 0 }, + d = {}; + return ( + c && + i && + ((l && "" !== l.trim()) || f) && + (d = { + "@media (max-width: 768px)": { + padding: "0 14px", + "& .button-label": { display: "none" }, + }, + }), + a( + { + borderRadius: "3px", + cursor: "pointer", + width: n ? "100%" : "initial", + height: "39px", + fontFamily: "'Lato', sans-serif", + fontWeight: "bold", + fontSize: "14px", + display: "flex", + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + margin: 0, + padding: (l && "" !== l.trim()) || f ? "0 25px" : "0 14px", + transition: "all 0.2s linear", + backgroundColor: vo( + o, + "buttons.".concat(s, ".enabled.background"), + "#fff" + ), + borderColor: vo(o, "buttons.".concat(s, ".enabled.border"), "#000"), + borderWidth: "1px", + borderStyle: "solid", + color: vo(o, "buttons.".concat(s, ".enabled.text"), "#000"), + "& .button-label": a({ whiteSpace: n ? "normal" : "nowrap" }, u), + "& .buttonIcon": { + display: "block", + height: "14px", + "& > svg": { + fill: vo(o, "buttons.".concat(s, ".enabled.text"), "#000"), + color: vo(o, "buttons.".concat(s, ".enabled.text"), "#000"), + width: "14px", + height: "14px", + }, + }, + "&:disabled": { + cursor: "not-allowed", + backgroundColor: vo( + o, + "buttons.".concat(s, ".disabled.background"), + "#fff" + ), + borderColor: vo( + o, + "buttons.".concat(s, ".disabled.border"), + "#000" + ), + borderWeight: "1px", + borderStyle: "solid", + color: vo(o, "buttons.".concat(s, ".disabled.text"), "#000"), + "& .buttonIcon > svg": { + fill: vo(o, "buttons.".concat(s, ".disabled.text"), "#000"), + color: vo(o, "buttons.".concat(s, ".disabled.text"), "#000"), + }, + }, + "&:hover:not(:disabled)": { + backgroundColor: vo( + o, + "buttons.".concat(s, ".hover.background"), + "#fff" + ), + borderColor: vo(o, "buttons.".concat(s, ".hover.border"), "#000"), + borderWeight: "1px", + borderStyle: "solid", + color: vo(o, "buttons.".concat(s, ".hover.text"), "#000"), + "& .buttonIcon > svg": { + fill: vo(o, "buttons.".concat(s, ".hover.text"), "#000"), + color: vo(o, "buttons.".concat(s, ".hover.text"), "#000"), + }, + }, + "&:active:not(:disabled)": { + backgroundColor: vo( + o, + "buttons.".concat(s, ".pressed.background"), + "#fff" + ), + border: vo(o, "buttons.".concat(s, ".pressed.border"), "#000"), + borderWeight: "1px", + borderStyle: "solid", + color: vo(o, "buttons.".concat(s, ".pressed.text"), "#000"), + "& .buttonIcon > svg": { + fill: vo(o, "buttons.".concat(s, ".pressed.text"), "#000"), + color: vo(o, "buttons.".concat(s, ".pressed.text"), "#000"), + }, + }, + }, + d + ) + ); + }), + mo = function (n) { + var r = n.label, + e = n.variant, + i = void 0 === e ? "regular" : e, + l = n.icon, + c = n.iconLocation, + f = void 0 === c ? "end" : c, + s = n.onClick, + u = n.disabled, + d = n.fullWidth, + b = n.collapseOnSmall, + p = void 0 === b || b, + h = n.children, + g = (function (t, o) { + var n = {}; + for (var r in t) + Object.prototype.hasOwnProperty.call(t, r) && + o.indexOf(r) < 0 && + (n[r] = t[r]); + if (null != t && "function" == typeof Object.getOwnPropertySymbols) { + var e = 0; + for (r = Object.getOwnPropertySymbols(t); e < r.length; e++) + o.indexOf(r[e]) < 0 && + Object.prototype.propertyIsEnumerable.call(t, r[e]) && + (n[r[e]] = t[r[e]]); + } + return n; + })(n, [ + "label", + "variant", + "icon", + "iconLocation", + "onClick", + "disabled", + "fullWidth", + "collapseOnSmall", + "children", + ]), + y = null; + return ( + l && (y = t.createElement("span", { className: "buttonIcon" }, l)), + t.createElement( + wo, + a( + { + onClick: s, + disabled: u || !1, + variant: i || "regular", + iconLocation: f || "end", + label: r || "", + fullWidth: d || !1, + collapseOnSmall: !!p, + icon: y, + parentChildren: h || null, + }, + g + ), + t.createElement( + o, + null, + l && "start" === f && y, + t.createElement( + "span", + { className: "button-label" }, + h, + h && r ? " " : "", + r + ), + l && "end" === f && y + ) + ) + ); + }, + xo = "#fff", + _o = "#5B5C5C", + Co = "#E7EAEB", + Lo = "#07193E", + ko = "#0D2453", + Oo = "#05132F", + jo = "#C51B3F", + Eo = "#D5D7D7", + Bo = "#B4B4B4", + qo = "#19202A", + So = "#A2ADC0", + zo = "#707988", + Ao = "#E6ECEC", + Io = "#B5BCBD", + Fo = "#EFEDED", + Po = "#C3CBCB", + Do = "#FF3958", + Wo = "#616A7C", + $o = "#3A3F4A", + Ro = { + bgColor: xo, + fontColor: "#000", + borderColor: "#E2E2E2", + bulletColor: "#2781B0", + logoColor: jo, + buttons: { + regular: { + enabled: { border: _o, text: _o, background: xo, iconColor: _o }, + disabled: { border: Bo, text: Bo, background: Eo, iconColor: Bo }, + hover: { border: _o, text: _o, background: "#E6EAEB", iconColor: _o }, + pressed: { border: _o, text: _o, background: "#D5D7D8", iconColor: _o }, + }, + callAction: { + enabled: { border: Lo, text: xo, background: Lo, iconColor: xo }, + disabled: { border: Co, text: _o, background: Co, iconColor: _o }, + hover: { border: ko, text: xo, background: ko, iconColor: xo }, + pressed: { border: Oo, text: xo, background: Oo, iconColor: xo }, + }, + secondary: { + enabled: { border: jo, text: jo, background: xo, iconColor: jo }, + disabled: { border: Bo, text: Bo, background: Eo, iconColor: Bo }, + hover: { + border: "#C83B51", + text: jo, + background: "#FCF2F4", + iconColor: jo, + }, + pressed: { border: jo, text: xo, background: jo, iconColor: xo }, + }, + }, + }, + To = { + bgColor: qo, + fontColor: "#8E98A9", + borderColor: "#8E98A9", + bulletColor: "#4B586A", + logoColor: Do, + buttons: { + regular: { + enabled: { border: So, text: So, background: qo, iconColor: So }, + disabled: { border: $o, text: $o, background: Wo, iconColor: $o }, + hover: { border: So, text: So, background: "#4B586A", iconColor: So }, + pressed: { border: zo, text: zo, background: "#333D4B", iconColor: zo }, + }, + callAction: { + enabled: { border: Ao, text: qo, background: Ao, iconColor: qo }, + disabled: { border: Io, text: qo, background: Io, iconColor: qo }, + hover: { border: Fo, text: qo, background: Fo, iconColor: qo }, + pressed: { border: Po, text: qo, background: Po, iconColor: qo }, + }, + secondary: { + enabled: { border: Do, text: Do, background: qo, iconColor: Do }, + disabled: { border: $o, text: $o, background: Wo, iconColor: $o }, + hover: { border: Do, text: Do, background: "#4B586A", iconColor: Do }, + pressed: { border: Do, text: qo, background: Do, iconColor: qo }, + }, + }, + }, + Ho = function (o) { + var n = o.darkMode, + e = void 0 !== n && n, + a = o.children; + return t.createElement(r, { theme: e ? To : Ro }, a); + }, + Mo = require("../assets/fonts/Lato/Lato-Black.woff"), + No = require("../assets/fonts/Lato/Lato-BlackItalic.woff"), + Go = require("../assets/fonts/Lato/Lato-Bold.woff"), + Uo = require("../assets/fonts/Lato/Lato-BoldItalic.woff"), + Jo = require("../assets/fonts/Lato/Lato-Hairline.woff"), + Ko = require("../assets/fonts/Lato/Lato-HairlineItalic.woff"), + Qo = require("../assets/fonts/Lato/Lato-Italic.woff"), + Vo = require("../assets/fonts/Lato/Lato-Light.woff"), + Xo = require("../assets/fonts/Lato/Lato-LightItalic.woff"), + Yo = require("../assets/fonts/Lato/Lato-Regular.woff"), + Zo = require("../assets/fonts/Lato/Lato-Thin.woff"), + tn = require("../assets/fonts/Lato/Lato-Black.woff2"), + on = require("../assets/fonts/Lato/Lato-BlackItalic.woff2"), + nn = require("../assets/fonts/Lato/Lato-Bold.woff2"), + rn = require("../assets/fonts/Lato/Lato-BoldItalic.woff2"), + en = require("../assets/fonts/Lato/Lato-Hairline.woff2"), + an = require("../assets/fonts/Lato/Lato-HairlineItalic.woff2"), + ln = require("../assets/fonts/Lato/Lato-Italic.woff2"), + cn = require("../assets/fonts/Lato/Lato-Light.woff2"), + fn = require("../assets/fonts/Lato/Lato-LightItalic.woff2"), + sn = require("../assets/fonts/Lato/Lato-Regular.woff2"), + un = require("../assets/fonts/Lato/Lato-Thin.woff2"), + dn = e( + yo || + ((ho = ["\n ", "\n"]), + (go = ["\n ", "\n"]), + Object.defineProperty + ? Object.defineProperty(ho, "raw", { value: go }) + : (ho.raw = go), + (yo = ho)), + function (t) { + var o = t.theme; + return '\n /* Fonts */\n @font-face {\n font-family: "Lato";\n src: url(' + .concat(on, ') format("woff2"),\n url(') + .concat( + No, + ') format("woff");\n font-weight: 900;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(nn, ') format("woff2"),\n url(') + .concat( + Go, + ') format("woff");\n font-weight: bold;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(rn, ') format("woff2"),\n url(') + .concat( + Uo, + ') format("woff");\n font-weight: bold;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(cn, ') format("woff2"),\n url(') + .concat( + Vo, + ') format("woff");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(tn, ') format("woff2"),\n url(') + .concat( + Mo, + ') format("woff");\n font-weight: 900;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(ln, ') format("woff2"),\n url(') + .concat( + Qo, + ') format("woff");\n font-weight: normal;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato Hairline";\n src: url(' + ) + .concat(en, ') format("woff2"),\n url(') + .concat( + Jo, + ') format("woff");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(sn, ') format("woff2"),\n url(') + .concat( + Yo, + ') format("woff");\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato Hairline";\n src: url(' + ) + .concat(an, ') format("woff2"),\n url(') + .concat( + Ko, + ') format("woff");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(fn, ') format("woff2"),\n url(') + .concat( + Xo, + ') format("woff");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n }\n \n @font-face {\n font-family: "Lato";\n src: url(' + ) + .concat(un, ') format("woff2"),\n url(') + .concat( + Zo, + ') format("woff");\n font-weight: 100;\n font-style: normal;\n font-display: swap;\n }\n \n /* Main Page styling */\n \n *, *::before, *::after {\n box-sizing: inherit;\n outline:0;\n }\n \n html {\n box-sizing: border-box;\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n body {\n background-color: ' + ) + .concat(vo(o, "bgColor", "#fff"), ";\n color: ") + .concat( + vo(o, "fontColor", "#000"), + ";\n height: 100vh;\n width: 100vw;\n font-family: 'Lato', sans-serif;\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-weight: 400;\n font-size: 14px;\n line-height: 1.5;\n transition: background-color 0s\n }\n \n fieldset, section {\n border: 1px solid " + ) + .concat( + vo(o, "borderColor", "#E2E2E2"), + ";\n border-radius: 3px;\n background-color: transparent;\n padding: 25px;\n }\n \n hr {\n border-top: 0;\n border-left: 0;\n borderR-right: 0;\n border-color: " + ) + .concat( + vo(o, "borderColor", "#E2E2E2"), + ";\n background-color: transparent;\n }\n \n ul {\n padding-left: 20px;\n list-style: none;\n \n li:not([class*=\"Mui\"])::before {\n content: '■';\n color: " + ) + .concat( + vo(o, "bulletColor", "#2781B0"), + ';\n font-size: 20px;\n display: inline-block;\n width: 1em;\n margin-left: -1em;\n }\n \n ul {\n list-style: none;\n li:not([class*="Mui"])::before {\n content: "○";\n color: ' + ) + .concat( + vo(o, "bulletColor", "#2781B0"), + ",\n font-size: 20px;\n display: inline-block;\n width: 1em;\n margin-left: -1em;\n }\n }\n }\n \n button:active, button:focus, input: active, input:focus {\n outline: 0;\n }\n \n .min-icon {\n width: 26px;\n }\n \n #root: {\n height: 100%;\n width: 100%;\n display: flex;\n flex-flow: column;\n align-items: stretch;\n }\n \n #preload {\n display: none;\n }\n \n #loader-block {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100vh;\n justify-content: center;\n align-items: center;\n }\n " + ); + } + ); +export { mo as Button, dn as GlobalStyles, Ho as ThemeHandler }; //# sourceMappingURL=index.js.map diff --git a/dist/esm/utils/StoryThemeProvider.d.ts b/dist/esm/utils/StoryThemeProvider.d.ts index 5a5e41bf..73298b0e 100644 --- a/dist/esm/utils/StoryThemeProvider.d.ts +++ b/dist/esm/utils/StoryThemeProvider.d.ts @@ -1,6 +1,8 @@ import React from "react"; interface IStoryThemeProvider { - children: React.ReactNode; + children: React.ReactNode; } -declare const StoryThemeProvider: ({ children }: IStoryThemeProvider) => JSX.Element; +declare const StoryThemeProvider: ({ + children, +}: IStoryThemeProvider) => JSX.Element; export default StoryThemeProvider; diff --git a/dist/mds.d.ts b/dist/mds.d.ts index c18490c1..7eea5360 100644 --- a/dist/mds.d.ts +++ b/dist/mds.d.ts @@ -1,29 +1,34 @@ -import React, { ReactNode, MouseEventHandler, FC } from 'react'; -import * as styled_components from 'styled-components'; +import React, { ReactNode, MouseEventHandler, FC } from "react"; +import * as styled_components from "styled-components"; interface ButtonProps { - id: string; - name?: string; - label?: string; - variant?: "regular" | "callAction" | "secondary"; - icon?: ReactNode; - iconLocation?: "start" | "end"; - fullWidth?: boolean; - disabled?: boolean; - collapseOnSmall?: boolean; - onClick?: MouseEventHandler; - children?: ReactNode | string; + id: string; + name?: string; + label?: string; + variant?: "regular" | "callAction" | "secondary"; + icon?: ReactNode; + iconLocation?: "start" | "end"; + fullWidth?: boolean; + disabled?: boolean; + collapseOnSmall?: boolean; + onClick?: MouseEventHandler; + children?: ReactNode | string; } -declare const Button: FC>; +declare const Button: FC< + ButtonProps & React.ButtonHTMLAttributes +>; interface ThemeHandlerProps { - darkMode?: boolean; - children: ReactNode; + darkMode?: boolean; + children: ReactNode; } declare const ThemeHandler: FC; -declare const GlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>; +declare const GlobalStyles: styled_components.GlobalStyleComponent< + {}, + styled_components.DefaultTheme +>; export { Button, GlobalStyles, ThemeHandler }; diff --git a/package.json b/package.json index 627b91cc..957a7b85 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mds", - "version": "0.0.2", + "version": "0.0.3", "description": "A MinIO Components Library", "homepage": ".", "license": "AGPL-3.0-or-later", diff --git a/rollup.config.js b/rollup.config.js index 423bb899..d2a864db 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -4,7 +4,7 @@ import typescript from "@rollup/plugin-typescript"; import dts from "rollup-plugin-dts"; import { terser } from "rollup-plugin-terser"; import peerDepsExternal from "rollup-plugin-peer-deps-external"; -import copy from 'rollup-plugin-copy'; +import copy from "rollup-plugin-copy"; const packageJson = require("./package.json"); @@ -29,19 +29,15 @@ export default [ commonjs(), typescript({ tsconfig: "./tsconfig.json" }), terser(), - copy({ - targets: [ - {src: 'src/components/assets', dest: 'dist'} - ] - }) + copy({ + targets: [{ src: "src/components/assets", dest: "dist" }], + }), ], external: ["react", "react-dom", "styled-components"], }, { input: "dist/esm/index.d.ts", output: [{ file: "dist/mds.d.ts", format: "es" }], - plugins: [ - dts() - ], + plugins: [dts()], }, ];