@uidu/fab - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

 # @uidu/fab
 
+## 0.4.1
+
+### Patch Changes
+
+- 8a049c8: Payments update to PaymentMethod and different naming
+
 ## 0.4.0
@@ -4,0 +10,0 @@

dist/package.json

 {
 	"name": "@uidu/fab",
-	"version": "0.4.0"
+	"version": "0.4.1"
 }

dist/uidu-fab.cjs.dev.js

@@ -6,2 +6,3 @@ 'use strict';
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -18,38 +19,2 @@ var styled = require('styled-components');
 
-var StyledMainButton = styled__default['default'].button.withConfig({
-  displayName: "styled__StyledMainButton",
-  componentId: "ps9aer-0"
-})(["height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;&:focus{outline:none;}> *{transition:ease-in-out transform 0.2s;}"]);
-var StyledActionWrapper = styled__default['default'].li.withConfig({
-  displayName: "styled__StyledActionWrapper",
-  componentId: "ps9aer-1"
-})(["display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0;transition:ease-in-out transform 0.2s;> span{transition:ease-in-out opacity 0.2s;position:absolute;top:50%;transform:translateY(-50%);margin:0 8px;background:rgba(0,0,0,0.75);padding:4px 8px;border-radius:3px;color:white;font-size:13px;&.right{right:100%;}}&:nth-child(1){transform:translateY(-60px) scale(0);transition-delay:0.21s;&.top{transform:translateY(60px) scale(0);}}&:nth-child(2){transform:translateY(-120px) scale(0);transition-delay:0.18s;&.top{transform:translateY(120px) scale(0);}}&:nth-child(3){transform:translateY(-180px) scale(0);transition-delay:0.15s;&.top{transform:translateY(180px) scale(0);}}&:nth-child(4){transform:translateY(-240px) scale(0);transition-delay:0.12s;&.top{transform:translateY(240px) scale(0);}}&:nth-child(5){transform:translateY(-300px) scale(0);transition-delay:0.09s;&.top{transform:translateY(300px) scale(0);}}&:nth-child(6){transform:translateY(-360px) scale(0);transition-delay:0.03s;&.top{transform:translateY(360px) scale(0);}}"]);
-var StyledActions = styled__default['default'].li.withConfig({
-  displayName: "styled__StyledActions",
-  componentId: "ps9aer-2"
-})(["padding:25px;margin:-25px;*:last-child{margin-bottom:0;}"]);
-var StyledAction = styled__default['default'].button.withConfig({
-  displayName: "styled__StyledAction",
-  componentId: "ps9aer-3"
-})(["height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;&:focus{outline:none;}"]);
-var StyledFab = styled__default['default'].ul.withConfig({
-  displayName: "styled__StyledFab",
-  componentId: "ps9aer-4"
-})(["box-sizing:border-box;margin:25px;position:absolute;white-space:nowrap;z-index:9998;padding-left:0;list-style:none;", ""], function (_ref) {
-  var isOpen = _ref.isOpen;
-
-  if (isOpen) {
-    return styled.css(["", "{> *{transform-origin:center center;transform:rotate(135deg);transition:ease-in-out transform 0.2s;}> ul{list-style:none;margin:0;padding:0;}}", "{&:hover{}&:nth-child(1){transform:translateY(-60px) scale(1);transition-delay:0.03s;&.top{transform:translateY(60px) scale(1);}}&:nth-child(2){transform:translateY(-120px) scale(1);transition-delay:0.09s;&.top{transform:translateY(120px) scale(1);}}&:nth-child(3){transform:translateY(-180px) scale(1);transition-delay:0.12s;&.top{transform:translateY(180px) scale(1);}}&:nth-child(4){transform:translateY(-240px) scale(1);transition-delay:0.15s;&.top{transform:translateY(240px) scale(1);}}&:nth-child(5){transform:translateY(-300px) scale(1);transition-delay:0.18s;&.top{transform:translateY(300px) scale(1);}}&:nth-child(6){transform:translateY(-360px) scale(1);transition-delay:0.21s;&.top{transform:translateY(360px) scale(1);}}}"], StyledMainButton, StyledActionWrapper);
-  }
-
-  return null;
-});
-
-var Action = (function (_ref) {
-  var children = _ref.children,
-      rest = _objectWithoutProperties__default['default'](_ref, ["children"]);
-
-  return /*#__PURE__*/React__default['default'].createElement(StyledAction, rest, children);
-});
-
 function _defineProperty(obj, key, value) {
@@ -104,2 +69,40 @@ if (key in obj) {
 
+var StyledMainButton = styled__default['default'].button.withConfig({
+  displayName: "styled__StyledMainButton",
+  componentId: "ps9aer-0"
+})(["height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;&:focus{outline:none;}> *{transition:ease-in-out transform 0.2s;}"]);
+var StyledActionWrapper = styled__default['default'].li.withConfig({
+  displayName: "styled__StyledActionWrapper",
+  componentId: "ps9aer-1"
+})(["display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0;transition:ease-in-out transform 0.2s;> span{transition:ease-in-out opacity 0.2s;position:absolute;top:50%;transform:translateY(-50%);margin:0 8px;background:rgba(0,0,0,0.75);padding:4px 8px;border-radius:3px;color:white;font-size:13px;&.right{right:100%;}}&:nth-child(1){transform:translateY(-60px) scale(0);transition-delay:0.21s;&.top{transform:translateY(60px) scale(0);}}&:nth-child(2){transform:translateY(-120px) scale(0);transition-delay:0.18s;&.top{transform:translateY(120px) scale(0);}}&:nth-child(3){transform:translateY(-180px) scale(0);transition-delay:0.15s;&.top{transform:translateY(180px) scale(0);}}&:nth-child(4){transform:translateY(-240px) scale(0);transition-delay:0.12s;&.top{transform:translateY(240px) scale(0);}}&:nth-child(5){transform:translateY(-300px) scale(0);transition-delay:0.09s;&.top{transform:translateY(300px) scale(0);}}&:nth-child(6){transform:translateY(-360px) scale(0);transition-delay:0.03s;&.top{transform:translateY(360px) scale(0);}}"]);
+var StyledActions = styled__default['default'].li.withConfig({
+  displayName: "styled__StyledActions",
+  componentId: "ps9aer-2"
+})(["padding:25px;margin:-25px;*:last-child{margin-bottom:0;}"]);
+var StyledAction = styled__default['default'].button.withConfig({
+  displayName: "styled__StyledAction",
+  componentId: "ps9aer-3"
+})(["height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;&:focus{outline:none;}"]);
+var StyledFab = styled__default['default'].ul.withConfig({
+  displayName: "styled__StyledFab",
+  componentId: "ps9aer-4"
+})(["box-sizing:border-box;margin:25px;position:absolute;white-space:nowrap;z-index:9998;padding-left:0;list-style:none;", ""], function (_ref) {
+  var isOpen = _ref.isOpen;
+
+  if (isOpen) {
+    return styled.css(["", "{> *{transform-origin:center center;transform:rotate(135deg);transition:ease-in-out transform 0.2s;}> ul{list-style:none;margin:0;padding:0;}}", "{&:hover{}&:nth-child(1){transform:translateY(-60px) scale(1);transition-delay:0.03s;&.top{transform:translateY(60px) scale(1);}}&:nth-child(2){transform:translateY(-120px) scale(1);transition-delay:0.09s;&.top{transform:translateY(120px) scale(1);}}&:nth-child(3){transform:translateY(-180px) scale(1);transition-delay:0.12s;&.top{transform:translateY(180px) scale(1);}}&:nth-child(4){transform:translateY(-240px) scale(1);transition-delay:0.15s;&.top{transform:translateY(240px) scale(1);}}&:nth-child(5){transform:translateY(-300px) scale(1);transition-delay:0.18s;&.top{transform:translateY(300px) scale(1);}}&:nth-child(6){transform:translateY(-360px) scale(1);transition-delay:0.21s;&.top{transform:translateY(360px) scale(1);}}}"], StyledMainButton, StyledActionWrapper);
+  }
+
+  return null;
+});
+
+var Action = (function (_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties__default['default'](_ref, ["children"]);
+
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAction, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: children
+  }));
+});
+
 var MainButton = (function (_ref) {
@@ -109,3 +112,5 @@ var children = _ref.children,
 
-  return /*#__PURE__*/React__default['default'].createElement(StyledMainButton, rest, children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledMainButton, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: children
+  }));
 });
@@ -161,31 +166,39 @@
     return React__default['default'].Children.map(children, function (ch, i) {
-      return /*#__PURE__*/React__default['default'].createElement(StyledActionWrapper, {
-        className: "".concat('top' in position ? 'top' : '')
-      }, /*#__PURE__*/React__default['default'].cloneElement(ch, _objectSpread2(_objectSpread2({
-        'data-testid': "action-button-".concat(i),
-        'aria-label': ch.props.text || "Menu button ".concat(i + 1),
-        'aria-hidden': !isOpen
-      }, ch.props), {}, {
-        onClick: function onClick() {
-          return actionOnClick(ch.props.onClick);
-        }
-      })), ch.props.text && /*#__PURE__*/React__default['default'].createElement("span", {
-        className: 'right' in position ? 'right' : '',
-        "aria-hidden": !isOpen
-      }, ch.props.text));
+      return /*#__PURE__*/jsxRuntime.jsxs(StyledActionWrapper, {
+        className: "".concat('top' in position ? 'top' : ''),
+        children: [/*#__PURE__*/React__default['default'].cloneElement(ch, _objectSpread2(_objectSpread2({
+          'data-testid': "action-button-".concat(i),
+          'aria-label': ch.props.text || "Menu button ".concat(i + 1),
+          'aria-hidden': !isOpen
+        }, ch.props), {}, {
+          onClick: function onClick() {
+            return actionOnClick(ch.props.onClick);
+          }
+        })), ch.props.text && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: 'right' in position ? 'right' : '',
+          "aria-hidden": !isOpen,
+          children: ch.props.text
+        })]
+      });
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(StyledFab, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledFab, {
     onMouseEnter: enter,
     onMouseLeave: leave,
     isOpen: isOpen,
-    style: position
-  }, /*#__PURE__*/React__default['default'].createElement(StyledActions, null, /*#__PURE__*/React__default['default'].createElement(MainButton, {
-    onClick: toggle,
-    style: mainButtonStyles,
-    role: "button",
-    "aria-label": "Floating menu",
-    tabIndex: "0"
-  }, icon), /*#__PURE__*/React__default['default'].createElement("ul", null, rc())));
+    style: position,
+    children: /*#__PURE__*/jsxRuntime.jsxs(StyledActions, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(MainButton, {
+        onClick: toggle,
+        style: mainButtonStyles,
+        role: "button",
+        "aria-label": "Floating menu",
+        tabIndex: "0",
+        children: icon
+      }), /*#__PURE__*/jsxRuntime.jsx("ul", {
+        children: rc()
+      })]
+    })
+  });
 }
@@ -192,0 +205,0 @@

dist/uidu-fab.cjs.prod.js

@@ -6,2 +6,3 @@ 'use strict';
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -18,38 +19,2 @@ var styled = require('styled-components');
 
-var StyledMainButton = styled__default['default'].button.withConfig({
-  displayName: "styled__StyledMainButton",
-  componentId: "ps9aer-0"
-})(["height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;&:focus{outline:none;}> *{transition:ease-in-out transform 0.2s;}"]);
-var StyledActionWrapper = styled__default['default'].li.withConfig({
-  displayName: "styled__StyledActionWrapper",
-  componentId: "ps9aer-1"
-})(["display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0;transition:ease-in-out transform 0.2s;> span{transition:ease-in-out opacity 0.2s;position:absolute;top:50%;transform:translateY(-50%);margin:0 8px;background:rgba(0,0,0,0.75);padding:4px 8px;border-radius:3px;color:white;font-size:13px;&.right{right:100%;}}&:nth-child(1){transform:translateY(-60px) scale(0);transition-delay:0.21s;&.top{transform:translateY(60px) scale(0);}}&:nth-child(2){transform:translateY(-120px) scale(0);transition-delay:0.18s;&.top{transform:translateY(120px) scale(0);}}&:nth-child(3){transform:translateY(-180px) scale(0);transition-delay:0.15s;&.top{transform:translateY(180px) scale(0);}}&:nth-child(4){transform:translateY(-240px) scale(0);transition-delay:0.12s;&.top{transform:translateY(240px) scale(0);}}&:nth-child(5){transform:translateY(-300px) scale(0);transition-delay:0.09s;&.top{transform:translateY(300px) scale(0);}}&:nth-child(6){transform:translateY(-360px) scale(0);transition-delay:0.03s;&.top{transform:translateY(360px) scale(0);}}"]);
-var StyledActions = styled__default['default'].li.withConfig({
-  displayName: "styled__StyledActions",
-  componentId: "ps9aer-2"
-})(["padding:25px;margin:-25px;*:last-child{margin-bottom:0;}"]);
-var StyledAction = styled__default['default'].button.withConfig({
-  displayName: "styled__StyledAction",
-  componentId: "ps9aer-3"
-})(["height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;&:focus{outline:none;}"]);
-var StyledFab = styled__default['default'].ul.withConfig({
-  displayName: "styled__StyledFab",
-  componentId: "ps9aer-4"
-})(["box-sizing:border-box;margin:25px;position:absolute;white-space:nowrap;z-index:9998;padding-left:0;list-style:none;", ""], function (_ref) {
-  var isOpen = _ref.isOpen;
-
-  if (isOpen) {
-    return styled.css(["", "{> *{transform-origin:center center;transform:rotate(135deg);transition:ease-in-out transform 0.2s;}> ul{list-style:none;margin:0;padding:0;}}", "{&:hover{}&:nth-child(1){transform:translateY(-60px) scale(1);transition-delay:0.03s;&.top{transform:translateY(60px) scale(1);}}&:nth-child(2){transform:translateY(-120px) scale(1);transition-delay:0.09s;&.top{transform:translateY(120px) scale(1);}}&:nth-child(3){transform:translateY(-180px) scale(1);transition-delay:0.12s;&.top{transform:translateY(180px) scale(1);}}&:nth-child(4){transform:translateY(-240px) scale(1);transition-delay:0.15s;&.top{transform:translateY(240px) scale(1);}}&:nth-child(5){transform:translateY(-300px) scale(1);transition-delay:0.18s;&.top{transform:translateY(300px) scale(1);}}&:nth-child(6){transform:translateY(-360px) scale(1);transition-delay:0.21s;&.top{transform:translateY(360px) scale(1);}}}"], StyledMainButton, StyledActionWrapper);
-  }
-
-  return null;
-});
-
-var Action = (function (_ref) {
-  var children = _ref.children,
-      rest = _objectWithoutProperties__default['default'](_ref, ["children"]);
-
-  return /*#__PURE__*/React__default['default'].createElement(StyledAction, rest, children);
-});
-
 function _defineProperty(obj, key, value) {
@@ -104,2 +69,40 @@ if (key in obj) {
 
+var StyledMainButton = styled__default['default'].button.withConfig({
+  displayName: "styled__StyledMainButton",
+  componentId: "ps9aer-0"
+})(["height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;&:focus{outline:none;}> *{transition:ease-in-out transform 0.2s;}"]);
+var StyledActionWrapper = styled__default['default'].li.withConfig({
+  displayName: "styled__StyledActionWrapper",
+  componentId: "ps9aer-1"
+})(["display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0;transition:ease-in-out transform 0.2s;> span{transition:ease-in-out opacity 0.2s;position:absolute;top:50%;transform:translateY(-50%);margin:0 8px;background:rgba(0,0,0,0.75);padding:4px 8px;border-radius:3px;color:white;font-size:13px;&.right{right:100%;}}&:nth-child(1){transform:translateY(-60px) scale(0);transition-delay:0.21s;&.top{transform:translateY(60px) scale(0);}}&:nth-child(2){transform:translateY(-120px) scale(0);transition-delay:0.18s;&.top{transform:translateY(120px) scale(0);}}&:nth-child(3){transform:translateY(-180px) scale(0);transition-delay:0.15s;&.top{transform:translateY(180px) scale(0);}}&:nth-child(4){transform:translateY(-240px) scale(0);transition-delay:0.12s;&.top{transform:translateY(240px) scale(0);}}&:nth-child(5){transform:translateY(-300px) scale(0);transition-delay:0.09s;&.top{transform:translateY(300px) scale(0);}}&:nth-child(6){transform:translateY(-360px) scale(0);transition-delay:0.03s;&.top{transform:translateY(360px) scale(0);}}"]);
+var StyledActions = styled__default['default'].li.withConfig({
+  displayName: "styled__StyledActions",
+  componentId: "ps9aer-2"
+})(["padding:25px;margin:-25px;*:last-child{margin-bottom:0;}"]);
+var StyledAction = styled__default['default'].button.withConfig({
+  displayName: "styled__StyledAction",
+  componentId: "ps9aer-3"
+})(["height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;&:focus{outline:none;}"]);
+var StyledFab = styled__default['default'].ul.withConfig({
+  displayName: "styled__StyledFab",
+  componentId: "ps9aer-4"
+})(["box-sizing:border-box;margin:25px;position:absolute;white-space:nowrap;z-index:9998;padding-left:0;list-style:none;", ""], function (_ref) {
+  var isOpen = _ref.isOpen;
+
+  if (isOpen) {
+    return styled.css(["", "{> *{transform-origin:center center;transform:rotate(135deg);transition:ease-in-out transform 0.2s;}> ul{list-style:none;margin:0;padding:0;}}", "{&:hover{}&:nth-child(1){transform:translateY(-60px) scale(1);transition-delay:0.03s;&.top{transform:translateY(60px) scale(1);}}&:nth-child(2){transform:translateY(-120px) scale(1);transition-delay:0.09s;&.top{transform:translateY(120px) scale(1);}}&:nth-child(3){transform:translateY(-180px) scale(1);transition-delay:0.12s;&.top{transform:translateY(180px) scale(1);}}&:nth-child(4){transform:translateY(-240px) scale(1);transition-delay:0.15s;&.top{transform:translateY(240px) scale(1);}}&:nth-child(5){transform:translateY(-300px) scale(1);transition-delay:0.18s;&.top{transform:translateY(300px) scale(1);}}&:nth-child(6){transform:translateY(-360px) scale(1);transition-delay:0.21s;&.top{transform:translateY(360px) scale(1);}}}"], StyledMainButton, StyledActionWrapper);
+  }
+
+  return null;
+});
+
+var Action = (function (_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties__default['default'](_ref, ["children"]);
+
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAction, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: children
+  }));
+});
+
 var MainButton = (function (_ref) {
@@ -109,3 +112,5 @@ var children = _ref.children,
 
-  return /*#__PURE__*/React__default['default'].createElement(StyledMainButton, rest, children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledMainButton, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: children
+  }));
 });
@@ -161,31 +166,39 @@
     return React__default['default'].Children.map(children, function (ch, i) {
-      return /*#__PURE__*/React__default['default'].createElement(StyledActionWrapper, {
-        className: "".concat('top' in position ? 'top' : '')
-      }, /*#__PURE__*/React__default['default'].cloneElement(ch, _objectSpread2(_objectSpread2({
-        'data-testid': "action-button-".concat(i),
-        'aria-label': ch.props.text || "Menu button ".concat(i + 1),
-        'aria-hidden': !isOpen
-      }, ch.props), {}, {
-        onClick: function onClick() {
-          return actionOnClick(ch.props.onClick);
-        }
-      })), ch.props.text && /*#__PURE__*/React__default['default'].createElement("span", {
-        className: 'right' in position ? 'right' : '',
-        "aria-hidden": !isOpen
-      }, ch.props.text));
+      return /*#__PURE__*/jsxRuntime.jsxs(StyledActionWrapper, {
+        className: "".concat('top' in position ? 'top' : ''),
+        children: [/*#__PURE__*/React__default['default'].cloneElement(ch, _objectSpread2(_objectSpread2({
+          'data-testid': "action-button-".concat(i),
+          'aria-label': ch.props.text || "Menu button ".concat(i + 1),
+          'aria-hidden': !isOpen
+        }, ch.props), {}, {
+          onClick: function onClick() {
+            return actionOnClick(ch.props.onClick);
+          }
+        })), ch.props.text && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: 'right' in position ? 'right' : '',
+          "aria-hidden": !isOpen,
+          children: ch.props.text
+        })]
+      });
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(StyledFab, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledFab, {
     onMouseEnter: enter,
     onMouseLeave: leave,
     isOpen: isOpen,
-    style: position
-  }, /*#__PURE__*/React__default['default'].createElement(StyledActions, null, /*#__PURE__*/React__default['default'].createElement(MainButton, {
-    onClick: toggle,
-    style: mainButtonStyles,
-    role: "button",
-    "aria-label": "Floating menu",
-    tabIndex: "0"
-  }, icon), /*#__PURE__*/React__default['default'].createElement("ul", null, rc())));
+    style: position,
+    children: /*#__PURE__*/jsxRuntime.jsxs(StyledActions, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(MainButton, {
+        onClick: toggle,
+        style: mainButtonStyles,
+        role: "button",
+        "aria-label": "Floating menu",
+        tabIndex: "0",
+        children: icon
+      }), /*#__PURE__*/jsxRuntime.jsx("ul", {
+        children: rc()
+      })]
+    })
+  });
 }
@@ -192,0 +205,0 @@

dist/uidu-fab.esm.js

 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState } from 'react';
@@ -6,38 +7,2 @@ import styled, { css } from 'styled-components';
 
-var StyledMainButton = styled.button.withConfig({
-  displayName: "styled__StyledMainButton",
-  componentId: "ps9aer-0"
-})(["height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;&:focus{outline:none;}> *{transition:ease-in-out transform 0.2s;}"]);
-var StyledActionWrapper = styled.li.withConfig({
-  displayName: "styled__StyledActionWrapper",
-  componentId: "ps9aer-1"
-})(["display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0;transition:ease-in-out transform 0.2s;> span{transition:ease-in-out opacity 0.2s;position:absolute;top:50%;transform:translateY(-50%);margin:0 8px;background:rgba(0,0,0,0.75);padding:4px 8px;border-radius:3px;color:white;font-size:13px;&.right{right:100%;}}&:nth-child(1){transform:translateY(-60px) scale(0);transition-delay:0.21s;&.top{transform:translateY(60px) scale(0);}}&:nth-child(2){transform:translateY(-120px) scale(0);transition-delay:0.18s;&.top{transform:translateY(120px) scale(0);}}&:nth-child(3){transform:translateY(-180px) scale(0);transition-delay:0.15s;&.top{transform:translateY(180px) scale(0);}}&:nth-child(4){transform:translateY(-240px) scale(0);transition-delay:0.12s;&.top{transform:translateY(240px) scale(0);}}&:nth-child(5){transform:translateY(-300px) scale(0);transition-delay:0.09s;&.top{transform:translateY(300px) scale(0);}}&:nth-child(6){transform:translateY(-360px) scale(0);transition-delay:0.03s;&.top{transform:translateY(360px) scale(0);}}"]);
-var StyledActions = styled.li.withConfig({
-  displayName: "styled__StyledActions",
-  componentId: "ps9aer-2"
-})(["padding:25px;margin:-25px;*:last-child{margin-bottom:0;}"]);
-var StyledAction = styled.button.withConfig({
-  displayName: "styled__StyledAction",
-  componentId: "ps9aer-3"
-})(["height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;&:focus{outline:none;}"]);
-var StyledFab = styled.ul.withConfig({
-  displayName: "styled__StyledFab",
-  componentId: "ps9aer-4"
-})(["box-sizing:border-box;margin:25px;position:absolute;white-space:nowrap;z-index:9998;padding-left:0;list-style:none;", ""], function (_ref) {
-  var isOpen = _ref.isOpen;
-
-  if (isOpen) {
-    return css(["", "{> *{transform-origin:center center;transform:rotate(135deg);transition:ease-in-out transform 0.2s;}> ul{list-style:none;margin:0;padding:0;}}", "{&:hover{}&:nth-child(1){transform:translateY(-60px) scale(1);transition-delay:0.03s;&.top{transform:translateY(60px) scale(1);}}&:nth-child(2){transform:translateY(-120px) scale(1);transition-delay:0.09s;&.top{transform:translateY(120px) scale(1);}}&:nth-child(3){transform:translateY(-180px) scale(1);transition-delay:0.12s;&.top{transform:translateY(180px) scale(1);}}&:nth-child(4){transform:translateY(-240px) scale(1);transition-delay:0.15s;&.top{transform:translateY(240px) scale(1);}}&:nth-child(5){transform:translateY(-300px) scale(1);transition-delay:0.18s;&.top{transform:translateY(300px) scale(1);}}&:nth-child(6){transform:translateY(-360px) scale(1);transition-delay:0.21s;&.top{transform:translateY(360px) scale(1);}}}"], StyledMainButton, StyledActionWrapper);
-  }
-
-  return null;
-});
-
-var Action = (function (_ref) {
-  var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["children"]);
-
-  return /*#__PURE__*/React.createElement(StyledAction, rest, children);
-});
-
 function _defineProperty(obj, key, value) {
@@ -92,2 +57,40 @@ if (key in obj) {
 
+var StyledMainButton = styled.button.withConfig({
+  displayName: "styled__StyledMainButton",
+  componentId: "ps9aer-0"
+})(["height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;&:focus{outline:none;}> *{transition:ease-in-out transform 0.2s;}"]);
+var StyledActionWrapper = styled.li.withConfig({
+  displayName: "styled__StyledActionWrapper",
+  componentId: "ps9aer-1"
+})(["display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0;transition:ease-in-out transform 0.2s;> span{transition:ease-in-out opacity 0.2s;position:absolute;top:50%;transform:translateY(-50%);margin:0 8px;background:rgba(0,0,0,0.75);padding:4px 8px;border-radius:3px;color:white;font-size:13px;&.right{right:100%;}}&:nth-child(1){transform:translateY(-60px) scale(0);transition-delay:0.21s;&.top{transform:translateY(60px) scale(0);}}&:nth-child(2){transform:translateY(-120px) scale(0);transition-delay:0.18s;&.top{transform:translateY(120px) scale(0);}}&:nth-child(3){transform:translateY(-180px) scale(0);transition-delay:0.15s;&.top{transform:translateY(180px) scale(0);}}&:nth-child(4){transform:translateY(-240px) scale(0);transition-delay:0.12s;&.top{transform:translateY(240px) scale(0);}}&:nth-child(5){transform:translateY(-300px) scale(0);transition-delay:0.09s;&.top{transform:translateY(300px) scale(0);}}&:nth-child(6){transform:translateY(-360px) scale(0);transition-delay:0.03s;&.top{transform:translateY(360px) scale(0);}}"]);
+var StyledActions = styled.li.withConfig({
+  displayName: "styled__StyledActions",
+  componentId: "ps9aer-2"
+})(["padding:25px;margin:-25px;*:last-child{margin-bottom:0;}"]);
+var StyledAction = styled.button.withConfig({
+  displayName: "styled__StyledAction",
+  componentId: "ps9aer-3"
+})(["height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;&:focus{outline:none;}"]);
+var StyledFab = styled.ul.withConfig({
+  displayName: "styled__StyledFab",
+  componentId: "ps9aer-4"
+})(["box-sizing:border-box;margin:25px;position:absolute;white-space:nowrap;z-index:9998;padding-left:0;list-style:none;", ""], function (_ref) {
+  var isOpen = _ref.isOpen;
+
+  if (isOpen) {
+    return css(["", "{> *{transform-origin:center center;transform:rotate(135deg);transition:ease-in-out transform 0.2s;}> ul{list-style:none;margin:0;padding:0;}}", "{&:hover{}&:nth-child(1){transform:translateY(-60px) scale(1);transition-delay:0.03s;&.top{transform:translateY(60px) scale(1);}}&:nth-child(2){transform:translateY(-120px) scale(1);transition-delay:0.09s;&.top{transform:translateY(120px) scale(1);}}&:nth-child(3){transform:translateY(-180px) scale(1);transition-delay:0.12s;&.top{transform:translateY(180px) scale(1);}}&:nth-child(4){transform:translateY(-240px) scale(1);transition-delay:0.15s;&.top{transform:translateY(240px) scale(1);}}&:nth-child(5){transform:translateY(-300px) scale(1);transition-delay:0.18s;&.top{transform:translateY(300px) scale(1);}}&:nth-child(6){transform:translateY(-360px) scale(1);transition-delay:0.21s;&.top{transform:translateY(360px) scale(1);}}}"], StyledMainButton, StyledActionWrapper);
+  }
+
+  return null;
+});
+
+var Action = (function (_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["children"]);
+
+  return /*#__PURE__*/jsx(StyledAction, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: children
+  }));
+});
+
 var MainButton = (function (_ref) {
@@ -97,3 +100,5 @@ var children = _ref.children,
 
-  return /*#__PURE__*/React.createElement(StyledMainButton, rest, children);
+  return /*#__PURE__*/jsx(StyledMainButton, _objectSpread2(_objectSpread2({}, rest), {}, {
+    children: children
+  }));
 });
@@ -149,33 +154,41 @@
     return React.Children.map(children, function (ch, i) {
-      return /*#__PURE__*/React.createElement(StyledActionWrapper, {
-        className: "".concat('top' in position ? 'top' : '')
-      }, /*#__PURE__*/React.cloneElement(ch, _objectSpread2(_objectSpread2({
-        'data-testid': "action-button-".concat(i),
-        'aria-label': ch.props.text || "Menu button ".concat(i + 1),
-        'aria-hidden': !isOpen
-      }, ch.props), {}, {
-        onClick: function onClick() {
-          return actionOnClick(ch.props.onClick);
-        }
-      })), ch.props.text && /*#__PURE__*/React.createElement("span", {
-        className: 'right' in position ? 'right' : '',
-        "aria-hidden": !isOpen
-      }, ch.props.text));
+      return /*#__PURE__*/jsxs(StyledActionWrapper, {
+        className: "".concat('top' in position ? 'top' : ''),
+        children: [/*#__PURE__*/React.cloneElement(ch, _objectSpread2(_objectSpread2({
+          'data-testid': "action-button-".concat(i),
+          'aria-label': ch.props.text || "Menu button ".concat(i + 1),
+          'aria-hidden': !isOpen
+        }, ch.props), {}, {
+          onClick: function onClick() {
+            return actionOnClick(ch.props.onClick);
+          }
+        })), ch.props.text && /*#__PURE__*/jsx("span", {
+          className: 'right' in position ? 'right' : '',
+          "aria-hidden": !isOpen,
+          children: ch.props.text
+        })]
+      });
     });
   };
 
-  return /*#__PURE__*/React.createElement(StyledFab, {
+  return /*#__PURE__*/jsx(StyledFab, {
     onMouseEnter: enter,
     onMouseLeave: leave,
     isOpen: isOpen,
-    style: position
-  }, /*#__PURE__*/React.createElement(StyledActions, null, /*#__PURE__*/React.createElement(MainButton, {
-    onClick: toggle,
-    style: mainButtonStyles,
-    role: "button",
-    "aria-label": "Floating menu",
-    tabIndex: "0"
-  }, icon), /*#__PURE__*/React.createElement("ul", null, rc())));
+    style: position,
+    children: /*#__PURE__*/jsxs(StyledActions, {
+      children: [/*#__PURE__*/jsx(MainButton, {
+        onClick: toggle,
+        style: mainButtonStyles,
+        role: "button",
+        "aria-label": "Floating menu",
+        tabIndex: "0",
+        children: icon
+      }), /*#__PURE__*/jsx("ul", {
+        children: rc()
+      })]
+    })
+  });
 }
 
 export { Action, Fab };

package.json

 {
   "name": "@uidu/fab",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": false,
@@ -16,8 +16,8 @@ "description": "Floating action buttons",
     "react-feather": "^2.0.9",
-    "styled-components": "^5.2.0",
+    "styled-components": "^5.2.1",
     "tslib": "^2.0.1"
   },
   "devDependencies": {
-    "@uidu/docs": "^0.3.0"
+    "@uidu/docs": "^0.3.1"
   }
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31856

increased by1.77%

Lines of code

574

increased by7.29%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updatedstyled-components@^5.2.1