@startlibs/components 1.0.4 → 1.1.1

package/lib/index.mjs

@@ -0,0 +1,37 @@
+export { Icon } from './Icon.mjs';
+export { Loading } from './Loading.mjs';
+export { Button, DropdownIcon } from './Button.mjs';
+export { OnClickLoadingButton } from './alt/buttons/OnClickLoadingButton.mjs';
+export { TextButton } from './TextButton.mjs';
+export { LoadingDiv } from './LoadingDiv.mjs';
+export { CloseIcon, ConfirmDialog, DefaultConfirmDialog, Dialog, DialogContent, DialogContentWrapper, DialogError, DialogErrorContent, DialogFooter, DialogIcon, DialogTitle, FooterAuxiliaryContainer } from './Dialog.mjs';
+export { useDialog, useDialogWithToggle } from './useDialogWithToggle.mjs';
+export { DefaultWarningDialog, WarningDialog, WarningDialogIcon, WarningDialogTitle, setWarningDialog, useWarningDialog } from './WarningDialog.mjs';
+export { Notifications, setNotification, useNotification, useNotificationRef, willSetNotification } from './Notifications.mjs';
+export { ToastNotifications, createToastNotification, useToastNotificationToggle, useToastNotifications, willShowToastNotification } from './ToastNotifications.mjs';
+export { PersistentNotification, PersistentNotificationActions, PersistentNotificationCloseIcon, PersistentNotificationContent, PersistentNotificationIcon, PersistentNotifications, hidePersistentNotifications, openPersistentNotification, useIsHiddenPersistentNotifications } from './PersistentNotifications.mjs';
+export { DefaultArrow, addPositioningBound, usePositioning } from './containers/usePositioning.mjs';
+export { Reposition } from './containers/Reposition.mjs';
+export { AnimatedModal, DialogContainer, Modal, ModalContainer, dialogFadeInDown, dialogModalIn, dialogModalOut, getDialogLayersSize, isFakeScrolled, preventDialogPop, removeWindowScroll, useDialogLayers, waitForPop } from './containers/DialogContainer.mjs';
+export { DraggableContainer, DraggableItem, DroppableContainer } from './Draggable.mjs';
+export { Popup } from './Popup.mjs';
+export { Tooltip } from './Tooltip.mjs';
+export { SplitColumnsContainer, fixDoubledLastMarginBottom } from './SplitColumnsContainer.mjs';
+export { ContextListMenu, ContextMenu, ContextMenuComponent, Li, ListHeading, ListItem, ListMenu, ListSeparator, SimpleLi, StickyContainer, contextMenuLayersQuantity } from './ContextMenu.mjs';
+export { ErrorBoundary } from './ErrorBoundary.mjs';
+export { LoadingBar, PageLoader, SuspenseLoadingBar } from './PageLoader.mjs';
+export { FillLastLineResizer } from './FillLastLineResizer.mjs';
+export { defaultAnimationMaker, formatAnimation, getClientRectAnimation, morph, toPosition, useFlip, useFlipAnimation, useFlipEnter, useFlipLeave, willUseFlip, willUseFlipSwitch } from './Flip.mjs';
+export { FlipList } from './FlipList.mjs';
+export { AnimationBlockContainer, TransitionDiv } from './TransitionDiv.mjs';
+export { SwitchDiv } from './SwitchDiv.mjs';
+export { willUseIsSticky } from './willUseIsSticky.mjs';
+export { FormatDate } from './FormatDate.mjs';
+export { Image } from './Image.mjs';
+export { DialogWithImageHeader } from './alt/dialogs/DialogWithImageHeader.mjs';
+export { DialogTabMenu, DialogWithSidebar, DialogWithSidebarPresentation, MENU_TAB, SideMenu } from './alt/dialogs/DialogWithSidebar.mjs';
+export { MobileBubbleDialog } from './alt/dialogs/MobileBubbleDialog.mjs';
+export { HistoryLink, Link, Navigate, Route, Router, Routes, useAbsoluteLocation, useAbsolutePath, useLocation, useNavigate, useParams, useSearchParams } from './Link.mjs';
+export { BasicBulletList } from './BasicBulletList.mjs';
+export { useBrowserLocation } from 'wouter/use-browser-location';
+//# sourceMappingURL=index.mjs.map

package/lib/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/useDialogWithToggle.mjs

@@ -0,0 +1,18 @@
+import { useToggle, useFill } from '@startlibs/core';
+
+const useDialog = function (dialog) {
+  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let toggleCallback = arguments.length > 2 ? arguments[2] : undefined;
+  const toggle = useToggle(false, toggleCallback);
+  useFill("Dialog", toggle.isOpen !== false && dialog(toggle.close), [toggle.isOpen, ...args]);
+  return toggle.open;
+};
+const useDialogWithToggle = function (dialog) {
+  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const toggle = useToggle();
+  useFill("Dialog", toggle.isOpen !== false && dialog(toggle), [toggle.isOpen, ...args]);
+  return toggle;
+};
+
+export { useDialog, useDialogWithToggle };
+//# sourceMappingURL=useDialogWithToggle.mjs.map

package/lib/useDialogWithToggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogWithToggle.mjs","sources":["../src/useDialogWithToggle.jsx"],"sourcesContent":["import {useToggle,useFill} from '@startlibs/core'\n\nexport const useDialog = (dialog, args = [], toggleCallback) => {\n  const toggle = useToggle(false,toggleCallback)\n  useFill(\"Dialog\", toggle.isOpen !== false && dialog(toggle.close), [toggle.isOpen, ...args])\n  return toggle.open\n}\nexport const useDialogWithToggle = (dialog, args = []) => {\n  const toggle = useToggle()\n  useFill(\"Dialog\", toggle.isOpen !== false && dialog(toggle), [toggle.isOpen, ...args])\n  return toggle\n}"],"names":["useDialog","dialog","args","arguments","length","undefined","toggleCallback","toggle","useToggle","useFill","isOpen","close","open","useDialogWithToggle"],"mappings":";;MAEaA,SAAS,GAAG,UAACC,MAAM,EAAgC;AAAA,EAAA,IAA9BC,IAAI,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;EAAA,IAAEG,cAAc,GAAAH,SAAA,CAAAC,MAAA,GAAAD,CAAAA,GAAAA,SAAA,MAAAE,SAAA,CAAA;AACzD,EAAA,MAAME,MAAM,GAAGC,SAAS,CAAC,KAAK,EAACF,cAAc,CAAC,CAAA;EAC9CG,OAAO,CAAC,QAAQ,EAAEF,MAAM,CAACG,MAAM,KAAK,KAAK,IAAIT,MAAM,CAACM,MAAM,CAACI,KAAK,CAAC,EAAE,CAACJ,MAAM,CAACG,MAAM,EAAE,GAAGR,IAAI,CAAC,CAAC,CAAA;EAC5F,OAAOK,MAAM,CAACK,IAAI,CAAA;AACpB,EAAC;MACYC,mBAAmB,GAAG,UAACZ,MAAM,EAAgB;AAAA,EAAA,IAAdC,IAAI,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;AACnD,EAAA,MAAMI,MAAM,GAAGC,SAAS,EAAE,CAAA;EAC1BC,OAAO,CAAC,QAAQ,EAAEF,MAAM,CAACG,MAAM,KAAK,KAAK,IAAIT,MAAM,CAACM,MAAM,CAAC,EAAE,CAACA,MAAM,CAACG,MAAM,EAAE,GAAGR,IAAI,CAAC,CAAC,CAAA;AACtF,EAAA,OAAOK,MAAM,CAAA;AACf;;;;"}

package/lib/willUseIsSticky.mjs

@@ -0,0 +1,123 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _without from 'lodash/fp/without';
+import _identity from 'lodash/fp/identity';
+import React, { useState, useEffect } from 'react';
+import { willUseSharedCallback, willUseSharedState, useEnsureRef } from '@startlibs/core';
+import styled from 'styled-components';
+import { callIfFunction } from '@startlibs/utils';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const TOP_TRIGGER = (posInfo, refInfo) => {
+  // Started sticking.
+  if (posInfo.bottom < refInfo.top) {
+    return true;
+  }
+  // Stopped sticking.
+  if (posInfo.bottom >= refInfo.top && posInfo.bottom < refInfo.bottom) {
+    return false;
+  }
+};
+const BOTTOM_TRIGGER = (posInfo, refInfo) => {
+  // Started sticking.
+  if (posInfo.top > refInfo.bottom) {
+    return true;
+  }
+  if (posInfo.top <= refInfo.bottom && posInfo.top > refInfo.top) {
+    return false;
+  }
+};
+const SentinelStyle = /*#__PURE__*/styled.div.withConfig({
+  displayName: "willUseIsSticky__SentinelStyle",
+  componentId: "sc-1nsyca-0"
+})(["position:absolute;visibility:hidden;height:1px;width:1px;", ""], props => props.addCss);
+const willUseIsSticky = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [useRegister, onChange] = willUseSharedCallback();
+  const [useSharedIsSticky,, setSharedIsSticky] = willUseSharedState();
+  const createObserver = root => window.IntersectionObserver ? new window.IntersectionObserver((records, observer) => {
+    for (const record of records) {
+      const targetInfo = record.boundingClientRect;
+      const rootBoundsInfo = record.rootBounds;
+      if (!rootBoundsInfo) {
+        return;
+      }
+      onChange(targetInfo, rootBoundsInfo, record.target, record.isIntersecting);
+    }
+  }, _objectSpread({
+    root
+  }, options)) : {
+    observe: _identity,
+    unobserve: _identity
+  };
+  const observerMap = new Map();
+  const getObserver = function () {
+    let root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    const result = observerMap.get(root);
+    if (result) {
+      return result;
+    }
+    const observer = createObserver(root);
+    observerMap.set(root, observer);
+    return observer;
+  };
+  let activeObserved = [];
+  const resetObservers = function () {
+    let root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    const observer = getObserver(root);
+    activeObserved.forEach(observed => {
+      observer.unobserve(observed);
+      observer.observe(observed);
+    });
+  };
+  const WithIsSticky = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+    let {
+      className,
+      id,
+      css,
+      children,
+      bottom,
+      root,
+      intersection,
+      onChange
+    } = _ref;
+    const ensuredRef = useEnsureRef(ref);
+    const [isSticky, setIsSticky] = useState(false);
+    useRegister((posInfo, refInfo, target, isIntersecting) => {
+      if (ensuredRef.current === target) {
+        const value = intersection ? isIntersecting : bottom ? BOTTOM_TRIGGER(posInfo, refInfo) : TOP_TRIGGER(posInfo, refInfo);
+        if (value !== undefined) {
+          setIsSticky(value);
+          callIfFunction(onChange, value);
+          if (!id) {
+            setSharedIsSticky(value);
+          } else if (value) {
+            setSharedIsSticky(id);
+          }
+        }
+      }
+    });
+    useEffect(() => {
+      setIsSticky(false);
+      getObserver(callIfFunction(root)).observe(ensuredRef.current);
+      activeObserved = activeObserved.concat(ensuredRef.current);
+      return () => {
+        // observer.unobserve(ref.current)
+        activeObserved = _without([ensuredRef.current], activeObserved);
+      };
+    }, []);
+    const renderSentinel = function () {
+      let css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+      return /*#__PURE__*/React.createElement(SentinelStyle, {
+        addCss: css,
+        className: className,
+        ref: ensuredRef
+      });
+    };
+    return children ? children(renderSentinel, isSticky) : renderSentinel(css);
+  });
+  return [WithIsSticky, useSharedIsSticky, resetObservers];
+};
+
+export { willUseIsSticky };
+//# sourceMappingURL=willUseIsSticky.mjs.map

package/lib/willUseIsSticky.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"willUseIsSticky.mjs","sources":["../src/willUseIsSticky.jsx"],"sourcesContent":["import React, {useEffect, useState} from 'react'\nimport {useEnsureRef, willUseSharedState, willUseSharedCallback} from '@startlibs/core'\nimport styled from 'styled-components'\nimport _ from 'lodash/fp'\nimport {callIfFunction} from '@startlibs/utils'\n\n\nconst TOP_TRIGGER = (posInfo,refInfo) => {\n  // Started sticking.\n  if (posInfo.bottom < refInfo.top) {\n    return true\n  }\n  // Stopped sticking.\n  if (posInfo.bottom >= refInfo.top &&\n    posInfo.bottom < refInfo.bottom) {\n    return false\n  }\n}\nconst BOTTOM_TRIGGER = (posInfo,refInfo) => {\n  // Started sticking.\n  if (posInfo.top > refInfo.bottom) {\n    return true\n  }\n  if (posInfo.top <= refInfo.bottom &&\n  posInfo.top > refInfo.top) {\n    return false\n  }\n}\n\nconst SentinelStyle = styled.div`\n  position:absolute;\n  visibility: hidden;\n  height:1px;\n  width: 1px;\n  ${props => props.addCss}\n`\n\nexport const willUseIsSticky = (options = {}) => {\n\n  const [useRegister, onChange] = willUseSharedCallback()\n  const [useSharedIsSticky,, setSharedIsSticky] = willUseSharedState()\n\n  const createObserver = (root) => window.IntersectionObserver ? new window.IntersectionObserver((records, observer) => {\n    for (const record of records) {\n      const targetInfo = record.boundingClientRect\n      const rootBoundsInfo = record.rootBounds\n      if (!rootBoundsInfo) {\n        return\n      }\n      onChange(targetInfo,rootBoundsInfo, record.target, record.isIntersecting)\n    }\n  },{root,...options}) : {observe:_.identity,unobserve:_.identity}\n\n  const observerMap = new Map()\n  const getObserver = (root = null) => {\n    const result = observerMap.get(root)\n    if (result) {\n      return result\n    }\n    const observer = createObserver(root)\n    observerMap.set(root,observer)\n    return observer\n  }\n  \n  let activeObserved = []\n  const resetObservers = (root = null) => {\n    const observer = getObserver(root)\n    activeObserved.forEach((observed) => {\n      observer.unobserve(observed)\n      observer.observe(observed)\n    })\n  }\n\n  const WithIsSticky = React.forwardRef(({className, id, css, children,bottom, root, intersection,onChange},ref) => {\n    const ensuredRef = useEnsureRef(ref)\n    const [isSticky,setIsSticky] = useState(false)\n\n    useRegister((posInfo,refInfo,target, isIntersecting) => {\n      if (ensuredRef.current === target) {\n        const value = intersection ?  isIntersecting : (bottom ? BOTTOM_TRIGGER(posInfo,refInfo) : TOP_TRIGGER(posInfo,refInfo))\n        if (value!==undefined) {\n          setIsSticky(value)\n          callIfFunction(onChange,value)\n          if (!id) {\n            setSharedIsSticky(value)\n          } else if (value) {\n            setSharedIsSticky(id)\n          }\n        }\n      }\n    })\n\n    useEffect(() => {\n      setIsSticky(false)\n      getObserver(callIfFunction(root)).observe(ensuredRef.current)\n      activeObserved = activeObserved.concat(ensuredRef.current)\n      return () => {\n        // observer.unobserve(ref.current)\n        activeObserved = _.without([ensuredRef.current],activeObserved)\n      }\n    },[])\n\n    const renderSentinel = (css = \"\") => <SentinelStyle addCss={css} className={className} ref={ensuredRef} />\n\n    return children\n      ? children(renderSentinel,isSticky)\n      : renderSentinel(css)\n\n  })\n\n\n  return [WithIsSticky, useSharedIsSticky, resetObservers]\n}"],"names":["TOP_TRIGGER","posInfo","refInfo","bottom","top","BOTTOM_TRIGGER","SentinelStyle","styled","div","withConfig","displayName","componentId","props","addCss","willUseIsSticky","options","arguments","length","undefined","useRegister","onChange","willUseSharedCallback","useSharedIsSticky","setSharedIsSticky","willUseSharedState","createObserver","root","window","IntersectionObserver","records","observer","record","targetInfo","boundingClientRect","rootBoundsInfo","rootBounds","target","isIntersecting","_objectSpread","observe","_identity","unobserve","observerMap","Map","getObserver","result","get","set","activeObserved","resetObservers","forEach","observed","WithIsSticky","React","forwardRef","_ref","ref","className","id","css","children","intersection","ensuredRef","useEnsureRef","isSticky","setIsSticky","useState","current","value","callIfFunction","useEffect","concat","_without","renderSentinel","createElement"],"mappings":"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"}

package/package.json

@@ -1,51 +1,57 @@
 {
   "name": "@startlibs/components",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "description": "Startlibs Components",
-  "main": "lib/index.js",
+  "main": "lib/index.cjs",
+  "exports": {
+    ".": {
+      "source": "./src/index.js",
+      "require": "./lib/index.cjs",
+      "import": "./lib/index.mjs",
+      "default": "./lib/index.mjs"
+    },
+    "./package.json": "./package.json",
+    "./*": {
+      "import": "./lib/*.mjs"
+    }
+  },
   "sideEffects": false,
-  "source": true,
+  "source": "./src/index.js",
   "peerDependencies": {
-    "@startlabs/core": "*",
+    "@startlibs/core": "*",
     "@startlibs/utils": "*",
-    "lodash": "*",
-    "mitt": "*",
-    "react": "*",
-    "react-dom": "*",
-    "react-is": "*",
-    "styled-components": "*",
+    "lodash": "^4.17.21",
+    "polished": "^2.0.0 || ^3.0.0 || ^4.0.0",
+    "react": ">=16.8",
+    "react-dom": ">=16.8",
+    "react-is": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "styled-components": ">=5",
     "wouter": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",
-    "@babel/plugin-external-helpers": "^7.2.0",
-    "@babel/plugin-proposal-class-properties": "^7.2.1",
-    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
-    "@babel/plugin-proposal-json-strings": "^7.2.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/plugin-transform-spread": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-macros": "^2.4.2",
     "babel-plugin-styled-components": "^1.10.0",
-    "fbjs-scripts": "^0.6.0-alpha.3",
-    "rollup": "^2.18.0",
-    "rollup-plugin-alias": "^2.2.0",
+    "lodash": "^4.17.21",
+    "patch-package": "^8.0.1",
+    "polished": "^2.0.0 || ^3.0.0 || ^4.0.0",
+    "react-is": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "rollup": "^2.79.2",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^5.2.0"
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "styled-components": "^5.3.11"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "prepare": "patch-package"
   },
   "repository": {
     "type": "git",
@@ -62,9 +68,20 @@
   },
   "homepage": "https://github.com/felipeko/startlibs#readme",
   "dependencies": {
-    "mitt": "^1.1.2",
-    "react-is": "^16.8.3",
-    "react-window": "^1.8.6",
-    "styled-components": "5.1.1"
-  }
+    "@babel/runtime": "^7.20.0",
+    "mitt": "^1.1.2"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "module": "lib/index.mjs",
+  "browserslist": [
+    "chrome >= 61",
+    "edge >= 79",
+    "firefox >= 60",
+    "safari >= 11",
+    "ios_saf >= 11",
+    "samsung >= 8.2"
+  ]
 }

package/src/BasicBulletList.jsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+export const BasicBulletList = styled.ul`
+  margin-bottom: 0;
+  font-size: 13px;
+
+  li {
+    margin-top: 4px;
+    padding-left: 1rem;
+    position: relative;
+
+    :before {
+      content: '•';
+      font-size: 17px;
+      line-height: 0;
+      position: absolute;
+      left: 0;
+      top: 7px;
+    }
+  }
+`

package/src/Button.jsx

@@ -0,0 +1,288 @@
+import React from 'react'
+
+import {customTheme, getColor, media, styledExtend} from '@startlibs/utils'
+import {darken, transparentize} from 'polished'
+import styled, {css} from 'styled-components'
+
+import {Icon} from './Icon'
+import {Link} from './Link'
+import {Loading} from './Loading'
+
+export const DropdownIcon = styledExtend(Icon)`
+  position: absolute;
+  top: 51%;
+  transform: translateY(-50%);
+  right: 1rem;
+  font-size: 12px;
+`
+const LockIcon = styled(Icon)`
+  position:absolute;
+  bottom: 10px;
+  right: .75rem;
+  left: auto;
+  top: auto;
+  font-size: 18px;
+`
+
+const focus = css`
+:after{
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  left: -3px;
+  bottom: -3px;
+  border-radius: ${props => props.rounded ? '100px' : '11px'};
+  border: 2px solid rgba(0, 0, 0, 0.15);
+}
+`
+
+export const Button = styled(React.forwardRef(({
+                                type = "button", locked, color, alpha, success, alert, warning, highlight, light, hover, white, icon, onlyIcon, small, withDropdown, onlyDropdown, outline, dashed, textOnly, isLoading, isLoadingIcon, dark,
+                                innerAs: Wrapper = 'button', className, children, rounded, tabIndex = 1, focused, noFocus,
+                                colorSet, concealed, concealedModule, buttonRef, ...props
+                              },ref) =>
+  <Wrapper ref={ref || buttonRef} tabIndex={tabIndex} className={className + ' styled-button' + ((color || success || alert || warning || highlight || dark || hover || outline || dashed || textOnly || white || alpha || props.lightAlert || props.lightWarning) ? ' styled-button-colored' : '')} type={Wrapper === 'button' ? type : ''} {...props}>
+    {icon && <Icon icon={icon} aria-hidden="true"/>}
+    {isLoadingIcon && <Loading white={!light && !outline && !dashed && !white} size={small ? '10' : '18'} borderWidth={small ? '2' : '3'}/>}
+    {(withDropdown || onlyDropdown) && !locked && <DropdownIcon icon='arrow-down' aria-hidden="true"/>}
+    {locked && <LockIcon icon="lock" aria-hidden="true"/>}
+    {children}
+    {isLoading && <Loading white={!light && !outline && !dashed && !white} absolute size={small && '16'} borderWidth={small && '3'} />}
+  </Wrapper>))`
+  vertical-align: top;
+  border: 0;
+  font-size: 13px;
+  border-radius: ${props => props.rounded ? '100px' : '8px'};
+  background: ${getColor};
+  color: white;
+  min-width: 8rem;
+  font-weight: 600;
+  display: inline-block;
+  // line-height: 16px;
+  text-align: center;
+  padding: 10px 1.25rem;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  text-decoration: none;
+  user-select: none;
+  flex-shrink: 0;
+  :hover {
+    background: ${props => darken(0.05, getColor(props, true))};
+  }
+  :active {
+    background: ${props => darken(0.08, getColor(props, true))};
+  }
+  ${props => props.nowrap && `
+    white-space: nowrap;
+  `}
+  ${props => !props.noFocus && !props.isLoading && css`
+    :focus {
+      ${focus}
+    }
+    ${props => props.focused && focus}
+  `}
+  & + & {
+    margin-left: 1rem;
+  }
+  
+  ${props => props.hasErrors && css`
+    :after {
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      left: -4px;
+      bottom: -4px;
+      border-radius: ${props => props.rounded ? '100px' : '11px'};
+      border: 3px solid ${props => transparentize(0.7, getColor("alert")(props))};
+    }
+  `}
+  ${props => props.icon && css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 3rem;
+    min-height: 3rem;
+    ${Icon} {
+      font-size: 23px;
+      margin-left: -4px;
+      margin-right: 8px;
+      pointer-events: none;
+      line-height: 0;
+    }
+  `}
+  ${props => props.onlyIcon && css`
+    padding: 0;
+    ${Icon} {
+      margin: 0;
+    }
+  `}
+  ${props => props.small && css`
+    font-size: 13px;
+    padding: 3px 1rem;
+    min-width: 2rem;
+    min-height: 2rem;
+    font-weight: 550;
+    ${props.icon && css`
+      ${Icon} {
+        font-size: 18px;
+        margin-left: -5px;
+        margin-right: 5px;
+        line-height: 0.9;
+      }
+    `}
+    ${props.onlyIcon && css`
+      padding: 0;
+      ${Icon} {
+        margin: 0;
+      }
+    `}
+  `}
+  ${props => props.big && css`
+    font-size: 14px;
+    padding: 13px 1.75rem;
+    min-height: 42px;
+  `}
+  ${props => props.withDropdown && css`
+    padding-right: 2.25rem;
+    text-align: left;
+  `}
+  ${props => props.onlyDropdown && css`
+    ${DropdownIcon} {
+      right: 50%;
+      transform: translate(50%,-50%);
+    }
+  `}
+  ${props => props.light && css`
+    background: ${getColor('bluishGray')};
+    color: ${getColor('gray90')};
+    :hover {
+      background: ${props => darken(0.05, getColor('bluishGray')(props))};
+    }
+    :active {
+      background: ${props => darken(0.08, getColor('bluishGray')(props))};
+    }
+  `}
+  ${props => props.lightAlert && css`
+    background: ${props => transparentize(0.86, getColor("alert")(props))};
+    color: ${getColor('alert')};
+    :hover {
+      background: ${props => transparentize(0.83, getColor("alert")(props))};
+    }
+    :active {
+      background: ${props => transparentize(0.80, getColor("alert")(props))};
+    }
+  `}
+  ${props => props.lightWarning && css`
+    background: ${props => transparentize(0.84, darken(0.05, getColor('warning')(props)))};
+    color: ${props => darken(0.05, getColor('warning')(props))};
+    :hover {
+      background: ${props => transparentize(0.78, darken(0.05, getColor('warning')(props)))};
+    }
+    :active {
+      background: ${props => transparentize(0.76, darken(0.05, getColor('warning')(props)))};
+    }
+  `}
+  ${props => (props.outline || props.dashed || props.textOnly) && css`
+    color: ${props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.6)'};
+    background: none;
+    ${Icon}, ${DropdownIcon} {
+      color: ${props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.5)'};
+    }
+    :before {
+      content: '';
+      border: 1px ${props.outline ? 'solid' : props.dashed ? 'dashed' : ''} ${props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.35)'};
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: ${props.rounded ? '100px' : '8px'};
+      pointer-events: none;
+    }
+    :hover {
+        background-color: rgba(0,0,0,0.05);
+    }
+    :active {
+        background-color: rgba(0,0,0,0.08);
+    }
+    :focus {
+      :before {
+        box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
+        ${props.textOnly && 'content: none;'}
+      }
+      :after {
+        content: none;
+      }
+    }
+  `}
+  ${props => props.alpha && css`
+    background: rgba(0,0,0,0.45);
+    :hover {
+      background: rgba(0,0,0,0.50);
+    }
+    :active {
+      background: rgba(0,0,0,0.55);
+    }
+  `}
+  ${props => props.white && !props.outline && !props.dashed && css`
+    color: ${getColor('main')};
+    background: #FFFFFF;
+    :hover {
+      background: ${darken(0.05, '#FFFFFF')};
+    }
+    :active {
+      background: ${darken(0.08, '#FFFFFF')};
+    }
+  `}
+  ${props => props.isLoading && css`
+    color: transparent !important;
+    pointer-events: none;
+    ${Icon} {
+      visibility: hidden;
+    }
+  `}
+  ${props => props.isLoadingIcon && css`
+    pointer-events: none;
+    ${Icon} {
+      visibility: hidden;
+    }
+    ${Loading} {
+      left: 10px;
+      position: absolute;
+    }
+  `}
+  ${media.mobile`
+    ${props => !props.small && !props.onlyIcon && css`
+      padding: 13px 1.5rem;
+      font-size: 14px;
+    `}
+    ${props => !props.small && props.onlyIcon && css`
+      min-width: 3.5rem;
+      min-height: 3.5rem;
+    `}
+    ${props => props.withDropdown && css`
+      padding-right: 2.5rem;
+      ${DropdownIcon} {
+        right: 14px;
+      }
+    `}
+  `}
+  ${media.max(359)`
+    ${props => !props.small && !props.onlyIcon && !props.onlyDropdown && css`
+      min-width: 0;
+    `}
+  `}
+  ${props => props.fullwidth && `
+    width: 100%;
+  `}
+  ${customTheme("Button")}
+`
+
+Button.a = (props) => <Button {...props} className={props.className} innerAs="a"/>
+Button.Link = (props) => <Button {...props} className={props.className} innerAs={Link}/>
+export default Button