@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -1,51 +1,29 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _focus = require("@react-aria/focus");
-
-var _collections = require("@react-stately/collections");
-
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
 var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
-
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
-
 var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
-
 var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
-
-var _ = require("../");
-
 var _hooks = require("../hooks");
-
+var _index = require("../index");
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var _default = {
   title: 'Recipes/List with Panel'
 };
@@ -173,8 +151,7 @@ var sx = {
   },
   listElement: {
     wrapper: {
-      minHeight: '60px',
-      pl: '14px'
+      minHeight: '60px'
     },
     iconWrapper: {
       mr: 'auto',
@@ -188,7 +165,7 @@ var sx = {
     avatar: {
       width: '25px',
       height: '25px',
-      mr: '14px'
+      mr: 'md'
     },
     title: {
       alignSelf: 'start',
@@ -201,142 +178,77 @@ var sx = {
       alignSelf: 'start'
     },
     menuWrapper: {
-      alignSelf: 'center',
-      pr: '4px'
+      alignSelf: 'center'
     }
   }
 };
-
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
-      isHoverable = _ref.isHoverable,
-      onClosePanel = _ref.onClosePanel;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-
-  var _useState3 = (0, _react.useState)({}),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      mousePosition = _useState4[0],
-      setMousePosition = _useState4[1];
-
-  var listItemRef = (0, _react.useRef)();
-
-  var handleMenuHoverEnd = function handleMenuHoverEnd() {
-    var currentPositionX = mousePosition.currentPositionX,
-        currentPositionY = mousePosition.currentPositionY;
-
-    var _listItemRef$current$ = listItemRef.current.getBoundingClientRect(),
-        height = _listItemRef$current$.height,
-        right = _listItemRef$current$.right,
-        top = _listItemRef$current$.top;
-
-    var hasMovedBackToRow = currentPositionY < top + height && currentPositionX < right;
-
-    if (hasMovedBackToRow) {
-      setIsHovered(true);
-      return;
-    }
-
-    setIsHovered(false);
-  };
-
-  var handleMouseMove = function handleMouseMove(e) {
-    setMousePosition({
-      currentPositionX: e.clientX,
-      currentPositionY: e.clientY
-    });
-  };
-
-  var handleHoveEnd = function handleHoveEnd() {
-    setIsHovered(false);
-  };
-
-  var handleHoveStart = function handleHoveStart() {
-    setIsHovered(true);
-  };
-
-  return (0, _react2.jsx)(_.ListItem, {
-    isHovered: isHoverable && isHovered,
+    onClosePanel = _ref.onClosePanel;
+  return (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    onHoverEnd: handleHoveEnd,
-    onHoverStart: handleHoveStart,
-    onMouseMove: handleMouseMove,
-    ref: listItemRef,
     sx: sx.listElement.wrapper
-  }, (0, _react2.jsx)(_.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.listElement.iconWrapper
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: item.avatar,
     size: "md",
     sx: sx.listElement.icon
-  }), (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Text, {
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "bodyStrong",
     sx: sx.listElement.title
-  }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_.Text, {
+  }, item.lastName, ",", ' ', item.firstName), (0, _react2.jsx)(_index.Text, {
     variant: "subtitle",
     sx: sx.listElement.subtitle
-  }, item.email))), (0, _react2.jsx)(_.Box, {
+  }, item.email))), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.listElement.menuWrapper
-  }, (0, _react2.jsx)(_.SwitchField, {
+  }, (0, _react2.jsx)(_index.SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
     alignSelf: "center",
     mr: "sm"
-  }), (0, _react2.jsx)(_.PopoverMenu, null, (0, _react2.jsx)(_.IconButton, {
+  }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "more icon button",
     mr: onClosePanel ? 'sm' : 0
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _MoreVertIcon["default"],
     size: "md"
-  })), (0, _react2.jsx)(_.Menu, {
-    onAction: handleHoveEnd,
-    onHoverEnd: handleMenuHoverEnd,
-    onHoverStart: handleHoveStart
-  }, (0, _react2.jsx)(_collections.Item, {
+  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_reactStately.Item, {
     key: "enable"
-  }, "Enable user"), (0, _react2.jsx)(_collections.Item, {
+  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
     key: "disable"
-  }, "Disable user"), (0, _react2.jsx)(_collections.Item, {
+  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
     key: "delete"
-  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_.IconButton, {
+  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "close icon button",
     onPress: onClosePanel
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     size: "sm",
     icon: _CloseIcon["default"]
   }))));
 };
-
 var Default = function Default() {
-  var _useState5 = (0, _react.useState)(),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      selectedItemId = _useState6[0],
-      setSelectedItemId = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      selectedKeys = _useState8[0],
-      setSelectedKeys = _useState8[1];
-
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selectedItemId = _useState2[0],
+    setSelectedItemId = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
-      panelState = _useOverlayPanelState.state,
-      onPanelClose = _useOverlayPanelState.onClose;
-
+    panelState = _useOverlayPanelState.state,
+    onPanelClose = _useOverlayPanelState.onClose;
   var panelTriggerRef = (0, _react.useRef)();
   var heading = 'Users';
   var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
-
   var closePanelHandler = function closePanelHandler() {
     onPanelClose(panelState, panelTriggerRef);
     setSelectedItemId(-1);
     setSelectedKeys([]);
   };
-
   var selectItemHandler = function selectItemHandler(e) {
     if (e.size) {
       setSelectedItemId((0, _findIndex["default"])(items).call(items, function (item) {
@@ -348,86 +260,82 @@ var Default = function Default() {
       closePanelHandler();
     }
   };
-
-  var title = (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Box, {
+  return (0, _react2.jsx)(_index.Box, {
+    sx: sx.wrapper
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
     align: "center",
     isRow: true,
     mb: "xs",
     role: "heading",
     "aria-level": "1"
-  }, (0, _react2.jsx)(_.Text, {
+  }, (0, _react2.jsx)(_index.Text, {
     fontSize: "xx",
     fontWeight: 3,
     fontColor: "text.primary"
-  }, heading), (0, _react2.jsx)(_.IconButton, {
+  }, heading), (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "icon button",
     ml: "sm",
     variant: "inverted"
-  }, (0, _react2.jsx)(_.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     size: "sm"
-  }))), (0, _react2.jsx)(_.Text, {
+  }))), (0, _react2.jsx)(_index.Text, {
     fontSize: "sm",
     color: "text.secondary",
     fontWeight: 0,
     width: "800px"
-  }, description, (0, _react2.jsx)(_.Link, {
+  }, description, (0, _react2.jsx)(_index.Link, {
     href: "https://uilibrary.ping-eng.com/",
     sx: {
       fontSize: '13px'
     }
-  }, " Learn more")));
-  return (0, _react2.jsx)(_.Box, {
-    sx: sx.wrapper
-  }, title, (0, _react2.jsx)(_.SearchField, {
+  }, " Learn more"))), (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
     mb: "lg",
     mt: "lg",
     width: "400px",
     placeholder: "Search",
     "aria-label": "search"
-  }), (0, _react2.jsx)(_.Separator, {
+  }), (0, _react2.jsx)(_index.Separator, {
     margin: 0
-  }), (0, _react2.jsx)(_.ListView, {
+  }), (0, _react2.jsx)(_index.ListView, {
     items: items,
     onSelectionChange: selectItemHandler,
     ref: panelTriggerRef,
-    selectedKeys: selectedKeys,
-    isHoverable: false
+    selectedKeys: selectedKeys
   }, function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: item.hasSeparator,
+      hasSeparator: true,
       listItemProps: {
-        minHeight: 75,
-        padding: 1
+        pl: 15,
+        minHeight: 75
       }
     }, (0, _react2.jsx)(ListElement, {
-      isHoverable: true,
       item: item
     }));
-  }), (0, _react2.jsx)(_.OverlayPanel, {
+  }), (0, _react2.jsx)(_index.OverlayPanel, {
     isOpen: panelState.isOpen,
     state: panelState,
     triggerRef: panelTriggerRef,
     p: 0,
     size: "large"
-  }, panelState.isOpen && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_focus.FocusScope, {
+  }, panelState.isOpen && (0, _react2.jsx)(_reactAria.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, (0, _react2.jsx)(_.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     sx: sx.listElementWrapper
   }, (0, _react2.jsx)(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
-  })), (0, _react2.jsx)(_.Separator, {
+  })), (0, _react2.jsx)(_index.Separator, {
     margin: 0,
     sx: sx.separator
-  }), (0, _react2.jsx)(_.Box, {
+  }), (0, _react2.jsx)(_index.Box, {
     sx: sx.tabsWrapper
-  }, (0, _react2.jsx)(_.Tabs, {
+  }, (0, _react2.jsx)(_index.Tabs, {
     tabListProps: {
       justifyContent: 'center'
     },
@@ -436,43 +344,42 @@ var Default = function Default() {
         position: 'relative'
       }
     }
-  }, (0, _react2.jsx)(_.Tab, {
+  }, (0, _react2.jsx)(_index.Tab, {
     title: "Profile"
-  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.IconButton, {
+  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
     variant: "inverted",
     "aria-label": "pencil icon button",
     sx: sx.iconButton
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20
-  })), (0, _react2.jsx)(_.Text, {
+  })), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Full Name"), (0, _react2.jsx)(_.Text, {
+  }, "Full Name"), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_.Text, {
+  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "First Name"), (0, _react2.jsx)(_.Text, {
+  }, "First Name"), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName), (0, _react2.jsx)(_.Text, {
+  }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Last Name"), (0, _react2.jsx)(_.Text, {
+  }, "Last Name"), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].lastName), (0, _react2.jsx)(_.Text, {
+  }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Email"), (0, _react2.jsx)(_.Text, {
+  }, "Email"), (0, _react2.jsx)(_index.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].email))), (0, _react2.jsx)(_.Tab, {
+  }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
     title: "Group Memberships"
-  }, (0, _react2.jsx)(_.Text, null, "Group Memberships")), (0, _react2.jsx)(_.Tab, {
+  }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
     title: "Account Info"
-  }, (0, _react2.jsx)(_.Text, null, "Account Info"))))))));
+  }, (0, _react2.jsx)(_index.Text, null, "Account Info")))))));
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/LogoTabs.stories.js

@@ -1,64 +1,37 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.LogoTabs = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _ShuffleVariantIcon = _interopRequireDefault(require("mdi-react/ShuffleVariantIcon"));
-
 var _FilterIcon = _interopRequireDefault(require("mdi-react/FilterIcon"));
-
+var _ShuffleVariantIcon = _interopRequireDefault(require("mdi-react/ShuffleVariantIcon"));
+var _Tabs = require("../components/Tabs/Tabs.style");
 var _index = require("../index");
-
-var _tabs = require("../styles/variants/tabs");
-
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _default = {
   title: 'Recipes/Logo Tabs'
 };
 exports["default"] = _default;
-
 var P14CLogo = function P14CLogo(props) {
   return (0, _react2.jsx)("svg", (0, _extends2["default"])({
     id: "Layer_1",
@@ -88,7 +61,6 @@ var P14CLogo = function P14CLogo(props) {
     d: "M73.85,9h-.06a5.52,5.52,0,0,0,0,11H93.1a6.9,6.9,0,1,0,0-13.79h0A10,10,0,0,0,73.85,9Z"
   }));
 };
-
 var GoogleLogo = function GoogleLogo(props) {
   return (0, _react2.jsx)("svg", (0, _extends2["default"])({
     x: "0px",
@@ -116,7 +88,6 @@ var GoogleLogo = function GoogleLogo(props) {
     d: "M50.9,23.6c8.1,0,13.5,3.5,16.6,6.4l12.1-11.8C72.2,11.3,62.5,7,50.9,7c-16.8,0-31.3,9.6-38.4,23.7l13.9,10.8 C29.9,31.1,39.5,23.6,50.9,23.6"
   })));
 };
-
 var sx = {
   container: {
     display: 'inline-flex !important',
@@ -136,7 +107,7 @@ var sx = {
       justifyContent: 'space-between'
     }
   },
-  tabStyling: _objectSpread(_objectSpread({}, _tabs.tab), {}, {
+  tabStyling: _objectSpread(_objectSpread({}, _Tabs.tab), {}, {
     alignSelf: 'center',
     '& > svg': {
       borderWidth: 1,
@@ -166,18 +137,15 @@ var sx = {
     }
   })
 };
-
 var LogoTabs = function LogoTabs() {
   var _useState = (0, _react.useState)('tab1'),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      currentTab = _useState2[0],
-      setCurrentTab = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentTab = _useState2[0],
+    setCurrentTab = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      showMiddleTabs = _useState4[0],
-      setShowMiddleTabs = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    showMiddleTabs = _useState4[0],
+    setShowMiddleTabs = _useState4[1];
   return (0, _react2.jsx)(_index.Box, {
     sx: sx.container
   }, (0, _react2.jsx)(_index.Separator, {
@@ -240,5 +208,4 @@ var LogoTabs = function LogoTabs() {
     sx: sx.tabStyling
   }, (0, _react2.jsx)(_index.Text, null, "This is content for the target tab"))));
 };
-
 exports.LogoTabs = LogoTabs;

package/lib/cjs/recipes/MaskedValue.stories.js

@@ -1,41 +1,24 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _repeat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/repeat"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _EyeOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOutlineIcon"));
-
 var _EyeOffOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOffOutlineIcon"));
-
-var _index = require("../index");
-
+var _EyeOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOutlineIcon"));
 var _hooks = require("../hooks");
-
+var _index = require("../index");
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var _default = {
   title: 'Recipes/Masked Values',
   argTypes: {
@@ -66,32 +49,38 @@ var sx = {
     width: 'fit-content',
     marginLeft: 'sm',
     alignSelf: 'auto'
+  },
+  maskedItem: {
+    color: 'black',
+    fontSize: '16px',
+    width: 252,
+    wordBreak: 'break-all',
+    '&.is-masked': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      fontWeight: 3
+    }
   }
 };
-
 var Default = function Default(_ref) {
   var _context;
-
   var dataTitle = _ref.dataTitle,
-      secretData = _ref.secretData;
-
+    secretData = _ref.secretData;
   var _useState = (0, _react.useState)(true),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isMasked = _useState2[0],
-      setIsMasked = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isMasked = _useState2[0],
+    setIsMasked = _useState2[1];
   var _useStatusClasses = (0, _hooks.useStatusClasses)(null, {
-    isMasked: isMasked
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isMasked: isMasked
+    }),
+    classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "label"
   }, dataTitle), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "maskedValue",
+    sx: sx.maskedItem,
     className: classNames
   }, isMasked ? (0, _repeat["default"])(_context = '•').call(_context, 99) : secretData), (0, _react2.jsx)(_index.IconButton, {
     "aria-label": isMasked ? 'Show content' : 'Hide content',
@@ -104,5 +93,4 @@ var Default = function Default(_ref) {
     size: "sm"
   }))));
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/NeutralInput.stories.js

@@ -1,21 +1,14 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _CheckboxField = _interopRequireDefault(require("../components/CheckboxField"));
-
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Recipes/Neutral Checkbox Field'
 };
@@ -25,7 +18,6 @@ var sx = {
     color: 'neutral.10'
   }
 };
-
 var Default = function Default() {
   return (0, _react2.jsx)(_CheckboxField["default"], {
     controlProps: {
@@ -34,5 +26,4 @@ var Default = function Default() {
     label: "Click me"
   });
 };
-
 exports.Default = Default;