@pingux/astro 1.42.0-alpha.0 → 2.0.0-alpha.1

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

@@ -38,19 +38,19 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _overlays = require("@react-aria/overlays");
+var _EmailIcon = _interopRequireDefault(require("mdi-react/EmailIcon"));
 
-var _utils = require("@react-aria/utils");
+var _PinIcon = _interopRequireDefault(require("mdi-react/PinIcon"));
 
 var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
 
-var _EmailIcon = _interopRequireDefault(require("mdi-react/EmailIcon"));
+var _reactAria = require("react-aria");
 
-var _PinIcon = _interopRequireDefault(require("mdi-react/PinIcon"));
+var _focus = require("@react-aria/focus");
 
 var _i18n = require("@react-aria/i18n");
 
-var _focus = require("@react-aria/focus");
+var _utils = require("@react-aria/utils");
 
 var _index = require("../index");
 
@@ -167,7 +167,7 @@ var Default = function Default() {
 
   var focusManager = (0, _focus.createFocusManager)(popoverRef);
 
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     targetRef: buttonRef,
     overlayRef: popoverRef,
     placement: 'bottom left',
@@ -264,7 +264,7 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_focus.FocusScope, null, (0, _react2.jsx)(_index.SearchField, {
+  }, (0, _react2.jsx)(_reactAria.FocusScope, null, (0, _react2.jsx)(_index.SearchField, {
     ref: buttonRef,
     icon: _SearchIcon["default"],
     "aria-label": "Search Groups",

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

@@ -92,7 +92,7 @@ var sx = {
 var helperTextId = (0, _uuid.v4)();
 
 var Row = function Row(props) {
-  var withChip = props.withChip,
+  var withBadge = props.withBadge,
       withTooltip = props.withTooltip,
       withError = props.withError,
       leftValue = props.leftValue,
@@ -135,7 +135,7 @@ var Row = function Row(props) {
         width: '165px'
       }
     }
-  }), withChip && (0, _react2.jsx)(_index.Chip, {
+  }), withBadge && (0, _react2.jsx)(_index.Badge, {
     label: "Required",
     sx: sx.chip
   }), withTooltip && (0, _react2.jsx)(_index.Box, {
@@ -180,7 +180,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
   }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
-    withChip: true,
+    withBadge: true,
     leftValue: "UserId",
     rightValue: "mdorey"
   }), (0, _react2.jsx)(Row, {
@@ -244,7 +244,7 @@ var WithError = function WithError() {
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
   }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
-    withChip: true,
+    withBadge: true,
     leftValue: "UserId",
     rightValue: "mdorey"
   }), (0, _react2.jsx)(Row, {

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

@@ -69,7 +69,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var _default = {
-  title: 'Recipes/Collapsible Panel with List'
+  title: 'Recipes/CollapsiblePanel with List'
 };
 exports["default"] = _default;
 var data = [{
@@ -246,7 +246,7 @@ var Default = function Default() {
     "data-id": "home"
   }, "Ed Nepomuceno"), (0, _react2.jsx)(_.Item, {
     key: "editGroups",
-    variant: "neutralText",
+    variant: "link",
     "data-id": "editGroups"
   }, "Edit Groups"))), (0, _react2.jsx)(_.Box, {
     isRow: true
@@ -301,7 +301,7 @@ var Default = function Default() {
       variant: "listTitle",
       mb: "xs",
       mr: "xs"
-    }, item.name), (0, _react2.jsx)(_.Chip, {
+    }, item.name), (0, _react2.jsx)(_.Badge, {
       label: item.chipValue,
       bg: "accent.99",
       textColor: "text.secondary",

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

@@ -29,7 +29,7 @@ var _default = {
 };
 exports["default"] = _default;
 var sx = {
-  customChipStyles: {
+  customBadgeStyles: {
     marginRight: 'sm',
     '& > span': {
       textTransform: 'none',
@@ -92,7 +92,7 @@ var Default = function Default() {
     key: 'Miscellaneous2Field'
   }];
   var trashButton = (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "deleteButton",
+    "aria-label": "badge.deleteButton",
     sx: {
       alignSelf: 'center'
     }
@@ -132,10 +132,10 @@ var Default = function Default() {
     size: "xs"
   }))), (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Chip, {
+  }, (0, _react2.jsx)(_index.Badge, {
     label: "ALL",
     bg: "decorative.7",
-    sx: sx.customChipStyles
+    sx: sx.customBadgeStyles
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
@@ -143,32 +143,32 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
       width: "100%"
     }, (0, _react2.jsx)(_index.Box, {
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       sx: sx.allConditionsBox
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Chip, {
+    }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3))));
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     mt: "md",
     sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Chip, {
+  }, (0, _react2.jsx)(_index.Badge, {
     label: "ANY",
     bg: "decorative.4",
-    sx: sx.customChipStyles,
+    sx: sx.customBadgeStyles,
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
     ml: "sm"
@@ -180,7 +180,7 @@ var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), (0, _react2.jsx)(_index.Box, {
       mt: "md",
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       width: "100%",
@@ -188,11 +188,11 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Chip, {
+    }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));
   })))), (0, _react2.jsx)(_index.Box, {
@@ -200,15 +200,15 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Bracket, {
     isLast: true
   }), (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     mt: "md",
     sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Chip, {
+  }, (0, _react2.jsx)(_index.Badge, {
     label: "NONE",
     bg: "accent.20",
-    sx: sx.customChipStyles,
+    sx: sx.customBadgeStyles,
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
     ml: "sm"
@@ -220,7 +220,7 @@ var Default = function Default() {
       isLast: index === noneConditions.length - 1
     }), (0, _react2.jsx)(_index.Box, {
       mt: "md",
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       width: "100%",
@@ -228,11 +228,11 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Chip, {
+    }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));
   }))))) : (0, _react2.jsx)(_index.Box, {
@@ -324,7 +324,7 @@ var Default = function Default() {
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -414,7 +414,7 @@ var Default = function Default() {
     isRow: true,
     mt: "md"
   }, (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,

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

@@ -64,11 +64,11 @@ var sx = {
   comboBoxFieldWrapperClose: {
     position: 'absolute',
     transition: '0.2s width ease',
-    width: '110px'
+    maxWidth: '110px'
   },
   inputWrapper: {
     width: '100%',
-    marginLeft: '110px'
+    ml: '110px'
   }
 };
 
@@ -145,7 +145,7 @@ var Default = function Default() {
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
-    wrapperProps: {
+    containerProps: {
       sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {

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

@@ -36,6 +36,8 @@ var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/stat
 
 var _PopoverContainer = _interopRequireDefault(require("../components/PopoverContainer"));
 
+var _Text = require("../components/Text/Text.styles");
+
 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); }
@@ -60,6 +62,50 @@ var sx = {
     top: 8,
     width: 28,
     height: 28
+  },
+  container: {
+    maxWidth: 300,
+    '.react-calendar': {
+      width: 280,
+      '& .react-calendar__month-view__days__day': {
+        width: 40,
+        height: 40,
+        color: 'neutral.10',
+        fontSize: 'sm',
+        fontWeight: 1
+      },
+      '& .react-calendar__navigation__label__labelText': _Text.text.itemTitle,
+      '& .react-calendar__navigation__arrow, & .react-calendar__month-view__days__day--neighboringMonth': {
+        color: 'neutral.40'
+      },
+      '& .react-calendar__month-view__weekdays': {
+        borderBottom: '1px solid',
+        borderColor: 'neutral.80'
+      },
+      '& .react-calendar__month-view__weekdays__weekday abbr': {
+        textDecoration: 'none',
+        textTransform: 'capitalize'
+      },
+      '& .react-calendar__month-view__days__day--weekend': {
+        color: 'decorative.4'
+      },
+      '& .react-calendar__tile--active, & .react-calendar__tile--hasActive': {
+        backgroundColor: 'active',
+        color: 'white'
+      },
+      '& .react-calendar__year-view__months__month': {
+        padding: '19px 0'
+      },
+      '& .react-calendar__decade-view__years__year, & .react-calendar__month-view__days__day, & .react-calendar__year-view__months__month': {
+        '&:hover': {
+          backgroundColor: 'rgba(70, 96, 162, .1);',
+          color: 'neutral.10'
+        }
+      },
+      '& .react-calendar__navigation': {
+        marginBottom: 0
+      }
+    }
   }
 };
 
@@ -128,10 +174,7 @@ var Default = function Default() {
     setError(false);
   }, []);
   return (0, _react2.jsx)(_index.Box, {
-    sx: {
-      maxWidth: 300
-    },
-    variant: "boxes.dataPicker"
+    sx: sx.container
   }, (0, _react2.jsx)(_index.TextField, {
     slots: {
       inContainer: (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
@@ -157,7 +200,7 @@ var Default = function Default() {
     hasNoArrow: true,
     isDismissable: true
   }), (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.datePicker"
+    sx: sx.container
   }, (0, _react2.jsx)(_reactCalendar["default"], {
     onChange: handleCalendarChange,
     value: date.toDate()

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

@@ -50,7 +50,7 @@ var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
 
 var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
 
-var _overlays = require("@react-aria/overlays");
+var _reactAria = require("react-aria");
 
 var _utils = require("@react-aria/utils");
 
@@ -141,7 +141,7 @@ var Default = function Default() {
     setSelectedButton((0, _concat["default"])(_context = []).call(_context, newState));
   };
 
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
     targetRef: buttonRef,
     overlayRef: popoverRef,
     placement: 'bottom left',

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

@@ -30,8 +30,6 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _collections = require("@react-stately/collections");
-
 var _DotsVerticalIcon = _interopRequireDefault(require("mdi-react/DotsVerticalIcon"));
 
 var _index = require("../index");
@@ -102,7 +100,7 @@ var testData = [{
 // 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;
@@ -264,13 +262,13 @@ var Default = function Default(_ref) {
         minWidth: '155px',
         minHeight: '144px'
       }
-    }, (0, _react2.jsx)(_collections.Item, {
+    }, (0, _react2.jsx)(_index.Item, {
       key: "view"
-    }, "View"), (0, _react2.jsx)(_collections.Item, {
+    }, "View"), (0, _react2.jsx)(_index.Item, {
       key: "edit"
-    }, "Edit"), (0, _react2.jsx)(_collections.Item, {
+    }, "Edit"), (0, _react2.jsx)(_index.Item, {
       key: "rename"
-    }, "Rename"), (0, _react2.jsx)(_collections.Item, {
+    }, "Rename"), (0, _react2.jsx)(_index.Item, {
       key: "delete",
       textValue: "delete"
     }, (0, _react2.jsx)(_index.Text, {
@@ -279,8 +277,8 @@ var Default = function Default(_ref) {
   }; // made these separate components because staging and production both use them.
 
 
-  var DefaultChip = function DefaultChip() {
-    return (0, _react2.jsx)(_index.Chip, {
+  var DefaultBadge = function DefaultBadge() {
+    return (0, _react2.jsx)(_index.Badge, {
       label: "Default",
       bg: "active",
       sx: {
@@ -292,7 +290,7 @@ var Default = function Default(_ref) {
     });
   };
 
-  var ExprirationChip = function ExprirationChip(props) {
+  var ExprirationBadge = function ExprirationBadge(props) {
     var expirationText = props.expirationText,
         chipText = props.chipText;
     return (0, _react2.jsx)(_index.Box, {
@@ -302,7 +300,7 @@ var Default = function Default(_ref) {
       flexGrow: 1,
       alignItems: "center",
       alignSelf: "center"
-    }, (0, _react2.jsx)(_index.Chip, {
+    }, (0, _react2.jsx)(_index.Badge, {
       bg: "white",
       sx: {
         border: 'solid 1px',
@@ -355,7 +353,7 @@ var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId)), chipText && (0, _react2.jsx)(DefaultChip, null)), (0, _react2.jsx)(IconWithPopover, null));
+    }, "Policy Id: ", policyId)), chipText && (0, _react2.jsx)(DefaultBadge, null)), (0, _react2.jsx)(IconWithPopover, null));
   }; // jsx of the staging row.
 
 
@@ -396,7 +394,7 @@ var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId))), chipText && (0, _react2.jsx)(DefaultChip, null), expirationText && (0, _react2.jsx)(ExprirationChip, {
+    }, "Policy Id: ", policyId))), chipText && (0, _react2.jsx)(DefaultBadge, null), expirationText && (0, _react2.jsx)(ExprirationBadge, {
       expirationText: expirationText
     }), (0, _react2.jsx)(IconWithPopover, null));
   };
@@ -404,11 +402,24 @@ var Default = function Default(_ref) {
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, args, {
     items: theseItems
   }), function (item) {
-    return (0, _react2.jsx)(_collections.Item, (0, _extends2["default"])({}, item, {
+    return (0, _react2.jsx)(_index.Item, (0, _extends2["default"])({}, item, {
       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 ? (0, _react2.jsx)(Staging, (0, _extends2["default"])({}, item, {
       hasInsetSeparator: true

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

@@ -22,10 +22,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _focus = require("@react-aria/focus");
-
-var _collections = require("@react-stately/collections");
-
 var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
 
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
@@ -36,6 +32,10 @@ var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
 
 var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
 
+var _reactAria = require("react-aria");
+
+var _reactStately = require("react-stately");
+
 var _index = require("../index");
 
 var _hooks = require("../hooks");
@@ -242,11 +242,11 @@ var ListElement = function ListElement(_ref) {
     icon: _MoreVertIcon["default"],
     color: "white",
     size: "sm"
-  })), (0, _react2.jsx)(_index.Menu, null, (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)(_index.IconButton, {
     "aria-label": "close icon button",
@@ -335,7 +335,7 @@ var Default = function Default() {
     ref: panelTriggerRef,
     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,
@@ -352,7 +352,7 @@ var Default = function Default() {
     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)(_react["default"].Fragment, null, (0, _react2.jsx)(_reactAria.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: true

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

@@ -42,7 +42,7 @@ var _FilterIcon = _interopRequireDefault(require("mdi-react/FilterIcon"));
 
 var _index = require("../index");
 
-var _tabs = require("../styles/variants/tabs");
+var _Tabs = require("../components/Tabs/Tabs.style");
 
 var _react2 = require("@emotion/react");
 
@@ -136,7 +136,7 @@ var sx = {
       justifyContent: 'space-between'
     }
   },
-  tabStyling: _objectSpread(_objectSpread({}, _tabs.tab), {}, {
+  tabStyling: _objectSpread(_objectSpread({}, _Tabs.tab), {}, {
     alignSelf: 'center',
     '& > svg': {
       borderWidth: 1,

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

@@ -66,6 +66,17 @@ 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
+    }
   }
 };
 
@@ -91,7 +102,7 @@ var Default = function Default(_ref) {
     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',

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

@@ -145,7 +145,7 @@ var Default = function Default() {
       size: 'xs'
     },
     buttonProps: {
-      variant: 'bidirectionalIconButton'
+      variant: 'bidirectional'
     }
   })), (0, _react2.jsx)(_index.ComboBoxField, {
     items: items,
@@ -217,7 +217,7 @@ var Default = function Default() {
       size: 8
     },
     buttonProps: {
-      variant: 'bidirectionalIconButton'
+      variant: 'bidirectional'
     }
   })), (0, _react2.jsx)(_index.ComboBoxField, {
     items: items,