react-jupiter 5.12.0 → 6.0.0-beta.10

package/accordion/index.js

@@ -3,7 +3,7 @@
 
 
 
-const Accordion=(a)=>{let{items:b}=a;return/*#__PURE__*/(
+const Accordion=(a)=>{let{items:b}=a;return(/*#__PURE__*/
 _react.default.createElement(_index.PanelGroup,null,
 b.map((a,b)=>/*#__PURE__*/_react.default.createElement(_panel.default,{item:a,key:b}))
 ))};

package/accordion/index.styles.js

@@ -1,10 +1,52 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PanelGroup=exports.Panel=void 0;var _templateObject,_templateObject2,_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}const
+"use strict";var _styledComponents=_interopRequireDefault(require("styled-components"));Object.defineProperty(exports,"__esModule",{value:!0}),exports.PanelGroup=exports.Panel=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}const
 
-PanelGroup=exports.PanelGroup=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n    font-family: 'IranSharp';\n"]))),
+PanelGroup=exports.PanelGroup=_styledComponents.default.div`
+    font-family: 'IranSharp';
+`,
 
+Panel=exports.Panel=_styledComponents.default.div`
+    background-color: #fff;
+    margin: 10px 0;
+    border: ${(a)=>a.status||a.bold?"2px solid rgb(80, 89, 117)":"1px solid #000000"};
+    border-radius: 7px;
+    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
+    padding: 10px;
 
+    &.white {
+        background: #ffffff;
+    }
+    &.light {
+        background: #caf0fc;
+    }
+    &.white, &.light {
+        & .panel-heading {
+            color: #000000;
+        }
+    }
+    &.dark {
+        background: rgb(80, 89, 117);
+        & .panel-heading {
+            color: #ffffff;
+        }
+    }
 
-Panel=exports.Panel=_styledComponents.default.div(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n    background-color: #fff;\n    margin: 10px 0;\n    border: ",";\n    border-radius: 7px;\n    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);\n    padding: 10px;\n\n    &.white {\n        background: #ffffff;\n    }\n    &.light {\n        background: #caf0fc;\n    }\n    &.white, &.light {\n        & .panel-heading {\n            color: #000000;\n        }\n    }\n    &.dark {\n        background: rgb(80, 89, 117);\n        & .panel-heading {\n            color: #ffffff;\n        }\n    }\n\n    .collapse {\n        display: none;\n    }\n\n    .panel-heading {\n        padding: 10px 15px;\n        display: flex;\n        justify-content: space-between;\n        &:hover {\n            cursor: pointer;\n        }        \n    }\n    \n    .panel-title {\n        margin-top: 0;\n        margin-bottom: 0;\n        font-size: 16px;\n        color: inherit;\n    }\n"])),
+    .collapse {
+        display: none;
+    }
 
-
-(a)=>a.status||a.bold?"2px solid rgb(80, 89, 117)":"1px solid #000000");
+    .panel-heading {
+        padding: 10px 15px;
+        display: flex;
+        justify-content: space-between;
+        &:hover {
+            cursor: pointer;
+        }        
+    }
+    
+    .panel-title {
+        margin-top: 0;
+        margin-bottom: 0;
+        font-size: 16px;
+        color: inherit;
+    }
+`;

package/accordion/panel.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_detectMobile=require("../utils/detectMobile"),_index=require("./index.styles"),_icon=_interopRequireDefault(require("../icon"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(b,c){if(!c&&b&&b.__esModule)return b;if(null===b||"object"!=typeof b&&"function"!=typeof b)return{default:b};var d=_getRequireWildcardCache(c);if(d&&d.has(b))return d.get(b);var e={__proto__:null},f=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in b)if("default"!=a&&Object.prototype.hasOwnProperty.call(b,a)){var g=f?Object.getOwnPropertyDescriptor(b,a):null;g&&(g.get||g.set)?Object.defineProperty(e,a,g):e[a]=b[a]}return e.default=b,d&&d.set(b,e),e}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_detectMobile=require("../utils/detectMobile"),_index=require("./index.styles"),_icon=_interopRequireDefault(require("../icon"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(b,c){if(!c&&b&&b.__esModule)return b;if(null===b||"object"!=typeof b&&"function"!=typeof b)return{default:b};var d=_getRequireWildcardCache(c);if(d&&d.has(b))return d.get(b);var e={__proto__:null},f=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in b)if("default"!=a&&{}.hasOwnProperty.call(b,a)){var g=f?Object.getOwnPropertyDescriptor(b,a):null;g&&(g.get||g.set)?Object.defineProperty(e,a,g):e[a]=b[a]}return e.default=b,d&&d.set(b,e),e}
 
 
 
@@ -7,7 +7,7 @@ const Panel=(a)=>{let{item:b}=a;const
 c=(0,_react.useRef)(),
 
 d=()=>{
-const a=document.getElementById("icon-".concat(b.key));
+const a=document.getElementById(`icon-${b.key}`);
 
 c.current.classList.contains("collapse")?(
 c.current.classList.remove("collapse"),
@@ -20,7 +20,7 @@ a.classList.add("new-icon-arrow-drop-down"))
 
 };
 
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_index.Panel,{className:b.mode,status:b.status,bold:b.bold},/*#__PURE__*/
 _react.default.createElement("a",{className:"panel-heading",onClick:()=>d(b.key)},/*#__PURE__*/
 _react.default.createElement("h4",{className:"panel-title"},/*#__PURE__*/
@@ -29,10 +29,10 @@ _react.default.createElement("span",null,b.title)
 ),/*#__PURE__*/
 _react.default.createElement("div",null,
 !_detectMobile.isMobile&&b.meta,/*#__PURE__*/
-_react.default.createElement(_icon.default,{id:"icon-".concat(b.key),name:"arrow-drop-down",size:"sm",color:b.status?"white":"darkBlue"})
+_react.default.createElement(_icon.default,{id:`icon-${b.key}`,name:"arrow-drop-down",size:"sm",color:b.status?"white":"darkBlue"})
 )
 ),/*#__PURE__*/
-_react.default.createElement("div",{id:b.key,ref:c,className:"panel-collapse ".concat(b.collapse&&"collapse")},/*#__PURE__*/
+_react.default.createElement("div",{id:b.key,ref:c,className:`panel-collapse ${b.collapse&&"collapse"}`},/*#__PURE__*/
 _react.default.createElement("div",{className:"panel-body"},b.body)
 )
 ))

package/avatar/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../globalStyle")),_index=_interopRequireDefault(require("./index.styles")),_theme=_interopRequireDefault(require("./theme"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}const
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=_interopRequireDefault(require("prop-types")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../globalStyle")),_index=_interopRequireDefault(require("./index.styles")),_theme=_interopRequireDefault(require("./theme"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)({}).hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(null,arguments)}const
 
 
 
@@ -14,7 +14,7 @@ sizeMobile:e="md",
 src:f=defaultImageUrl,
 round:g=!1,
 ...b
-}=a;return/*#__PURE__*/(
+}=a;return(/*#__PURE__*/
 _react.default.createElement(_styledComponents.ThemeProvider,{theme:_theme.default},/*#__PURE__*/
 _react.default.createElement(_globalStyle.default,null),/*#__PURE__*/
 _react.default.createElement(_index.default,_extends({

package/avatar/index.styles.js

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _templateObject,_styledComponents=_interopRequireDefault(require("styled-components")),_themes=_interopRequireDefault(require("../themes"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}
-
-
-const Image=_styledComponents.default.img(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  font-family: 'IranSharp';\n  width: ",";\n  height: ",";\n  @media only screen and (max-width: ","px) {\n    width: ",";\n    height: ",";\n  }\n  border-radius: ",";\n  display: block;\n  background-size: cover;\n"])),
-
-(a)=>{let{theme:b,size:c}=a;return"".concat(b.size[c],"px")},
-(a)=>{let{theme:b,size:c}=a;return"".concat(b.size[c],"px")},
-_themes.default.breakpoints.sm,
-(a)=>{let{theme:b,sizeMobile:c}=a;return"".concat(b.size[c],"px")},
-(a)=>{let{theme:b,sizeMobile:c}=a;return"".concat(b.size[c],"px")},
-
-(a)=>{let{theme:b,round:c}=a;return c?"50%":"".concat(b.borderRadius,"px")});var _default=exports.default=
-
-
-
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _styledComponents=_interopRequireDefault(require("styled-components")),_themes=_interopRequireDefault(require("../themes"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
+
+
+const Image=_styledComponents.default.img`
+  font-family: 'IranSharp';
+  width: ${(a)=>{let{theme:b,size:c}=a;return`${b.size[c]}px`}};
+  height: ${(a)=>{let{theme:b,size:c}=a;return`${b.size[c]}px`}};
+  @media only screen and (max-width: ${_themes.default.breakpoints.sm}px) {
+    width: ${(a)=>{let{theme:b,sizeMobile:c}=a;return`${b.size[c]}px`}};
+    height: ${(a)=>{let{theme:b,sizeMobile:c}=a;return`${b.size[c]}px`}};
+  }
+  border-radius: ${(a)=>{let{theme:b,round:c}=a;return c?"50%":`${b.borderRadius}px`}};
+  display: block;
+  background-size: cover;
+`;var _default=exports.default=
 
 Image;

package/button/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_styledComponents=require("styled-components"),_globalStyle=_interopRequireDefault(require("../globalStyle")),_typography=require("../typography"),_index=require("./index.styles"),_utils=_interopRequireDefault(require("./utils")),_theme=_interopRequireDefault(require("./theme"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_tailwindMerge=require("tailwind-merge"),_icon=_interopRequireDefault(require("../icon")),_theme=require("./theme");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)({}).hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(null,arguments)}const
 
 
 
@@ -29,16 +29,74 @@
 
 
 
+base="inline-flex items-center justify-center border box-border rounded font-semibold transition-all duration-250 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98]",
 
-const Button=(a)=>
 
+getStyleClasses=(a,b)=>{
+const c={
+darkBlue:{
+primary:"bg-main border-main text-white hover:bg-opacity-80 active:bg-opacity-95 focus-visible:ring-main",
+secondary:"bg-transparent border-main text-main hover:bg-blue-50 active:bg-blue-100 focus-visible:ring-main",
+tertiary:"bg-transparent border-transparent text-main hover:bg-opacity-10 active:bg-opacity-20 focus-visible:ring-main"
+},
+red:{
+primary:"bg-red-600 border-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-600",
+secondary:"bg-transparent border-red-600 text-red-600 hover:bg-red-50 active:bg-red-100 focus-visible:ring-red-600",
+tertiary:"bg-transparent border-transparent text-red-600 hover:bg-red-50 active:bg-red-100 focus-visible:ring-red-600"
+},
+green:{
+primary:"bg-green-600 border-green-600 text-white hover:bg-green-700 active:bg-green-800 focus-visible:ring-green-600",
+secondary:"bg-transparent border-green-600 text-green-600 hover:bg-green-50 active:bg-green-100 focus-visible:ring-green-600",
+tertiary:"bg-transparent border-transparent text-green-600 hover:bg-green-50 active:bg-green-100 focus-visible:ring-green-600"
+},
+yellow:{
+primary:"bg-yellow-600 border-yellow-600 text-white hover:bg-yellow-700 active:bg-yellow-800 focus-visible:ring-yellow-600",
+secondary:"bg-transparent border-yellow-600 text-yellow-600 hover:bg-yellow-50 active:bg-yellow-100 focus-visible:ring-yellow-600",
+tertiary:"bg-transparent border-transparent text-yellow-600 hover:bg-yellow-50 active:bg-yellow-100 focus-visible:ring-yellow-600"
+},
+blue:{
+primary:"bg-sky-600 border-sky-600 text-white hover:bg-sky-700 active:bg-sky-800 focus-visible:ring-sky-600",
+secondary:"bg-transparent border-sky-600 text-sky-600 hover:bg-sky-50 active:bg-sky-100 focus-visible:ring-sky-600",
+tertiary:"bg-transparent border-transparent text-sky-600 hover:bg-sky-50 active:bg-sky-100 focus-visible:ring-sky-600"
+},
+gray:{
+primary:"bg-gray-600 border-gray-600 text-white hover:bg-gray-700 active:bg-gray-800 focus-visible:ring-gray-600",
+secondary:"bg-transparent border-gray-600 text-gray-600 hover:bg-gray-50 active:bg-gray-100 focus-visible:ring-gray-600",
+tertiary:"bg-transparent border-transparent text-gray-600 hover:bg-gray-50 active:bg-gray-100 focus-visible:ring-gray-600"
+}
+};
 
+return c[b]?.[a]||c.darkBlue.primary
+},
 
 
+colorToVariant={
+red:"danger",
+blue:"blue",
+green:"primary",
+yellow:"warning",
+darkBlue:"primary",
+gray:"gray"
+},
 
 
+iconMap={
+warning:"ExclamationTriangleIcon",
+"arrow-down-on-square":"ArrowDownTrayIcon",
+"bell-alert":"BellAlertIcon",
+help:"QuestionMarkCircleIcon",
+"watch-later":"ClockIcon",
+loading:"ArrowPathIcon"
+},
 
+iconSizeMap={
+xs:"sm",
+sm:"sm",
+md:"md",
+lg:"lg"
+},
 
+Button=(a)=>
 
 
 
@@ -46,71 +104,107 @@ const Button=(a)=>
 
 
 
-{
 
 
-function b(){
-return/*#__PURE__*/(
-_react.default.createElement(_styledComponents.ThemeProvider,{theme:_theme.default},/*#__PURE__*/
-_react.default.createElement(_globalStyle.default,null),/*#__PURE__*/
-_react.default.createElement(_index.BaseButton,_extends({
-"data-test":"button",
-type:e,
-wide:g,
-size:i,
-mainColor:j,
-disabled:h||n,
-"data-styletype":k,
-marginLeft:p,
-marginRight:q},
-d),
 
 
-f&&/*#__PURE__*/
 
-_react.default.createElement(_index.StyledIcon,{
-name:f,
-size:i,
-color:r}
-),
 
 
-"string"==typeof c?/*#__PURE__*/
-_react.default.createElement(_typography.Text,{
-size:_theme.default.size[i].font,
-color:r,
-fontWeight:600},
 
-n?"\u0635\u0628\u0631 \u06A9\u0646\u06CC\u062F...":c
-):
 
 
-c
 
+
+
+
+
+{let{// Old API props
+styleType:h="primary",mainColor:i="darkBlue",size:j="md",icon:k=null,iconPosition:l="left",wide:m=!1,disabled:n=!1,type:o="button",linkTo:p=null,renderLink:q=null,// New API props
+variant:b,htmlType:c,isLoading:r=!1,loadingText:s="\u0635\u0628\u0631 \u06A9\u0646\u06CC\u062F...",linkTarget:t="_self",children:d,className:u="",onClick:e,"aria-label":f,...g}=a;const v=b||(i?colorToVariant[i]:h),w=c||("anchor"===o?void 0:o),
+x=n||r,
+y=k&&!d,
+
+z=getStyleClasses(h,i),
+
+A=(0,_tailwindMerge.twMerge)(
+base,
+_theme.sizes[j],
+z,
+m?"w-full":"",
+y?"p-2":"",
+u
+),
+
+B=/*#__PURE__*/
+_react.default.createElement(_react.default.Fragment,null,
+r&&/*#__PURE__*/
+_react.default.createElement(_icon.default,{
+name:"loading",
+size:iconSizeMap[j],
+className:"animate-spin mr-2"}
+),
+
+!r&&k&&"left"===l&&/*#__PURE__*/
+_react.default.createElement(_icon.default,{
+name:k,
+size:iconSizeMap[j],
+className:d?"mr-2":""}
+),
+
+r?s:d,
+!r&&k&&"right"===l&&/*#__PURE__*/
+_react.default.createElement(_icon.default,{
+name:k,
+size:iconSizeMap[j],
+className:d?"ml-2":""}
 )
-))
 
-}let{htmlType:e="submit",icon:f=null,wide:g=!1,disabled:h=!1,size:i="md",mainColor:j="darkBlue",styleType:k="primary",linkTo:l=null,linkTarget:m="_self",isLoading:n=!1,renderLink:o=null,marginLeft:p=0,marginRight:q=0,children:c,...d}=a;const r=(0,_utils.default)(k,j);return(
+),
 
-(l||o)&&!h?
-o?/*#__PURE__*/
 
-_react.default.createElement(_index.InternalLink,null,
-o(/*#__PURE__*/_react.default.createElement(b,null))
-):/*#__PURE__*/
+C={
+type:p||q?void 0:w,
+className:A,
+disabled:x,
+onClick:x?void 0:e,
+"aria-disabled":x,
+"aria-busy":r,
+"aria-label":y?f||k:void 0,
+...g
+};return(
+
+!x&&q)?
+q(/*#__PURE__*/
+_react.default.createElement("button",_extends({},C,{type:"button"}),
+B
+)
+):
 
 
+!x&&p?/*#__PURE__*/
 
+_react.default.createElement("a",_extends({
+href:p,
+target:t,
+className:A,
+role:"button",
+"aria-disabled":x,
+"aria-busy":r,
+"aria-label":y?f||k:void 0},
+g),
 
-_react.default.createElement(_index.ExternalLink,{href:l,target:m},/*#__PURE__*/
-_react.default.createElement(b,null)
+B
 ):/*#__PURE__*/
 
 
 
 
-_react.default.createElement(b,null))
-
-};var _default=exports.default=
+_react.default.createElement("button",C,
+B
+)
 
-Button;
+};// Style type templates
+// Color mapping
+// Map old icon names to Heroicons
+var _default=exports.default=Button;

package/button/index.styles.js

@@ -1,101 +1,104 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StyledIcon=exports.InternalLink=exports.ExternalLink=exports.BaseButton=void 0;var _templateObject,_templateObject2,_templateObject3,_templateObject4,_styledComponents=_interopRequireDefault(require("styled-components")),_icon=_interopRequireDefault(require("../icon")),_theme=require("../utils/theme");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}const
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StyledIcon=exports.InternalLink=exports.ExternalLink=exports.BaseButton=void 0;var _styledComponents=_interopRequireDefault(require("styled-components")),_icon=_interopRequireDefault(require("../icon")),_theme=require("../utils/theme");function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}const
 
 
 
-BaseButton=exports.BaseButton=_styledComponents.default.button(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: ",";\n  height: ",";\n  min-width: ",";\n  min-height: ",";\n\n  padding: ",";\n  box-sizing: border-box;\n\n  cursor: ",";\n  opacity: ",";\n  border-radius: ",";\n\n  margin: ",";\n\n  &[data-styletype=\"primary\"] {\n    border: none;\n    background: ",";\n    \n    &:hover { \n      transition: all 0.25s;\n      background: ",";\n    }\n    &:active {\n      transition: all 0.25s;\n      background: ",";\n    }\n  }\n  \n  &[data-styletype=\"secondary\"] {\n    border: 1px solid ",";\n    background: transparent;\n\n    &:hover { \n      border-color: ",";\n      transition: all 0.25s;\n      background: ",";\n      * {\n        transition: all 0.25s;\n        color: ",";\n      }\n    }\n    &:active {\n      border-color: ",";\n      background: ",";\n      * {\n        transition: all 0.25s;\n        color: ",";\n      }\n    }\n  }\n\n  &[data-styletype=\"tertiary\"] {\n    border: none;\n    background: transparent;\n\n    &:hover { \n      * {\n        transition: all 0.25s;\n        color: ",";\n      }\n    }\n    &:active {\n      * {\n        transition: all 0.25s;\n        color: ",";\n      }\n    }\n\n  }\n"])),
+BaseButton=exports.BaseButton=_styledComponents.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
+  width: ${(a)=>{let{width:b,wide:c}=a;return b?`${b}`:c?"100%":"auto"}};
+  height: ${(a)=>{let{height:b}=a;return b?`${b}`:"auto"}};
+  min-width: ${(a)=>{let{size:b,theme:c,width:d}=a;return d?`${d}`:`${c.size[b].minWidth}px`}};
+  min-height: ${(a)=>{let{size:b,theme:c,height:d}=a;return d?`${d}`:`${c.size[b].height}px`}};
 
+  padding: ${(a)=>{let{size:b,theme:c}=a;return c.size[b].padding}};
+  box-sizing: border-box;
 
+  cursor: ${(a)=>{let{disabled:b}=a;return b?"not-allowed":"pointer"}};
+  opacity: ${(a)=>{let{disabled:b}=a;return b?"0.25":"1"}};
+  border-radius: ${(a)=>{let{theme:b}=a;return`${b.borderRadius}px`}};
 
-(a)=>{let{width:b,wide:c}=a;return b?"".concat(b):c?"100%":"auto"},
-(a)=>{let{height:b}=a;return b?"".concat(b):"auto"},
-(a)=>{let{size:b,theme:c,width:d}=a;return d?"".concat(d):"".concat(c.size[b].minWidth,"px")},
-(a)=>{let{size:b,theme:c,height:d}=a;return d?"".concat(d):"".concat(c.size[b].height,"px")},
-
-(a)=>{let{size:b,theme:c}=a;return c.size[b].padding},
-
-
-(a)=>{let{disabled:b}=a;return b?"not-allowed":"pointer"},
-(a)=>{let{disabled:b}=a;return b?"0.25":"1"},
-(a)=>{let{theme:b}=a;return"".concat(b.borderRadius,"px")},
-
-(a)=>{let{
+  margin: ${(a)=>{let{
 marginRight:b,marginLeft:c
-}=a;return"0 ".concat(b||0,"px 0 ").concat(c||0,"px")},
-
-
-
-(a)=>{let{theme:b,mainColor:c}=a;return(0,_theme.getColorFromName)(b,c)},
-
-
-
-(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?(0,_theme.getColorFromName)(b,c):(0,_theme.getHoverColorFromName)(b,c)},
-
-
-
-(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?(0,_theme.getColorFromName)(b,c):(0,_theme.getFocusColorFromName)(b,c)},
-
-
-
-
-(a)=>{let{theme:b,mainColor:c}=a;return(0,_theme.getColorFromName)(b,c)},
-
-
-
-(a)=>{let{theme:b,disabled:c,mainColor:d}=a;return c?(0,_theme.getColorFromName)(b,d):"transparent"},
-
-(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?"transparent":(0,_theme.getColorFromName)(b,c)},
-
-
-(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?(0,_theme.getColorFromName)(b,c):b.colors.white},
-
-
-
-(a)=>{let{theme:b,disabled:c,mainColor:d}=a;return c?(0,_theme.getColorFromName)(b,d):"transparent"},
-(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?"transparent":(0,_theme.getFocusColorFromName)(b,c)},
-
-
-(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?(0,_theme.getColorFromName)(b,c):b.colors.white},
-
-
-
-
-
-
-
-
-
-
-
-(a)=>{let{theme:b}=a;return b.colors.darkBlue400},
-
-
-
-
-
-(a)=>{let{theme:b}=a;return b.colors.darkBlue800}),
-
-
-
-
-
-
-StyledIcon=exports.StyledIcon=(0,_styledComponents.default)(_icon.default)(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n  margin-right: 0;\n"]))),
-
-
-
-ExternalLink=exports.ExternalLink=_styledComponents.default.a(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n  color: ",";\n  text-decoration: none;\n  &:hover {\n    text-decoration: none;\n  }\n  &:visited {\n    color: ",";\n    text-decoration: none;\n  }\n"])),
-(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)},
-
-
-
-
-
-(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}),
-
-
-
-
-InternalLink=exports.InternalLink=_styledComponents.default.div(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n  a {\n    color: ",";\n    text-decoration: none;\n  }\n"])),
-
-(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)});
+}=a;return`0 ${b||0}px 0 ${c||0}px`}};
+
+  &[data-styletype="primary"] {
+    border: none;
+    background: ${(a)=>{let{theme:b,mainColor:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+    
+    &:hover { 
+      transition: all 0.25s;
+      background: ${(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?(0,_theme.getColorFromName)(b,c):(0,_theme.getHoverColorFromName)(b,c)}};
+    }
+    &:active {
+      transition: all 0.25s;
+      background: ${(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?(0,_theme.getColorFromName)(b,c):(0,_theme.getFocusColorFromName)(b,c)}};
+    }
+  }
+  
+  &[data-styletype="secondary"] {
+    border: 1px solid ${(a)=>{let{theme:b,mainColor:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+    background: transparent;
+
+    &:hover { 
+      border-color: ${(a)=>{let{theme:b,disabled:c,mainColor:d}=a;return c?(0,_theme.getColorFromName)(b,d):"transparent"}};
+      transition: all 0.25s;
+      background: ${(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?"transparent":(0,_theme.getColorFromName)(b,c)}};
+      * {
+        transition: all 0.25s;
+        color: ${(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?(0,_theme.getColorFromName)(b,c):b.colors.white}};
+      }
+    }
+    &:active {
+      border-color: ${(a)=>{let{theme:b,disabled:c,mainColor:d}=a;return c?(0,_theme.getColorFromName)(b,d):"transparent"}};
+      background: ${(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?"transparent":(0,_theme.getFocusColorFromName)(b,c)}};
+      * {
+        transition: all 0.25s;
+        color: ${(a)=>{let{theme:b,mainColor:c,disabled:d}=a;return d?(0,_theme.getColorFromName)(b,c):b.colors.white}};
+      }
+    }
+  }
+
+  &[data-styletype="tertiary"] {
+    border: none;
+    background: transparent;
+
+    &:hover { 
+      * {
+        transition: all 0.25s;
+        color: ${(a)=>{let{theme:b}=a;return b.colors.darkBlue400}};
+      }
+    }
+    &:active {
+      * {
+        transition: all 0.25s;
+        color: ${(a)=>{let{theme:b}=a;return b.colors.darkBlue800}};
+      }
+    }
+
+  }
+`,
+
+StyledIcon=exports.StyledIcon=(0,_styledComponents.default)(_icon.default)`
+  margin-right: 0;
+`,
+
+ExternalLink=exports.ExternalLink=_styledComponents.default.a`
+  color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+  &:visited {
+    color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+    text-decoration: none;
+  }
+`,
+
+InternalLink=exports.InternalLink=_styledComponents.default.div`
+  a {
+    color: ${(a)=>{let{theme:b,color:c}=a;return(0,_theme.getColorFromName)(b,c)}};
+    text-decoration: none;
+  }
+`;