@pingux/astro 2.43.0 → 2.44.0-alpha.1

package/lib/cjs/components/IconButton/iconButtonAttributes.js

@@ -60,12 +60,6 @@ var iconButtonArgTypes = {
     },
     description: descriptions.variant
   },
-  size: {
-    control: {
-      type: 'select',
-      options: ['xs', 'sm', 'md']
-    }
-  },
   onPress: _objectSpread({
     description: descriptions.onPress
   }, _docArgTypes.funcArg),
@@ -85,8 +79,7 @@ var iconButtonArgTypes = {
 exports.iconButtonArgTypes = iconButtonArgTypes;
 var iconButtonArgs = {
   icon: _CreateIcon["default"],
-  variant: 'base',
-  size: 'sm'
+  variant: 'base'
 };
 exports.iconButtonArgs = iconButtonArgs;
 var iconButtonPropTypes = {

package/lib/cjs/components/IconButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './IconButton';

package/lib/cjs/components/Loader/Loader.stories.js

@@ -1,11 +1,19 @@
 "use strict";
 
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = exports.CustomColor = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _react = _interopRequireDefault(require("react"));
@@ -14,8 +22,11 @@ var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/s
 var _index = require("../../index");
 var _colors = require("../../styles/colors");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _iconSizeProps = require("../../utils/docUtils/iconSizeProps");
 var _Loader = _interopRequireDefault(require("./Loader.mdx"));
 var _react2 = require("@emotion/react");
+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: 'Components/Loader',
   component: _index.Loader,
@@ -38,12 +49,9 @@ var _default = {
         })
       }
     },
-    size: {
-      control: {
-        type: 'text'
-      },
-      description: 'The size of the loader. Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px. Default size inherits the font size. ' + 'Numeric value paired with a unit. https://www.w3schools.com/cssref/css_units.asp'
-    }
+    size: _objectSpread(_objectSpread({}, _iconSizeProps.sizeArgTypes.size), {}, {
+      description: 'The size of the loader. Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px. Default size inherits the font size. Numeric value paired with a unit. https://www.w3schools.com/cssref/css_units.asp'
+    })
   },
   args: {
     color: 'active'

package/lib/cjs/context/BadgeContext/index.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="react" />
-export declare const BadgeContext: import("react").Context<string | object>;
+import { StylePropertyValue } from 'theme-ui';
+export interface BadgeContextProps {
+    bg?: StylePropertyValue<string | undefined>;
+}
+export declare const BadgeContext: import("react").Context<string | object | BadgeContextProps>;

package/lib/cjs/types/icon.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { TestingAttributes } from './shared/test';
-import { DOMAttributes, StyleProps } from './shared';
+import { DOMAttributes, IconSize, StyleProps } from './shared';
 export type SVGComponentProps = {
     title?: string;
 };
@@ -24,11 +24,7 @@ export interface IconProps extends StyleProps, DOMAttributes, TestingAttributes
     };
     /** The icon to render. */
     icon: IconTypeExtended;
-    /**
-     * The size of the icon container. If given a number value, it will be converted to pixels.
-     * Tshirt sizing is recommended and can be passed to the size prop as 'xs', 'sm' , 'md'
-     * rendering 15, 20, and 25 pixel svg containers.  */
-    size?: number | string;
+    size?: IconSize;
     /** A theme-aware prop to set the icon's color. */
     color?: string;
 }

package/lib/cjs/types/iconButton.d.ts

@@ -0,0 +1,21 @@
+import { IconButtonProps as ThemeUIIconButtonProps, ThemeUICSSObject } from 'theme-ui';
+import { TestingAttributes } from './shared/test';
+import { IconTypeExtended } from './icon';
+import { HoverProps, PressProps } from './shared';
+export interface IconButtonProps extends ThemeUIIconButtonProps, TestingAttributes, PressProps, HoverProps {
+    /** The styling variation of the element. */
+    variant?: string | undefined;
+    /** The icon of the element. */
+    icon?: IconTypeExtended;
+    /**
+     * The title associated with the icon. It is recommended that icons always have an associated
+     * title in order to allow a better user experience for those using screen readers.
+     * It also what will be supplied to the **`aria-labelledby`** attribute in the SVG.
+     * */
+    title?: string | undefined;
+    'aria-label'?: string | undefined;
+    /** Whether the icon button is disabled. */
+    isDisabled?: boolean;
+    /** Inline styling prop */
+    sx?: ThemeUICSSObject;
+}

package/lib/cjs/types/iconButton.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -6,6 +6,7 @@ export * from './card';
 export * from './fieldHelperText';
 export * from './icon';
 export * from './iconBadge';
+export * from './iconButton';
 export * from './item';
 export * from './link';
 export * from './loader';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -95,8 +95,19 @@ _forEachInstanceProperty(_context8 = _Object$keys(_iconBadge)).call(_context8, f
     }
   });
 });
+var _iconButton = require("./iconButton");
+_forEachInstanceProperty(_context9 = _Object$keys(_iconButton)).call(_context9, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _iconButton[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _iconButton[key];
+    }
+  });
+});
 var _item = require("./item");
-_forEachInstanceProperty(_context9 = _Object$keys(_item)).call(_context9, function (key) {
+_forEachInstanceProperty(_context10 = _Object$keys(_item)).call(_context10, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _item[key]) return;
   _Object$defineProperty(exports, key, {
@@ -107,7 +118,7 @@ _forEachInstanceProperty(_context9 = _Object$keys(_item)).call(_context9, functi
   });
 });
 var _link = require("./link");
-_forEachInstanceProperty(_context10 = _Object$keys(_link)).call(_context10, function (key) {
+_forEachInstanceProperty(_context11 = _Object$keys(_link)).call(_context11, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _link[key]) return;
   _Object$defineProperty(exports, key, {
@@ -118,7 +129,7 @@ _forEachInstanceProperty(_context10 = _Object$keys(_link)).call(_context10, func
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context11 = _Object$keys(_loader)).call(_context11, function (key) {
+_forEachInstanceProperty(_context12 = _Object$keys(_loader)).call(_context12, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -129,7 +140,7 @@ _forEachInstanceProperty(_context11 = _Object$keys(_loader)).call(_context11, fu
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context12 = _Object$keys(_popoverContainer)).call(_context12, function (key) {
+_forEachInstanceProperty(_context13 = _Object$keys(_popoverContainer)).call(_context13, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -140,7 +151,7 @@ _forEachInstanceProperty(_context12 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context13 = _Object$keys(_separator)).call(_context13, function (key) {
+_forEachInstanceProperty(_context14 = _Object$keys(_separator)).call(_context14, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -151,7 +162,7 @@ _forEachInstanceProperty(_context13 = _Object$keys(_separator)).call(_context13,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context14 = _Object$keys(_shared)).call(_context14, function (key) {
+_forEachInstanceProperty(_context15 = _Object$keys(_shared)).call(_context15, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -162,7 +173,7 @@ _forEachInstanceProperty(_context14 = _Object$keys(_shared)).call(_context14, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context15 = _Object$keys(_table)).call(_context15, function (key) {
+_forEachInstanceProperty(_context16 = _Object$keys(_table)).call(_context16, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_table)).call(_context15, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context16 = _Object$keys(_text)).call(_context16, function (key) {
+_forEachInstanceProperty(_context17 = _Object$keys(_text)).call(_context17, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_text)).call(_context16, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context17 = _Object$keys(_tooltipTrigger)).call(_context17, function (key) {
+_forEachInstanceProperty(_context18 = _Object$keys(_tooltipTrigger)).call(_context18, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/loader.d.ts

@@ -1,14 +1,9 @@
-import { StyleProps } from './shared';
+import { IconSize, StyleProps } from './shared';
 export interface LoaderProps extends StyleProps {
     /**
      * Color key from theme or string value.
      * Default color inherits the font color.
     */
     color?: string;
-    /**
-   * Size as number or pixel / em / rem value.
-   * Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px.
-   * Default size inherits the font size.
-  */
-    size?: number | string;
+    size?: IconSize;
 }

package/lib/cjs/types/shared/style.d.ts

@@ -15,3 +15,7 @@ export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom star
 export type Axis = 'top' | 'bottom' | 'left' | 'right';
 export type SizeAxis = 'width' | 'height';
 export type PlacementAxis = Axis | 'center';
+type IconTShirtSize = 'xs' | 'sm' | 'md';
+type pixelSize = 'em' | 'px' | 'rem';
+export type IconSize = IconTShirtSize | number | `${number}${pixelSize}`;
+export {};

package/lib/cjs/utils/docUtils/iconSizeProps.d.ts

@@ -0,0 +1,9 @@
+export declare const sizeArgTypes: {
+    size: {
+        options: string[];
+        description: string;
+    };
+};
+export declare const sizePropTypes: {
+    size: any;
+};

package/lib/cjs/utils/docUtils/iconSizeProps.js

@@ -0,0 +1,22 @@
+"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.sizePropTypes = exports.sizeArgTypes = void 0;
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tShirtSizes = require("../devUtils/constants/tShirtSizes");
+var sizeArgTypes = {
+  size: {
+    options: (0, _keys["default"])(_tShirtSizes.tShirtSizes),
+    description: "The size of the icon container. If given a number value, it will be converted to pixels. \n    Tshirt sizing is recommended and can be passed to the size prop as \"xs\", \"sm\" , \"md\" \n    rendering 15, 20, and 25 pixel svg containers."
+  }
+};
+exports.sizeArgTypes = sizeArgTypes;
+var sizePropTypes = {
+  size: _propTypes["default"].oneOf((0, _keys["default"])(_tShirtSizes.tShirtSizes))
+};
+exports.sizePropTypes = sizePropTypes;

package/lib/components/Icon/Icon.stories.js

@@ -1,7 +1,17 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+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 from 'react';
 import AccountGroupIcon from '@pingux/mdi-react/AccountGroupIcon';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
@@ -14,7 +24,7 @@ import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import { flatColorList } from '../../styles/colors';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
-import { tShirtSizes } from '../../utils/devUtils/constants/tShirtSizes';
+import { sizeArgTypes } from '../../utils/docUtils/iconSizeProps';
 import IconReadme from './Icon.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -31,20 +41,14 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread(_objectSpread({
     icon: {
       control: {
         type: 'none'
       },
       description: 'The icon to render. List of icons at https://materialdesignicons.com/'
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: _Object$keys(tShirtSizes)
-      },
-      description: 'The size of the icon container. If given a number value, it will be converted to pixels. ' + 'Tshirt sizing is recommended and can be passed to the size prop as "xs", "sm" , "md" ' + 'rendering 15, 20, and 25 pixel svg containers.'
-    },
+    }
+  }, sizeArgTypes), {}, {
     color: {
       control: {
         type: 'select',
@@ -55,10 +59,11 @@ export default {
         })
       }
     }
-  },
+  }),
   args: {
+    color: 'active',
     icon: SearchIcon,
-    color: 'active'
+    size: 'sm'
   }
 };
 export var Default = function Default(args) {

package/lib/components/IconButton/IconButton.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "title", "variant", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
+var _excluded = ["children", "className", "title", "variant", "onBlur", "onFocus", "onHoverChange", "onHoverEnd", "onHoverStart", "onKeyDown", "onKeyUp", "onPress", "onPressEnd", "onPressStart", "onPressChange", "onPressUp", "isDisabled"];
 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, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
@@ -19,33 +19,57 @@ import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
-import { iconButtonPropTypes } from './iconButtonAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     className = props.className,
     title = props.title,
     variant = props.variant,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onHoverChange = props.onHoverChange,
+    onHoverEnd = props.onHoverEnd,
+    onHoverStart = props.onHoverStart,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
     onPress = props.onPress,
-    onPressStart = props.onPressStart,
     onPressEnd = props.onPressEnd,
+    onPressStart = props.onPressStart,
     onPressChange = props.onPressChange,
     onPressUp = props.onPressUp,
     isDisabled = props.isDisabled,
     others = _objectWithoutProperties(props, _excluded);
-  var buttonRef = useRef();
+  var buttonRef = useRef(null);
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return buttonRef.current;
   });
-  var _usePress = usePress(buttonRef),
+  var _usePress = usePress({
+      ref: buttonRef
+    }),
     isPressedFromContext = _usePress.isPressed;
-  var _useButton = useButton(_objectSpread({}, props), buttonRef),
+  var _useButton = useButton(_objectSpread({
+      elementType: 'button',
+      isDisabled: isDisabled,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp,
+      onPress: onPress,
+      onPressChange: onPressChange,
+      onPressEnd: onPressEnd,
+      onPressStart: onPressStart,
+      onPressUp: onPressUp
+    }, others), buttonRef),
     buttonProps = _useButton.buttonProps,
     isPressed = _useButton.isPressed;
-  var _useContext = useContext(BadgeContext),
-    badgeBg = _useContext.bg;
-  var _useHover = useHover(props),
+  var _ref = useContext(BadgeContext),
+    badgeBg = _ref.bg;
+  var _useHover = useHover({
+      onHoverChange: onHoverChange,
+      onHoverEnd: onHoverEnd,
+      onHoverStart: onHoverStart
+    }),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
   var _useFocusRing = useFocusRing(),
@@ -66,11 +90,11 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: 0,
     className: classNames,
     "aria-label": ariaLabel,
-    sx: badgeBg && isHovered && {
+    sx: badgeBg && isHovered ? {
       'path': {
         fill: badgeBg
       }
-    },
+    } : undefined,
     variant: "iconButtons.".concat(variant),
     onPointerOver: hoverProps.onPointerEnter
   }, children));
@@ -81,10 +105,9 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   }
   return button;
 });
-IconButton.propTypes = iconButtonPropTypes;
 IconButton.defaultProps = {
   variant: 'base',
   isDisabled: false
 };
-IconButton.displayName = 'Icon Button';
+IconButton.displayName = 'IconButton';
 export default IconButton;

package/lib/components/IconButton/IconButton.stories.js

@@ -8,7 +8,7 @@ import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, IconButton, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import IconButtonReadme from './IconButton.mdx';
 import { iconButtonArgs, iconButtonArgTypes } from './iconButtonAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -34,7 +34,6 @@ export var Default = function Default(args) {
     "aria-label": "default icon button"
   }, args), ___EmotionJSX(Icon, {
     icon: CreateIcon,
-    size: args.size,
     title: {
       name: 'Create Icon'
     }

package/lib/components/IconButton/IconButton.test.js

@@ -125,7 +125,8 @@ test('tooltip is not shown on hover or focus when prop is not passed', function
 test('the button should be getting aria label attribute', function () {
   var testLabel = defaultProps['aria-label'];
   getComponent();
-  expect(screen.getByLabelText(testLabel)).toBeInTheDocument();
+  var button = screen.getByRole('button');
+  expect(button).toHaveAttribute('aria-label', testLabel);
 });
 test('show button isDisabled status', function () {
   var onPress = jest.fn();

package/lib/components/IconButton/iconButtonAttributes.js

@@ -53,12 +53,6 @@ export var iconButtonArgTypes = {
     },
     description: descriptions.variant
   },
-  size: {
-    control: {
-      type: 'select',
-      options: ['xs', 'sm', 'md']
-    }
-  },
   onPress: _objectSpread({
     description: descriptions.onPress
   }, funcArg),
@@ -77,8 +71,7 @@ export var iconButtonArgTypes = {
 };
 export var iconButtonArgs = {
   icon: CreateIcon,
-  variant: 'base',
-  size: 'sm'
+  variant: 'base'
 };
 export var iconButtonPropTypes = {
   variant: PropTypes.string,

package/lib/components/Loader/Loader.stories.js

@@ -1,4 +1,15 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+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 _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
@@ -6,6 +17,7 @@ import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Loader } from '../../index';
 import { flatColorList } from '../../styles/colors';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { sizeArgTypes } from '../../utils/docUtils/iconSizeProps';
 import LoaderReadme from './Loader.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -30,12 +42,9 @@ export default {
         })
       }
     },
-    size: {
-      control: {
-        type: 'text'
-      },
-      description: 'The size of the loader. Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px. Default size inherits the font size. ' + 'Numeric value paired with a unit. https://www.w3schools.com/cssref/css_units.asp'
-    }
+    size: _objectSpread(_objectSpread({}, sizeArgTypes.size), {}, {
+      description: 'The size of the loader. Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px. Default size inherits the font size. Numeric value paired with a unit. https://www.w3schools.com/cssref/css_units.asp'
+    })
   },
   args: {
     color: 'active'

package/lib/types/iconButton.js

@@ -0,0 +1 @@
+export {};

package/lib/types/index.js

@@ -6,6 +6,7 @@ export * from './card';
 export * from './fieldHelperText';
 export * from './icon';
 export * from './iconBadge';
+export * from './iconButton';
 export * from './item';
 export * from './link';
 export * from './loader';

package/lib/utils/docUtils/iconSizeProps.js

@@ -0,0 +1,12 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import PropTypes from 'prop-types';
+import { tShirtSizes } from '../devUtils/constants/tShirtSizes';
+export var sizeArgTypes = {
+  size: {
+    options: _Object$keys(tShirtSizes),
+    description: "The size of the icon container. If given a number value, it will be converted to pixels. \n    Tshirt sizing is recommended and can be passed to the size prop as \"xs\", \"sm\" , \"md\" \n    rendering 15, 20, and 25 pixel svg containers."
+  }
+};
+export var sizePropTypes = {
+  size: PropTypes.oneOf(_Object$keys(tShirtSizes))
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.43.0",
+  "version": "2.44.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",