@pingux/astro 1.33.1-alpha.2 → 1.34.0-alpha.0

package/lib/cjs/components/Icon/Icon.js

@@ -38,6 +38,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _hooks = require("../../hooks");
+
 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); }
@@ -63,16 +65,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var color = props.color,
       IconComponent = props.icon,
-      size = props.size,
       sx = props.sx;
+
+  var _useTShirtSize = (0, _hooks.useTShirtSize)(props),
+      sizeProps = _useTShirtSize.sizeProps;
+
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: IconComponent,
     ref: ref
   }, props, {
+    size: sizeProps.size,
     sx: _objectSpread({
       fill: color,
-      size: "".concat(size, "px"),
-      minWidth: size
+      minWidth: sizeProps.size
     }, sx)
   }));
 });
@@ -82,9 +87,9 @@ Icon.propTypes = {
 
   /**
    * The size of the icon container. If given a number value, it will be converted to pixels.
-   * Standard icon sizes are 15, 22, and 40.
-  */
-  size: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+   * 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: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
 
   /** A theme-aware prop to set the icon's color. */
   color: _propTypes["default"].string

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.SVGIcons = exports.Default = void 0;
+exports["default"] = exports.Sizes = exports.SVGIcons = exports.Default = exports.CommonlyUsed = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -16,21 +16,33 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
+
+var _AccountGroupIcon = _interopRequireDefault(require("mdi-react/AccountGroupIcon"));
+
+var _LockIcon = _interopRequireDefault(require("mdi-react/LockIcon"));
+
 var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
 
+var _TagIcon = _interopRequireDefault(require("mdi-react/TagIcon"));
+
 var _uuid = require("uuid");
 
-var _ = _interopRequireDefault(require("."));
+var _index = require("../../index");
 
 var _colors = require("../../styles/colors");
 
+var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
+
 var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Icon',
-  component: _["default"],
+  component: _index.Icon,
   parameters: {
     docs: {
       source: {
@@ -48,9 +60,10 @@ var _default = {
     },
     size: {
       control: {
-        type: 'text'
+        type: 'select',
+        options: (0, _keys["default"])(_tShirtSizes.tShirtSizes)
       },
-      description: 'The size of the icon container. If given a number value, it will be converted to pixels. ' + 'Standard icon sizes are 15, 22, and 40. ' + 'Numeric value and/or paired with a unit. https://www.w3schools.com/cssref/css_units.asp'
+      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.'
     },
     color: {
       control: {
@@ -69,7 +82,7 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_["default"], args);
+  return (0, _react2.jsx)(_index.Icon, args);
 };
 
 exports.Default = Default;
@@ -92,11 +105,109 @@ var SVGIcons = function SVGIcons() {
     }));
   };
 
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.Icon, {
     icon: SVGComponent,
     color: "active",
     size: 40
   });
 };
 
-exports.SVGIcons = SVGIcons;
+exports.SVGIcons = SVGIcons;
+var rowHeadings = ['SVG Size', 'Code Example', 'Icon Example'];
+
+var Sizes = function Sizes() {
+  return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
+    key: "head"
+  }, (0, _map["default"])(rowHeadings).call(rowHeadings, function (head) {
+    return (0, _react2.jsx)(_index.TableCell, {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), (0, _react2.jsx)(_index.TableBody, {
+    sx: {
+      borderBottom: 'unset'
+    }
+  }, (0, _react2.jsx)(_index.TableRow, {
+    height: "45px",
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "XS | 15px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '<Icon icon={SearchIcon}/> size="xs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
+    icon: _SearchIcon["default"],
+    size: "xs"
+  }))), (0, _react2.jsx)(_index.TableRow, {
+    height: "45px",
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "SM | 20px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '<Icon icon={SearchIcon}/> size="sm"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
+    icon: _SearchIcon["default"],
+    size: "sm"
+  }))), (0, _react2.jsx)(_index.TableRow, {
+    height: "45px",
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, null, "MD | 25px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '<Icon icon={SearchIcon}/> size="md"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
+    icon: _SearchIcon["default"],
+    size: "md"
+  })))));
+};
+
+exports.Sizes = Sizes;
+
+var CommonlyUsed = function CommonlyUsed() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _AccountIcon["default"],
+    color: "accent.40",
+    size: "sm"
+  }), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, "import AccountIcon from 'mdi-react/AccountIcon'; ")), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _AccountGroupIcon["default"],
+    color: "accent.40",
+    size: "sm"
+  }), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, "import AccountGroupIcon from 'mdi-react/AccountGroupIcon'; ")), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _LockIcon["default"],
+    color: "accent.40",
+    size: "sm"
+  }), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, "import LockIcon from 'mdi-react/LockIcon'; ")), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _SearchIcon["default"],
+    color: "accent.40",
+    size: "sm"
+  }), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, "import SearchIcon from 'mdi-react/SearchIcon'; ")), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _TagIcon["default"],
+    color: "accent.40",
+    size: "sm"
+  }), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, "import TagIcon from 'mdi-react/TagIcon'; ")));
+};
+
+exports.CommonlyUsed = CommonlyUsed;

package/lib/cjs/components/Icon/Icon.test.js

@@ -36,4 +36,31 @@ test('default icon', function () {
 
   expect(icon).toBeInstanceOf(SVGSVGElement);
   expect(icon).toBeInTheDocument();
+});
+test('icon renders correct xsmall tshirt size', function () {
+  getComponent({
+    size: 'xs'
+  });
+
+  var xsIcon = _react2.screen.getByTestId(testId);
+
+  expect(xsIcon).toHaveStyleRule('width', '15px');
+});
+test('icon renders correct small tshirt size', function () {
+  getComponent({
+    size: 'sm'
+  });
+
+  var smIcon = _react2.screen.getByTestId(testId);
+
+  expect(smIcon).toHaveStyleRule('width', '20px');
+});
+test('icon renders correct medium tshirt size', function () {
+  getComponent({
+    size: 'md'
+  });
+
+  var mdIcon = _react2.screen.getByTestId(testId);
+
+  expect(mdIcon).toHaveStyleRule('width', '25px');
 });

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithTooltip = exports.Disabled = exports.Default = void 0;
+exports["default"] = exports.WithTooltip = exports.Sizes = exports.Disabled = exports.Default = exports.CommonlyUsed = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -16,15 +16,21 @@ var _react = _interopRequireDefault(require("react"));
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
-var _ = _interopRequireDefault(require("."));
+var _DotsVerticalIcon = _interopRequireDefault(require("mdi-react/DotsVerticalIcon"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _DeleteIcon = _interopRequireDefault(require("mdi-react/DeleteIcon"));
+
+var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
+
+var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
+
+var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'IconButton',
-  component: _["default"],
+  component: _index.IconButton,
   parameters: {
     docs: {
       source: {
@@ -63,9 +69,9 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
     "aria-label": "default icon button"
-  }, args), (0, _react2.jsx)(_Icon["default"], {
+  }, args), (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"]
   }));
 };
@@ -73,10 +79,10 @@ var Default = function Default(args) {
 exports.Default = Default;
 
 var WithTooltip = function WithTooltip() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "icon button with tooltip",
     title: "Edit"
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"]
   }));
 };
@@ -84,12 +90,272 @@ var WithTooltip = function WithTooltip() {
 exports.WithTooltip = WithTooltip;
 
 var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_["default"], {
+  return (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "disabled icon button",
     isDisabled: true
-  }, (0, _react2.jsx)(_Icon["default"], {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"]
   }));
 };
 
-exports.Disabled = Disabled;
+exports.Disabled = Disabled;
+
+var Sizes = function Sizes() {
+  return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    isHeading: true,
+    width: "40%"
+  }, "Icon & Button Size"), (0, _react2.jsx)(_index.TableCell, {
+    isHeading: true
+  }, "Code Example"), (0, _react2.jsx)(_index.TableCell, {
+    isHeading: true
+  }, "Icon Example"))), (0, _react2.jsx)(_index.TableBody, {
+    sx: {
+      borderBottom: 'unset'
+    }
+  }, (0, _react2.jsx)(_index.TableRow, {
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    width: "40%"
+  }, (0, _react2.jsx)(_index.Text, null, "XS | 21px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, "<Icon icon={CreateIcon} size='xs'/>"), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "create buton",
+    variant: "inverted",
+    sx: {
+      width: 'unset'
+    }
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    size: "xs"
+  })))), (0, _react2.jsx)(_index.TableRow, {
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    width: "40%"
+  }, (0, _react2.jsx)(_index.Text, null, "SM | 26px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, "<Icon icon={CreateIcon} size='sm'/>"), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "create buton",
+    variant: "inverted",
+    sx: {
+      width: 'unset'
+    }
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    size: "sm"
+  })))), (0, _react2.jsx)(_index.TableRow, {
+    bg: "transparent !important"
+  }, (0, _react2.jsx)(_index.TableCell, {
+    width: "40%"
+  }, (0, _react2.jsx)(_index.Text, null, "MD | 31px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, "<Icon icon={CreateIcon} size='md'/>"), (0, _react2.jsx)(_index.Text, {
+    fontFamily: "monospace"
+  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "create buton",
+    variant: "inverted",
+    sx: {
+      width: 'unset'
+    }
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    size: "md"
+  }))))));
+};
+
+exports.Sizes = Sizes;
+
+var CommonlyUsed = function CommonlyUsed() {
+  return (// please note these are intentionally not mapped for story transparency
+    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
+      fontFamily: "monospace",
+      mb: "md"
+    }, "import DeleteIcon from 'mdi-react/DeleteIcon'; "), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md",
+      mb: "md"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "delete"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DeleteIcon["default"],
+      size: "xs"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "delete"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DeleteIcon["default"],
+      size: "sm"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "delete"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DeleteIcon["default"],
+      size: "md"
+    }))), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md",
+      mb: "xl"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "delete",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DeleteIcon["default"],
+      size: "xs"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "delete",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DeleteIcon["default"],
+      size: "sm"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "delete",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DeleteIcon["default"],
+      size: "md"
+    }))), (0, _react2.jsx)(_index.Text, {
+      fontFamily: "monospace",
+      mb: "md"
+    }, "import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon'; "), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md",
+      mb: "md"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "xs"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "sm"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "md"
+    }))), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md",
+      mb: "xl"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "xs"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "sm"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "more options",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _DotsVerticalIcon["default"],
+      size: "md"
+    }))), (0, _react2.jsx)(_index.Text, {
+      fontFamily: "monospace",
+      mb: "md"
+    }, "import PlusIcon from 'mdi-react/PlusIcon'; "), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md",
+      mb: "md"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "add"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PlusIcon["default"],
+      size: "xs"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "add"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PlusIcon["default"],
+      size: "sm"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "add"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PlusIcon["default"],
+      size: "md"
+    }))), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md",
+      mb: "xl"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "add",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PlusIcon["default"],
+      size: "xs"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "add",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PlusIcon["default"],
+      size: "sm"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "add",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PlusIcon["default"],
+      size: "md"
+    }))), (0, _react2.jsx)(_index.Text, {
+      fontFamily: "monospace",
+      mb: "md"
+    }, "import PencilIcon from 'mdi-react/PencilIcon'; "), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md",
+      mb: "md"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PencilIcon["default"],
+      size: "xs"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PencilIcon["default"],
+      size: "sm"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PencilIcon["default"],
+      size: "md"
+    }))), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "md",
+      mb: "xl"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PencilIcon["default"],
+      size: "xs"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PencilIcon["default"],
+      size: "sm"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create",
+      variant: "inverted"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _PencilIcon["default"],
+      size: "md"
+    }))))
+  );
+};
+
+exports.CommonlyUsed = CommonlyUsed;

package/lib/cjs/hooks/index.js

@@ -120,34 +120,43 @@ _Object$defineProperty(exports, "useStatusClasses", {
   }
 });
 
+_Object$defineProperty(exports, "useTShirtSize", {
+  enumerable: true,
+  get: function get() {
+    return _useTShirtSize["default"];
+  }
+});
+
 var _useAriaLabelWarning = _interopRequireDefault(require("./useAriaLabelWarning"));
 
 var _useColumnStyles = _interopRequireDefault(require("./useColumnStyles"));
 
+var _useComponentToggle = _interopRequireDefault(require("./useComponentToggle"));
+
+var _useDebounce = _interopRequireDefault(require("./useDebounce"));
+
 var _useDeprecationWarning = _interopRequireDefault(require("./useDeprecationWarning"));
 
+var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));
+
 var _useField = _interopRequireDefault(require("./useField"));
 
 var _useLabelHeight = _interopRequireDefault(require("./useLabelHeight"));
 
 var _useModalState = _interopRequireDefault(require("./useModalState"));
 
+var _useNavBarPress = _interopRequireDefault(require("./useNavBarPress"));
+
 var _useOverlayPanelState = _interopRequireDefault(require("./useOverlayPanelState"));
 
 var _usePropWarning = _interopRequireDefault(require("./usePropWarning"));
 
 var _useProgressiveState = _interopRequireDefault(require("./useProgressiveState"));
 
-var _useComponentToggle = _interopRequireDefault(require("./useComponentToggle"));
-
-var _useNavBarPress = _interopRequireDefault(require("./useNavBarPress"));
-
 var _useRockerButton = _interopRequireDefault(require("./useRockerButton"));
 
 var _useSelectField = _interopRequireDefault(require("./useSelectField"));
 
 var _useStatusClasses = _interopRequireDefault(require("./useStatusClasses"));
 
-var _useDebounce = _interopRequireDefault(require("./useDebounce"));
-
-var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));
+var _useTShirtSize = _interopRequireDefault(require("./useTShirtSize"));

package/lib/cjs/hooks/useTShirtSize/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useTShirtSize["default"];
+  }
+});
+
+var _useTShirtSize = _interopRequireDefault(require("./useTShirtSize"));