@pingux/astro 1.25.1-alpha.0 → 1.25.1-alpha.11

package/lib/components/PasswordField/PasswordField.js

@@ -13,7 +13,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["helperText", "isVisible", "onVisibleChange", "slots", "status", "viewHiddenIconTestId", "viewIconTestId", "requirements"];
+var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
 
 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; }
 
@@ -25,32 +25,34 @@ import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
 import { useOverlayPosition } from '@react-aria/overlays';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
-import useField from '../../hooks/useField';
-import useProgressiveState from '../../hooks/useProgressiveState';
+import * as hooks from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { usePropWarning, useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import FieldHelperText from '../FieldHelperText';
-import Input from '../Input';
-import Label from '../Label';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
+import Input from '../Input';
+import Label from '../Label';
 import PopoverContainer from '../PopoverContainer';
 import RequirementsList from '../RequirementsList';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE = {
+  HIDE: 'hide password',
+  SHOW: 'show password'
+};
 /**
   * Combines a text input, label, IconButton and helper text for a complete, form-ready solution.
  */
 
-import { jsx as ___EmotionJSX } from "@emotion/react";
 var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
       isVisibleProp = props.isVisible,
       onVisibleChangeProp = props.onVisibleChange,
+      requirements = props.requirements,
       slots = props.slots,
       status = props.status,
       viewHiddenIconTestId = props.viewHiddenIconTestId,
       viewIconTestId = props.viewIconTestId,
-      requirements = props.requirements,
       others = _objectWithoutProperties(props, _excluded);
 
   var checkRequirements = function checkRequirements() {
@@ -59,41 +61,27 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     }).length > 0;
   };
 
-  var _useField = useField(_objectSpread({
+  var _hooks$useField = hooks.useField(_objectSpread({
     status: status
   }, others)),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
+      fieldContainerProps = _hooks$useField.fieldContainerProps,
+      fieldControlProps = _hooks$useField.fieldControlProps,
+      fieldLabelProps = _hooks$useField.fieldLabelProps;
 
   var isFocused = fieldControlProps.isFocused;
   var inputRef = useRef();
   var popoverRef = useRef();
-  usePropWarning(props, 'disabled', 'isDisabled');
+  hooks.usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
 
-  var _useProgressiveState = useProgressiveState(isVisibleProp, onVisibleChangeProp),
-      _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
-      isVisible = _useProgressiveState2[0],
-      setIsShown = _useProgressiveState2[1];
-
-  var onVisibleChange = function onVisibleChange() {
-    setIsShown(!isVisible);
-
-    if (onVisibleChangeProp) {
-      var _context;
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      onVisibleChangeProp.apply(void 0, _concatInstanceProperty(_context = [!isVisible]).call(_context, args));
-    }
-  }; // Measure the width of the input to inform the width of the menu (below).
+  var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, onVisibleChangeProp),
+      _hooks$useProgressive2 = _slicedToArray(_hooks$useProgressive, 2),
+      isVisible = _hooks$useProgressive2[0],
+      setIsShown = _hooks$useProgressive2[1]; // Measure the width of the input to inform the width of the menu (below).
 
 
   var _useState = useState(null),
@@ -114,10 +102,10 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
   useLayoutEffect(onResize, [onResize]);
 
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: inputRef,
+    isOpen: true,
     overlayRef: popoverRef,
     placement: 'bottom end',
-    isOpen: true
+    targetRef: inputRef
   }),
       overlayProps = _useOverlayPosition.overlayProps,
       placement = _useOverlayPosition.placement,
@@ -131,15 +119,31 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [isFocused, updatePosition]);
 
-  var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
-    width: menuWidth,
-    minWidth: menuWidth
-  });
+  var style = _objectSpread({
+    minWidth: menuWidth,
+    width: menuWidth
+  }, overlayProps.style);
 
-  var _useStatusClasses = useStatusClasses(fieldControlProps.className, {
+  var _hooks$useStatusClass = hooks.useStatusClasses(fieldControlProps.className, {
     'is-success': status === statuses.SUCCESS || checkRequirements() && requirements.length > 0
   }),
-      classNames = _useStatusClasses.classNames;
+      classNames = _hooks$useStatusClass.classNames;
+
+  var toggleShowPasswordAriaLabel = isVisible ? ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.HIDE : ARIA_LABELS_FOR_SHOW_PASSWORD_TOGGLE.SHOW;
+
+  var handleToggleShowPassword = function handleToggleShowPassword() {
+    setIsShown(!isVisible);
+
+    if (onVisibleChangeProp) {
+      var _context;
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      onVisibleChangeProp.apply(void 0, _concatInstanceProperty(_context = [!isVisible]).call(_context, args));
+    }
+  };
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
     variant: "forms.input.wrapper"
@@ -158,23 +162,23 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
   })), ___EmotionJSX(Box, {
     variant: "forms.input.containedIcon"
   }, ___EmotionJSX(IconButton, {
-    "aria-label": "visible-icon",
+    "aria-label": toggleShowPasswordAriaLabel,
     isDisabled: fieldControlProps.disabled,
-    size: 28,
-    onPress: onVisibleChange
+    onPress: handleToggleShowPassword,
+    size: 28
   }, ___EmotionJSX(Icon, {
     "data-testid": isVisible ? viewIconTestId : viewHiddenIconTestId,
     icon: isVisible ? EyeIcon : EyeOffIcon
   }))), slots === null || slots === void 0 ? void 0 : slots.inContainer), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText)), ___EmotionJSX(PopoverContainer, {
-    isOpen: isFocused && requirements && _Array$isArray(requirements) && !checkRequirements(),
-    ref: popoverRef,
-    placement: placement,
-    style: style,
     hasNoArrow: true,
+    isDismissable: false,
     isNonModal: true,
-    isDismissable: false
+    isOpen: isFocused && requirements && _Array$isArray(requirements) && !checkRequirements(),
+    placement: placement,
+    ref: popoverRef,
+    style: style
   }, ___EmotionJSX(RequirementsList, {
     requirements: requirements
   })));
@@ -287,9 +291,9 @@ PasswordField.defaultProps = {
   isDisabled: false,
   isReadOnly: false,
   isRequired: false,
-  type: 'password',
+  requirements: [],
   status: statuses.DEFAULT,
-  requirements: []
+  type: 'password'
 };
 PasswordField.displayName = 'PasswordField';
 export default PasswordField;

package/lib/components/PopoverContainer/PopoverContainer.js

@@ -24,7 +24,7 @@ import { mergeProps } from '@react-aria/utils';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 /**
- * PopoverContainer component used for popover on SelectField, ComboBox, and PopoverMenu.
+ * PopoverContainer component used for popover on SelectField, ComboBox & PopoverMenu.
 */
 
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/recipes/ListAndPanel.stories.js

@@ -3,10 +3,11 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useRef, useState } from 'react';
 import { FocusScope } from '@react-aria/focus';
 import { Item } from '@react-stately/collections';
+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 { Avatar, Box, IconButton, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import { Avatar, Box, Icon, IconButton, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
 import { useOverlayPanelState } from '../hooks';
 import { pingImg } from '../utils/devUtils/constants/images';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -17,7 +18,8 @@ var items = [{
   email: 'dburkitt5@columbia.edu',
   firstName: 'Nicola',
   lastName: 'Burkitt',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'idixie2@elegantthemes.com',
   firstName: 'Cacilia',
@@ -32,52 +34,62 @@ var items = [{
   email: 'jgolde8@jimdo.com',
   firstName: 'Celisse',
   lastName: 'Golde',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'shearst9@answers.com',
   firstName: 'Jeth',
   lastName: 'Hearst',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'ajinaa@mapquest.com',
   firstName: 'Kaycee',
   lastName: 'Jina',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'vmalster4@biblegateway.com',
   firstName: 'Lorry',
   lastName: 'Malster',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'yphipp6@yellowpages.com',
   firstName: 'Stanley',
   lastName: 'Phipp',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'mskilbeck3@bbc.co.uk',
   firstName: 'Gradey',
   lastName: 'Skilbeck',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'dstebbing1@msu.edu',
   firstName: 'Marnia',
   lastName: 'Stebbing',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'lsterley7@lulu.com',
   firstName: 'Joshua',
   lastName: 'Sterley',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'luttleyb@hugedomains.com',
   firstName: 'Jarrod',
   lastName: 'Uttley',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'lidelc@yelp.com',
   firstName: 'Andromache',
   lastName: 'Idel',
-  avatar: pingImg,
+  hasIcon: true,
+  avatar: AccountIcon,
   hasSeparator: false
 }];
 
@@ -91,7 +103,13 @@ var ListElement = function ListElement(_ref) {
     isRow: true,
     mr: "auto",
     alignItems: "center"
-  }, ___EmotionJSX(Avatar, {
+  }, item.hasIcon ? ___EmotionJSX(Icon, {
+    icon: item.avatar,
+    alignSelf: "center",
+    size: 24,
+    mr: "sm",
+    color: "accent.40"
+  }) : ___EmotionJSX(Avatar, {
     mr: "md",
     sx: {
       width: '25px',
@@ -170,8 +188,11 @@ export var Default = function Default() {
   return ___EmotionJSX(Box, {
     px: "lg",
     py: "lg",
-    bg: "accent.99"
+    bg: "accent.99",
+    height: "900px",
+    overflowY: "scroll"
   }, ___EmotionJSX(SearchField, {
+    position: "fixed",
     mb: "sm",
     width: "400px",
     placeholder: "Search",
@@ -227,6 +248,7 @@ export var Default = function Default() {
   }, ___EmotionJSX(Tab, {
     title: "Profile"
   }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
+    variant: "inverted",
     sx: {
       position: 'absolute',
       top: 0,

package/lib/recipes/OneWayToBidirectionalArrow.stories.js

@@ -1,3 +1,4 @@
+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';
@@ -19,42 +20,52 @@ var items = [{
   id: '3'
 }];
 export var Default = function Default() {
-  var CustomOnSvg = function CustomOnSvg() {
-    return ___EmotionJSX("svg", {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
+  var CustomOnSvg = function CustomOnSvg(props) {
+    return ___EmotionJSX("svg", _extends({
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, ___EmotionJSX("path", {
-      d: "M8 10V13H14V18H8V21L2 15.5L8 10Z",
-      fill: "#CACED3"
-    }), ___EmotionJSX("path", {
-      d: "M9.83325 10.6251V6.37511H15.4999V2.94678L21.0533 8.50011L15.4999 14.0534V10.6251H9.83325Z",
-      fill: "#4462ED"
+    }, props), ___EmotionJSX("path", {
+      d: "M5.33325 6.66666V8.66666H9.33325V12H5.33325V14L1.33325 10.3333L5.33325 6.66666Z",
+      fill: "currentColor"
     }), ___EmotionJSX("path", {
-      d: "M8 10V13H14V18H8V21L2 15.5L8 10ZM22 8.5L16 3V6H10V11H16V14L22 8.5Z",
-      fill: "#515F6B"
+      d: "M14.6666 5.66667L10.6666 2V4H6.66658V7.33333H10.6666V9.33333L14.6666 5.66667Z",
+      fill: "currentColor"
     }));
   };
 
-  var CustomOffSvg = function CustomOffSvg() {
-    return ___EmotionJSX("svg", {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
+  var CustomOffSvg = function CustomOffSvg(props) {
+    return ___EmotionJSX("svg", _extends({
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, ___EmotionJSX("path", {
-      d: "M8 10V13H14V18H8V21L2 15.5L8 10Z",
+    }, props), ___EmotionJSX("path", {
+      d: "M5.33325 6.66667V8.66667H9.33325V12H5.33325V14L1.33325 10.3333L5.33325 6.66667Z",
       fill: "#CACED3"
     }), ___EmotionJSX("path", {
-      d: "M9.83331 10.6251V6.37511H15.5V2.94678L21.0533 8.50011L15.5 14.0534V10.6251H9.83331Z",
-      fill: "#4462ED"
+      d: "M14.6666 5.66667L10.6666 2V4H6.66658V7.33333H10.6666V9.33333L14.6666 5.66667Z",
+      fill: "currentColor"
+    }));
+  };
+
+  var CustomRightSvg = function CustomRightSvg(props) {
+    return ___EmotionJSX("svg", _extends({
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), ___EmotionJSX("path", {
+      d: "M8 4L4 0V2.18182H0V5.81818H4V8L8 4Z",
+      fill: "currentColor"
     }));
   };
 
-  return ___EmotionJSX(Box, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     sx: {
       alignItems: 'center'
     },
@@ -83,8 +94,7 @@ export var Default = function Default() {
     }, item.name);
   }), ___EmotionJSX(Box, {
     sx: {
-      ml: '5px',
-      mr: '5px',
+      mx: 'sm',
       flexShrink: 0
     }
   }, ___EmotionJSX(IconButtonToggle, {
@@ -92,10 +102,91 @@ export var Default = function Default() {
     defaultIcon: CustomOffSvg,
     title: "Bidirectional/ Outbound toggle",
     iconProps: {
-      size: 20
+      size: 16
+    },
+    buttonProps: {
+      variant: 'bidirectionalIconButton'
+    }
+  })), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "First Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      'aria-label': 'Row one Pingone value'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    sx: {
+      marginLeft: '12px',
+      marginRight: '12px'
+    }
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Edit"
+  }, ___EmotionJSX(Icon, {
+    icon: CogsIcon,
+    color: "neutral.30",
+    size: 20,
+    title: "edit icon"
+  })), ___EmotionJSX(IconButton, {
+    ml: "5px",
+    "aria-label": "Delete"
+  }, ___EmotionJSX(Icon, {
+    icon: DeleteIcon,
+    color: "neutral.30",
+    size: 20,
+    title: "delete icon"
+  })))), ___EmotionJSX(Box, {
+    sx: {
+      alignItems: 'center'
+    },
+    isRow: true
+  }, ___EmotionJSX(Icon, {
+    icon: DragVerticalIcon,
+    size: 25,
+    color: "neutral.50"
+  }), ___EmotionJSX(ComboBoxField, {
+    items: items,
+    defaultSelectedKey: "Last Name",
+    containerProps: {
+      width: '275px'
+    },
+    labelProps: {
+      mb: 0
+    },
+    "aria-label": "Row one value",
+    controlProps: {
+      'aria-label': 'test'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
+    sx: {
+      mx: 'sm',
+      flexShrink: 0
+    }
+  }, ___EmotionJSX(IconButtonToggle, {
+    toggledIcon: CustomRightSvg,
+    defaultIcon: CustomRightSvg,
+    title: "This attribute does not support write-back.",
+    iconProps: {
+      size: 8
     },
     buttonProps: {
-      variant: 'svgIconButton'
+      variant: 'bidirectionalIconButton'
     }
   })), ___EmotionJSX(ComboBoxField, {
     items: items,
@@ -121,17 +212,20 @@ export var Default = function Default() {
       marginLeft: '12px',
       marginRight: '12px'
     }
-  }, ___EmotionJSX(IconButton, null, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Edit"
+  }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
     color: "neutral.30",
     size: 20,
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
-    ml: "5px"
+    ml: "5px",
+    "aria-label": "Delete"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
     color: "neutral.30",
     size: 20,
     title: "delete icon"
-  }))));
+  })))));
 };

package/lib/styles/theme.js

@@ -17,7 +17,7 @@ import colors, { accent, line, shadow, focus } from './colors';
 import { fontSizes, fontWeights, textColors } from './text';
 import breakpoints from './breakpoints';
 import forms from './forms';
-import { variants, buttons, text, images, links } from './variants';
+import { variants, buttons, text, images, links, bidirectionalIconButton } from './variants';
 export default {
   name: 'Astro',
   space: spacing,
@@ -52,7 +52,9 @@ export default {
   forms: forms,
   text: text,
   images: images,
-  buttons: buttons,
+  buttons: _objectSpread(_objectSpread({}, buttons), {}, {
+    bidirectionalIconButton: bidirectionalIconButton
+  }),
   textColors: textColors,
   links: links,
   variants: variants

package/lib/styles/variants/bidirectionalIconButton.js

@@ -0,0 +1,34 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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 { defaultFocus } from './buttons';
+var bidirectionalIconButton = {
+  border: '1px solid',
+  outline: 'none',
+  height: '24px',
+  width: '24px',
+  color: 'active',
+  borderRadius: '12px',
+  borderColor: 'active',
+  '&.is-hovered': {
+    color: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    borderColor: 'accent.20'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
+export default bidirectionalIconButton;

package/lib/styles/variants/index.js

@@ -1,5 +1,6 @@
 export { default as variants } from './variants';
 export { default as buttons } from './buttons';
+export { default as bidirectionalIconButton } from './bidirectionalIconButton';
 export { default as images } from './images';
 export { default as links } from './links';
 export * from './text';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.25.1-alpha.0",
+  "version": "1.25.1-alpha.11",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",