@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/recipes/LinkedListView.stories.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useState } from 'react';
-import { Item } from '@react-stately/collections';
 import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
-import { ListView, Text, Box, Icon, IconButton, Chip, Separator, OverlayProvider, PopoverMenu, Menu } from '../index';
+import { Badge, Box, Icon, IconButton, Item, ListView, Menu, OverlayProvider, PopoverMenu, Separator, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/LinkedListView',
@@ -61,22 +61,22 @@ var testData = [{
   name: 'Policy5',
   policyId: 'asdf23zaa-124123asdf',
   id: '3'
-}]; // IMPORTANT PLEASE READ
+}];
+
+// IMPORTANT PLEASE READ
 // in order for the list portion of this recipe to function correctly,
 // the array of objects that will be used to create
 // the production and staging rows, will need to be flat and sorted.
 // I.e. the staging rows will need to immediately follow the prod row that they correspond to.
 // This flat, sorted array will then be passed into the listview component as the items prop.
 // You may not need these functions if you are able to change the data shape on the back end
-// (which is reccomended for performance reasons)
+// (which is recommended for performance reasons)
 
 var flattenArray = function flattenArray(array) {
   var newArray = array;
-
   _forEachInstanceProperty(newArray).call(newArray, function (item) {
     if (item.childrenObjects) {
       var _context;
-
       _forEachInstanceProperty(_context = item.childrenObjects).call(_context, function (obj) {
         var newObj = obj;
         newObj.parentId = item.id;
@@ -84,40 +84,31 @@ var flattenArray = function flattenArray(array) {
       });
     }
   });
-
   return newArray;
 };
-
 var testSort = function testSort(array) {
   var newArray = array;
-
   _forEachInstanceProperty(newArray).call(newArray, function (item, i) {
     if (item.parentId) {
       var thisindex = _findIndexInstanceProperty(newArray).call(newArray, function (object) {
         return object.id === item.parentId;
       });
-
       var element = _spliceInstanceProperty(newArray).call(newArray, i, 1)[0];
-
       _spliceInstanceProperty(newArray).call(newArray, thisindex + 1, 0, element);
     }
   });
-
   return newArray;
 };
-
 var unsorted = flattenArray(testData);
 var sorted = testSort(unsorted);
 export var Default = function Default(_ref) {
   var _context2;
-
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   var _useState = useState(_concatInstanceProperty(_context2 = []).call(_context2, sorted)),
-      _useState2 = _slicedToArray(_useState, 1),
-      theseItems = _useState2[0]; // svg of the bottom portion of the bracket, the portion with the L shaped hook.
-
+    _useState2 = _slicedToArray(_useState, 1),
+    theseItems = _useState2[0];
 
+  // svg of the bottom portion of the bracket, the portion with the L shaped hook.
   var BottomBracket = function BottomBracket() {
     var color = '#CACED3';
     return ___EmotionJSX(Box, {
@@ -169,9 +160,9 @@ export var Default = function Default(_ref) {
       fill: "white",
       transform: "translate(-280 -419)"
     }))))));
-  }; // the top portion of the bracket svg, this is basically just a straight vertical line.
-
+  };
 
+  // the top portion of the bracket svg, this is basically just a straight vertical line.
   var TopBracket = function TopBracket() {
     var color = '#CACED3';
     return ___EmotionJSX(Box, {
@@ -201,9 +192,9 @@ export var Default = function Default(_ref) {
       stroke: color,
       fill: "none"
     }))));
-  }; // the vector shield and key icon.
-
+  };
 
+  // the vector shield and key icon.
   var ShieldVector = function ShieldVector(props) {
     return ___EmotionJSX("svg", _extends({
       width: "19",
@@ -213,9 +204,9 @@ export var Default = function Default(_ref) {
     }, props), ___EmotionJSX("path", {
       d: "M9.5 7.33342C9.77627 7.33342 10.0412 7.44316 10.2366 7.63851C10.4319 7.83386 10.5417 8.09881 10.5417 8.37508C10.5417 8.65135 10.4319 8.9163 10.2366 9.11165C10.0412 9.307 9.77627 9.41675 9.5 9.41675C9.22373 9.41675 8.95878 9.307 8.76343 9.11165C8.56808 8.9163 8.45833 8.65135 8.45833 8.37508C8.45833 8.09881 8.56808 7.83386 8.76343 7.63851C8.95878 7.44316 9.22373 7.33342 9.5 7.33342ZM18.875 10.4584C18.875 16.2397 14.875 21.6459 9.5 22.9584C4.125 21.6459 0.125 16.2397 0.125 10.4584V4.20842L9.5 0.041748L18.875 4.20842V10.4584ZM9.5 5.25008C8.6712 5.25008 7.87634 5.57932 7.29029 6.16537C6.70424 6.75142 6.375 7.54628 6.375 8.37508C6.375 9.73967 7.23958 10.8959 8.45833 11.323V17.7501H10.5417V15.6667H12.625V13.5834H10.5417V11.323C11.7604 10.8959 12.625 9.73967 12.625 8.37508C12.625 7.54628 12.2958 6.75142 11.7097 6.16537C11.1237 5.57932 10.3288 5.25008 9.5 5.25008Z"
     }));
-  }; // reusable piece of code that handles the iconbutton and popover on the right side of the rows
-
+  };
 
+  // reusable piece of code that handles the iconbutton and popover on the right side of the rows
   var IconWithPopover = function IconWithPopover() {
     return ___EmotionJSX(PopoverMenu, {
       direction: "left"
@@ -247,11 +238,11 @@ export var Default = function Default(_ref) {
     }, ___EmotionJSX(Text, {
       color: "critical.bright"
     }, "Delete"))));
-  }; // made these separate components because staging and production both use them.
-
+  };
 
-  var DefaultChip = function DefaultChip() {
-    return ___EmotionJSX(Chip, {
+  // made these separate components because staging and production both use them.
+  var DefaultBadge = function DefaultBadge() {
+    return ___EmotionJSX(Badge, {
       label: "Default",
       bg: "active",
       sx: {
@@ -262,10 +253,9 @@ export var Default = function Default(_ref) {
       }
     });
   };
-
-  var ExprirationChip = function ExprirationChip(props) {
+  var ExprirationBadge = function ExprirationBadge(props) {
     var expirationText = props.expirationText,
-        chipText = props.chipText;
+      chipText = props.chipText;
     return ___EmotionJSX(Box, {
       sx: !chipText && {
         paddingLeft: '72px'
@@ -273,7 +263,7 @@ export var Default = function Default(_ref) {
       flexGrow: 1,
       alignItems: "center",
       alignSelf: "center"
-    }, ___EmotionJSX(Chip, {
+    }, ___EmotionJSX(Badge, {
       bg: "white",
       sx: {
         border: 'solid 1px',
@@ -285,14 +275,14 @@ export var Default = function Default(_ref) {
       textColor: "text.primary",
       label: expirationText
     }));
-  }; // jsx of the production row
-
+  };
 
+  // jsx of the production row
   var Production = function Production(props) {
     var chipText = props.chipText,
-        hasStaging = props.hasStaging,
-        policyId = props.policyId,
-        name = props.name;
+      hasStaging = props.hasStaging,
+      policyId = props.policyId,
+      name = props.name;
     return ___EmotionJSX(Box, {
       isRow: true,
       height: "75px"
@@ -326,15 +316,15 @@ export var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId)), chipText && ___EmotionJSX(DefaultChip, null)), ___EmotionJSX(IconWithPopover, null));
-  }; // jsx of the staging row.
-
+    }, "Policy Id:", ' ', policyId)), chipText && ___EmotionJSX(DefaultBadge, null)), ___EmotionJSX(IconWithPopover, null));
+  };
 
+  // jsx of the staging row.
   var Staging = function Staging(props) {
     var chipText = props.chipText,
-        expirationText = props.expirationText,
-        policyId = props.policyId,
-        name = props.name;
+      expirationText = props.expirationText,
+      policyId = props.policyId,
+      name = props.name;
     return ___EmotionJSX(Box, {
       isRow: true,
       height: "75px",
@@ -367,11 +357,10 @@ export var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId))), chipText && ___EmotionJSX(DefaultChip, null), expirationText && ___EmotionJSX(ExprirationChip, {
+    }, "Policy Id:", ' ', policyId))), chipText && ___EmotionJSX(DefaultBadge, null), expirationText && ___EmotionJSX(ExprirationBadge, {
       expirationText: expirationText
     }), ___EmotionJSX(IconWithPopover, null));
   };
-
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ListView, _extends({}, args, {
     items: theseItems
   }), function (item) {
@@ -379,7 +368,20 @@ export var Default = function Default(_ref) {
       textValue: item.name,
       "data-id": item.key,
       listItemProps: {
-        variant: 'boxes.linkedListViewItem'
+        minHeight: '75px',
+        sx: {
+          '&.has-inset-separator': {
+            '&:before': {
+              content: '""',
+              position: 'absolute',
+              width: 'calc(100% - 43px)',
+              right: 0,
+              bottom: 0,
+              borderBottom: '1px solid',
+              borderBottomColor: 'line.hairline'
+            }
+          }
+        }
       }
     }), item.parentId ? ___EmotionJSX(Staging, _extends({}, item, {
       hasInsetSeparator: true

package/lib/recipes/ListAndPanel.stories.js

@@ -1,15 +1,15 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import React, { useRef, useState } from 'react';
-import { FocusScope } from '@react-aria/focus';
-import { Item } from '@react-stately/collections';
+import { FocusScope } from 'react-aria';
+import { Item } from 'react-stately';
 import AccountIcon from 'mdi-react/AccountIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
 import PlusIcon from 'mdi-react/PlusIcon';
-import { Box, Icon, IconButton, Link, ListItem, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../';
 import { useOverlayPanelState } from '../hooks';
+import { Box, Icon, IconButton, Link, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/List with Panel'
@@ -137,8 +137,7 @@ var sx = {
   },
   listElement: {
     wrapper: {
-      minHeight: '60px',
-      pl: '14px'
+      minHeight: '60px'
     },
     iconWrapper: {
       mr: 'auto',
@@ -152,7 +151,7 @@ var sx = {
     avatar: {
       width: '25px',
       height: '25px',
-      mr: '14px'
+      mr: 'md'
     },
     title: {
       alignSelf: 'start',
@@ -165,70 +164,15 @@ 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 = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-
-  var _useState3 = useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      mousePosition = _useState4[0],
-      setMousePosition = _useState4[1];
-
-  var listItemRef = 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 ___EmotionJSX(ListItem, {
-    isHovered: isHoverable && isHovered,
+    onClosePanel = _ref.onClosePanel;
+  return ___EmotionJSX(Box, {
     isRow: true,
-    onHoverEnd: handleHoveEnd,
-    onHoverStart: handleHoveStart,
-    onMouseMove: handleMouseMove,
-    ref: listItemRef,
     sx: sx.listElement.wrapper
   }, ___EmotionJSX(Box, {
     isRow: true,
@@ -240,7 +184,7 @@ var ListElement = function ListElement(_ref) {
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "bodyStrong",
     sx: sx.listElement.title
-  }, item.lastName, ", ", item.firstName), ___EmotionJSX(Text, {
+  }, item.lastName, ",", ' ', item.firstName), ___EmotionJSX(Text, {
     variant: "subtitle",
     sx: sx.listElement.subtitle
   }, item.email))), ___EmotionJSX(Box, {
@@ -257,11 +201,7 @@ var ListElement = function ListElement(_ref) {
   }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
     size: "md"
-  })), ___EmotionJSX(Menu, {
-    onAction: handleHoveEnd,
-    onHoverEnd: handleMenuHoverEnd,
-    onHoverStart: handleHoveStart
-  }, ___EmotionJSX(Item, {
+  })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
     key: "disable"
@@ -275,32 +215,26 @@ var ListElement = function ListElement(_ref) {
     icon: CloseIcon
   }))));
 };
-
 export var Default = function Default() {
-  var _useState5 = useState(),
-      _useState6 = _slicedToArray(_useState5, 2),
-      selectedItemId = _useState6[0],
-      setSelectedItemId = _useState6[1];
-
-  var _useState7 = useState(),
-      _useState8 = _slicedToArray(_useState7, 2),
-      selectedKeys = _useState8[0],
-      setSelectedKeys = _useState8[1];
-
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedItemId = _useState2[0],
+    setSelectedItemId = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedKeys = _useState4[0],
+    setSelectedKeys = _useState4[1];
   var _useOverlayPanelState = useOverlayPanelState(),
-      panelState = _useOverlayPanelState.state,
-      onPanelClose = _useOverlayPanelState.onClose;
-
+    panelState = _useOverlayPanelState.state,
+    onPanelClose = _useOverlayPanelState.onClose;
   var panelTriggerRef = 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(_findIndexInstanceProperty(items).call(items, function (item) {
@@ -312,8 +246,9 @@ export var Default = function Default() {
       closePanelHandler();
     }
   };
-
-  var title = ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, {
+    sx: sx.wrapper
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     align: "center",
     isRow: true,
     mb: "xs",
@@ -340,11 +275,7 @@ export var Default = function Default() {
     sx: {
       fontSize: '13px'
     }
-  }, " Learn more")));
-
-  return ___EmotionJSX(Box, {
-    sx: sx.wrapper
-  }, title, ___EmotionJSX(SearchField, {
+  }, " Learn more"))), ___EmotionJSX(SearchField, {
     position: "fixed",
     mb: "lg",
     mt: "lg",
@@ -357,19 +288,17 @@ export var Default = function Default() {
     items: items,
     onSelectionChange: selectItemHandler,
     ref: panelTriggerRef,
-    selectedKeys: selectedKeys,
-    isHoverable: false
+    selectedKeys: selectedKeys
   }, function (item) {
     return ___EmotionJSX(Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: item.hasSeparator,
+      hasSeparator: true,
       listItemProps: {
-        minHeight: 75,
-        padding: 1
+        pl: 15,
+        minHeight: 75
       }
     }, ___EmotionJSX(ListElement, {
-      isHoverable: true,
       item: item
     }));
   }), ___EmotionJSX(OverlayPanel, {
@@ -378,7 +307,7 @@ export var Default = function Default() {
     triggerRef: panelTriggerRef,
     p: 0,
     size: "large"
-  }, panelState.isOpen && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(FocusScope, {
+  }, panelState.isOpen && ___EmotionJSX(FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: true
@@ -415,7 +344,7 @@ export var Default = function Default() {
   }, "Full Name"), ___EmotionJSX(Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), ___EmotionJSX(Text, {
+  }, items[selectedItemId].firstName, ' ', items[selectedItemId].lastName), ___EmotionJSX(Text, {
     sx: sx.itemLabel,
     variant: "base"
   }, "First Name"), ___EmotionJSX(Text, {
@@ -437,5 +366,5 @@ export var Default = function Default() {
     title: "Group Memberships"
   }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {
     title: "Account Info"
-  }, ___EmotionJSX(Text, null, "Account Info"))))))));
+  }, ___EmotionJSX(Text, null, "Account Info")))))));
 };

package/lib/recipes/LogoTabs.stories.js

@@ -9,21 +9,17 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-
 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) { _defineProperty(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; }
-
 import React, { useState } from 'react';
-import ShuffleVariant from 'mdi-react/ShuffleVariantIcon';
 import Filter from 'mdi-react/FilterIcon';
-import { Tabs, Tab, Text, Icon, Box, Separator } from '../index';
-import { tab } from '../styles/variants/tabs';
+import ShuffleVariant from 'mdi-react/ShuffleVariantIcon';
+import { tab } from '../components/Tabs/Tabs.style';
+import { Box, Icon, Separator, Tab, Tabs, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Logo Tabs'
 };
-
 var P14CLogo = function P14CLogo(props) {
   return ___EmotionJSX("svg", _extends({
     id: "Layer_1",
@@ -53,7 +49,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 ___EmotionJSX("svg", _extends({
     x: "0px",
@@ -81,7 +76,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',
@@ -133,15 +127,13 @@ var sx = {
 };
 export var LogoTabs = function LogoTabs() {
   var _useState = useState('tab1'),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentTab = _useState2[0],
-      setCurrentTab = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    currentTab = _useState2[0],
+    setCurrentTab = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showMiddleTabs = _useState4[0],
-      setShowMiddleTabs = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    showMiddleTabs = _useState4[0],
+    setShowMiddleTabs = _useState4[1];
   return ___EmotionJSX(Box, {
     sx: sx.container
   }, ___EmotionJSX(Separator, {

package/lib/recipes/MaskedValue.stories.js

@@ -1,10 +1,10 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _repeatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/repeat";
 import React, { useState } from 'react';
-import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
-import { Box, Icon, IconButton, Text } from '../index';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import { useStatusClasses } from '../hooks';
+import { Box, Icon, IconButton, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Masked Values',
@@ -35,31 +35,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
+    }
   }
 };
 export var Default = function Default(_ref) {
   var _context;
-
   var dataTitle = _ref.dataTitle,
-      secretData = _ref.secretData;
-
+    secretData = _ref.secretData;
   var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMasked = _useState2[0],
-      setIsMasked = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isMasked = _useState2[0],
+    setIsMasked = _useState2[1];
   var _useStatusClasses = useStatusClasses(null, {
-    isMasked: isMasked
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isMasked: isMasked
+    }),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "label"
   }, dataTitle), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Text, {
-    variant: "maskedValue",
+    sx: sx.maskedItem,
     className: classNames
   }, isMasked ? _repeatInstanceProperty(_context = '•').call(_context, 99) : secretData), ___EmotionJSX(IconButton, {
     "aria-label": isMasked ? 'Show content' : 'Hide content',

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
-import DeleteIcon from 'mdi-react/DeleteIcon';
 import CogsIcon from 'mdi-react/CogsIcon';
+import DeleteIcon from 'mdi-react/DeleteIcon';
+import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
 import Box from '../components/Box';
-import { Icon, ComboBoxField, Item, IconButton, IconButtonToggle } from '../index';
+import { ComboBoxField, Icon, IconButton, IconButtonToggle, Item } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/One Way to Bidirectional Arrow'
@@ -58,7 +58,6 @@ export var Default = function Default() {
       fill: "currentColor"
     }));
   };
-
   var CustomOffSvg = function CustomOffSvg(props) {
     return ___EmotionJSX("svg", _extends({
       width: "16",
@@ -74,7 +73,6 @@ export var Default = function Default() {
       fill: "currentColor"
     }));
   };
-
   var CustomRightSvg = function CustomRightSvg(props) {
     return ___EmotionJSX("svg", _extends({
       width: "8",
@@ -87,7 +85,6 @@ export var Default = function Default() {
       fill: "currentColor"
     }));
   };
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     sx: sx.outerContainer,
     isRow: true
@@ -123,7 +120,7 @@ export var Default = function Default() {
       size: 'xs'
     },
     buttonProps: {
-      variant: 'bidirectionalIconButton'
+      variant: 'bidirectional'
     }
   })), ___EmotionJSX(ComboBoxField, {
     items: items,
@@ -195,7 +192,7 @@ export var Default = function Default() {
       size: 8
     },
     buttonProps: {
-      variant: 'bidirectionalIconButton'
+      variant: 'bidirectional'
     }
   })), ___EmotionJSX(ComboBoxField, {
     items: items,

package/lib/recipes/PageHeader.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PlusIcon from 'mdi-react/PlusIcon';
-import { Box, Button, IconButton, Icon, Text } from '../index';
+import { Box, Button, Icon, IconButton, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Page Header'