@pingux/astro 2.100.0 → 2.101.0-alpha.0

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

@@ -29,8 +29,13 @@ 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,
-    sx = props.sx;
-  var _useTShirtSize = (0, _hooks.useTShirtSize)(props),
+    sx = props.sx,
+    size = props.size;
+  var theme = (0, _hooks.useGetTheme)();
+  var _useTShirtSize = (0, _hooks.useTShirtSize)({
+      size: size,
+      sizes: theme.tShirtSizes
+    }),
     sizeProps = _useTShirtSize.sizeProps;
   var title = props.title || ((0, _typeof2["default"])(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name

package/lib/cjs/components/IconWrapper/IconWrapper.js

@@ -20,7 +20,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
-var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -36,10 +35,11 @@ var IconWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className = props.className,
     isCircle = props.isCircle,
     sx = props.sx;
-  var _useTShirtSize = (0, _hooks.useTShirtSize)(_objectSpread({}, {
+  var theme = (0, _hooks.useGetTheme)();
+  var _useTShirtSize = (0, _hooks.useTShirtSize)({
       size: size,
-      sizes: _tShirtSizes.iconWrapperSizes
-    })),
+      sizes: theme.iconWrapperSizes
+    }),
     sizeProps = _useTShirtSize.sizeProps;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isCircle: isCircle

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -15,6 +15,26 @@ declare const useGetTheme: () => {
         MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
         pingLogoHorizontalSmall: import("react").JSX.Element;
     };
+    tShirtSizes: {
+        xxs: string;
+        'icon-100': string;
+        xs: string;
+        'icon-200': string;
+        sm: string;
+        'icon-300': string;
+        md: string;
+        'icon-400': string;
+        'icon-500': string;
+        'icon-600': string;
+        'icon-700': string;
+        'icon-800': string;
+        'icon-900': string;
+    };
+    iconWrapperSizes: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
     themeState: {
         isNextGen: boolean;
         isAstro: boolean;
@@ -22,5 +42,33 @@ declare const useGetTheme: () => {
         isCustom: boolean;
     };
     name: string;
+} | {
+    icons: {
+        [x: number]: import("@pingux/mdi-react").MdiReactIconComponentType;
+        MenuDown: import("@pingux/mdi-react").MdiReactIconComponentType;
+        MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
+        pingLogoHorizontalSmall: import("react").JSX.Element;
+    };
+    styles: {
+        navButtonEstHeight: number;
+    };
+    tShirtSizes: {
+        xxs: number;
+        xs: number;
+        sm: number;
+        md: number;
+    };
+    iconWrapperSizes: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    name: string;
+    themeState: {
+        isAstro: boolean;
+        isNextGen: boolean;
+        isNextGenDark: boolean;
+        isCustom: boolean;
+    };
 };
 export default useGetTheme;

package/lib/cjs/hooks/useTShirtSize/index.d.ts

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

package/lib/cjs/hooks/useTShirtSize/useTShirtSize.d.ts

@@ -0,0 +1,18 @@
+import { IconSize } from '../../types';
+/**
+ * A custom hook which returns the pixel value of a tShirtSize.
+ * @param {Object} [props] The props object
+ * @param {String | Number} [props.size] The size of the svg container
+ * @returns {Object} `{ sizeProps: Object }`
+ */
+interface UseTShirtSizeProps {
+    size?: string | number;
+    sizes?: Record<string, string | number>;
+}
+interface SizeProps {
+    size: IconSize;
+}
+declare const useTShirtSize: ({ size, sizes }: UseTShirtSizeProps) => {
+    sizeProps: SizeProps;
+};
+export default useTShirtSize;

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

@@ -1,12 +1,14 @@
 "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["default"] = void 0;
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _react = require("react");
-var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
+var _tShirtSizes = _interopRequireDefault(require("../../styles/themes/astro/customProperties/tShirtSizes"));
 /**
  * A custom hook which returns the pixel value of a tShirtSize.
  * @param {Object} [props] The props object
@@ -17,7 +19,7 @@ var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
 var useTShirtSize = function useTShirtSize(_ref) {
   var size = _ref.size,
     _ref$sizes = _ref.sizes,
-    sizes = _ref$sizes === void 0 ? _tShirtSizes.tShirtSizes : _ref$sizes;
+    sizes = _ref$sizes === void 0 ? _tShirtSizes["default"] : _ref$sizes;
   var value = (0, _react.useMemo)(function () {
     if (size === undefined) {
       // eslint-disable-next-line no-console
@@ -26,11 +28,17 @@ var useTShirtSize = function useTShirtSize(_ref) {
     }
     return sizes === null || sizes === void 0 ? void 0 : sizes[size];
   }, [size, sizes]);
-  var sizeProps = {
-    size: value ? "".concat(value, "px") : size
-  };
+  if (typeof value === 'string' && ((0, _includes["default"])(value).call(value, 'px') || (0, _includes["default"])(value).call(value, 'em') || (0, _includes["default"])(value).call(value, 'rem'))) {
+    return {
+      sizeProps: {
+        size: value || size
+      }
+    };
+  }
   return {
-    sizeProps: sizeProps
+    sizeProps: {
+      size: value ? "".concat(value, "px") : size
+    }
   };
 };
 var _default = useTShirtSize;

package/lib/cjs/hooks/useTShirtSize/useTShirtSize.test.d.ts

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

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

@@ -2,14 +2,13 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _react = require("@testing-library/react");
-var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
+var _tShirtSizes = _interopRequireDefault(require("../../styles/themes/next-gen/customProperties/tShirtSizes"));
+var _tShirtSizes2 = require("../../utils/devUtils/constants/tShirtSizes");
 var _useTShirtSize = _interopRequireDefault(require("./useTShirtSize"));
 describe('useTShirtSize', function () {
   beforeEach(function () {
     process.env.NODE_ENV = 'development';
-    global.console.warn = function () {
-      return jest.mock();
-    }; // eslint-disable-line no-console
+    global.console.warn = jest.fn(); // eslint-disable-line no-console
   });
 
   afterEach(function () {
@@ -52,14 +51,30 @@ test('returns size value if size is a tshirt value', function () {
   };
   expect(result.current).toEqual(obj);
 });
-test('returns size value if size is a string value', function () {
+test('returns size value if size is a t-shirt value', function () {
   var props = {
-    size: '20px'
+    size: 'icon-500',
+    sizes: _tShirtSizes["default"]
   };
   var _renderHook2 = (0, _react.renderHook)(function () {
       return (0, _useTShirtSize["default"])(props);
     }),
     result = _renderHook2.result;
+  var obj = {
+    sizeProps: {
+      size: '3rem'
+    }
+  };
+  expect(result.current).toEqual(obj);
+});
+test('returns size value if size is a string value', function () {
+  var props = {
+    size: '20px'
+  };
+  var _renderHook3 = (0, _react.renderHook)(function () {
+      return (0, _useTShirtSize["default"])(props);
+    }),
+    result = _renderHook3.result;
   var obj = {
     sizeProps: {
       size: '20px'
@@ -71,10 +86,10 @@ test('returns size value if size is a number value', function () {
   var props = {
     size: 20
   };
-  var _renderHook3 = (0, _react.renderHook)(function () {
+  var _renderHook4 = (0, _react.renderHook)(function () {
       return (0, _useTShirtSize["default"])(props);
     }),
-    result = _renderHook3.result;
+    result = _renderHook4.result;
   var obj = {
     sizeProps: {
       size: 20
@@ -85,12 +100,12 @@ test('returns size value if size is a number value', function () {
 test('using custom sizes, returns size value if size is a string value', function () {
   var props = {
     size: '20px',
-    sizes: _tShirtSizes.iconWrapperSizes
+    sizes: _tShirtSizes2.iconWrapperSizes
   };
-  var _renderHook4 = (0, _react.renderHook)(function () {
+  var _renderHook5 = (0, _react.renderHook)(function () {
       return (0, _useTShirtSize["default"])(props);
     }),
-    result = _renderHook4.result;
+    result = _renderHook5.result;
   var obj = {
     sizeProps: {
       size: '20px'

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -8,4 +8,24 @@ export declare const nextGenDarkThemeValues: {
     styles: {
         navButtonEstHeight: number;
     };
+    tShirtSizes: {
+        xxs: string;
+        'icon-100': string;
+        xs: string;
+        'icon-200': string;
+        sm: string;
+        'icon-300': string;
+        md: string;
+        'icon-400': string;
+        'icon-500': string;
+        'icon-600': string;
+        'icon-700': string;
+        'icon-800': string;
+        'icon-900': string;
+    };
+    iconWrapperSizes: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
 };

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -9,4 +9,15 @@ export declare const astroThemeValues: {
     styles: {
         navButtonEstHeight: number;
     };
+    tShirtSizes: {
+        xxs: number;
+        xs: number;
+        sm: number;
+        md: number;
+    };
+    iconWrapperSizes: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
 };

package/lib/cjs/styles/themes/astro/customProperties/index.js

@@ -1,6 +1,9 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -8,8 +11,13 @@ _Object$defineProperty(exports, "__esModule", {
 exports.astroThemeValues = void 0;
 var _icons = _interopRequireDefault(require("./icons"));
 var _styles = _interopRequireDefault(require("./styles"));
+var _tShirtSizes = _interopRequireWildcard(require("./tShirtSizes"));
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var astroThemeValues = {
   icons: _icons["default"],
-  styles: _styles["default"]
+  styles: _styles["default"],
+  tShirtSizes: _tShirtSizes["default"],
+  iconWrapperSizes: _tShirtSizes.iconWrapperSizes
 };
 exports.astroThemeValues = astroThemeValues;

package/lib/cjs/styles/themes/astro/customProperties/tShirtSizes.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    xxs: number;
+    xs: number;
+    sm: number;
+    md: number;
+};
+export default _default;
+export declare const iconWrapperSizes: {
+    sm: number;
+    md: number;
+    lg: number;
+};

package/lib/cjs/styles/themes/astro/customProperties/tShirtSizes.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconWrapperSizes = exports["default"] = void 0;
+var _default = {
+  xxs: 9,
+  xs: 15,
+  sm: 20,
+  md: 25
+};
+exports["default"] = _default;
+var iconWrapperSizes = {
+  sm: 18,
+  md: 24,
+  lg: 48
+};
+exports.iconWrapperSizes = iconWrapperSizes;

package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts

@@ -9,4 +9,24 @@ export declare const nextGenThemeValues: {
         MenuUp: import("@pingux/mdi-react").MdiReactIconComponentType;
         pingLogoHorizontalSmall: import("react").JSX.Element;
     };
+    tShirtSizes: {
+        xxs: string;
+        'icon-100': string;
+        xs: string;
+        'icon-200': string;
+        sm: string;
+        'icon-300': string;
+        md: string;
+        'icon-400': string;
+        'icon-500': string;
+        'icon-600': string;
+        'icon-700': string;
+        'icon-800': string;
+        'icon-900': string;
+    };
+    iconWrapperSizes: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
 };

package/lib/cjs/styles/themes/next-gen/customProperties/index.js

@@ -1,6 +1,9 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -8,8 +11,13 @@ _Object$defineProperty(exports, "__esModule", {
 exports.nextGenThemeValues = void 0;
 var _icons = _interopRequireDefault(require("./icons"));
 var _styles = _interopRequireDefault(require("./styles"));
+var _tShirtSizes = _interopRequireWildcard(require("./tShirtSizes"));
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var nextGenThemeValues = {
   styles: _styles["default"],
-  icons: _icons["default"]
+  icons: _icons["default"],
+  tShirtSizes: _tShirtSizes["default"],
+  iconWrapperSizes: _tShirtSizes.iconWrapperSizes
 };
 exports.nextGenThemeValues = nextGenThemeValues;

package/lib/cjs/styles/themes/next-gen/customProperties/tShirtSizes.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    xxs: string;
+    'icon-100': string;
+    xs: string;
+    'icon-200': string;
+    sm: string;
+    'icon-300': string;
+    md: string;
+    'icon-400': string;
+    'icon-500': string;
+    'icon-600': string;
+    'icon-700': string;
+    'icon-800': string;
+    'icon-900': string;
+};
+export default _default;
+export declare const iconWrapperSizes: {
+    sm: number;
+    md: number;
+    lg: number;
+};

package/lib/cjs/styles/themes/next-gen/customProperties/tShirtSizes.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconWrapperSizes = exports["default"] = void 0;
+var _default = {
+  xxs: '.875rem',
+  'icon-100': '.875rem',
+  xs: '1.125rem',
+  'icon-200': '1.125rem',
+  sm: '1.5rem',
+  'icon-300': '1.5rem',
+  md: '2.25rem',
+  'icon-400': '2.25rem',
+  'icon-500': '3rem',
+  'icon-600': '3.75rem',
+  'icon-700': '4.5rem',
+  'icon-800': '5.25rem',
+  'icon-900': '6rem'
+};
+exports["default"] = _default;
+var iconWrapperSizes = {
+  sm: 18,
+  md: 24,
+  lg: 48
+};
+exports.iconWrapperSizes = iconWrapperSizes;

package/lib/cjs/styles/themes/next-gen/stories/StickerSheetComponent.js

@@ -8,6 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _react = _interopRequireDefault(require("react"));
+var _CameraIrisIcon = _interopRequireDefault(require("@pingux/mdi-react/CameraIrisIcon"));
 var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
 var _index = require("../../../../index");
 var _statuses = _interopRequireDefault(require("../../../../utils/devUtils/constants/statuses"));
@@ -58,6 +59,7 @@ var tabs = [{
   name: 'Tab 3',
   children: 'Tab 3 body'
 }];
+var iconSizes = ['icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
 var StickerSheetComponent = function StickerSheetComponent() {
   return (0, _react2.jsx)(_index.Box, {
     sx: {
@@ -130,6 +132,20 @@ var StickerSheetComponent = function StickerSheetComponent() {
       icon: _DeleteIcon["default"],
       color: color
     });
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md",
+    alignContent: "center",
+    flexWrap: "wrap"
+  }, (0, _map["default"])(iconSizes).call(iconSizes, function (size) {
+    return (0, _react2.jsx)(_index.Icon, {
+      key: size,
+      icon: _CameraIrisIcon["default"],
+      size: size,
+      title: {
+        name: 'Camera'
+      }
+    });
   })), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "md",

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

@@ -19,8 +19,10 @@ export type PlacementAxis = Axis | 'center';
 export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
 export type ModalSizeProps = 'extra-small' | 'small' | 'medium' | 'large' | 'full';
 type IconTShirtSize = 'xxs' | 'xs' | 'sm' | 'md';
+type IconSizeRange = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type NextGenIconTShirtSize = `icon-${IconSizeRange}`;
 type pixelSize = 'em' | 'px' | 'rem';
-export type IconSize = IconTShirtSize | number | `${number}${pixelSize}`;
+export type IconSize = IconTShirtSize | NextGenIconTShirtSize | number | `${number}${pixelSize}`;
 export type overflowWrap = 'normal' | 'break-word' | 'anywhere' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
 export type wordBreak = 'normal' | 'break-all' | 'keep-all' | 'break-word' | 'initial' | 'inherit';
 export type wordWrap = 'normal' | 'break-word' | 'initial' | 'inherit';

package/lib/components/Icon/Icon.js

@@ -12,14 +12,19 @@ import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
 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 } from 'react';
-import { useTShirtSize } from '../../hooks';
+import { useGetTheme, useTShirtSize } from '../../hooks';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
   var color = props.color,
     IconComponent = props.icon,
-    sx = props.sx;
-  var _useTShirtSize = useTShirtSize(props),
+    sx = props.sx,
+    size = props.size;
+  var theme = useGetTheme();
+  var _useTShirtSize = useTShirtSize({
+      size: size,
+      sizes: theme.tShirtSizes
+    }),
     sizeProps = _useTShirtSize.sizeProps;
   var title = props.title || (_typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name

package/lib/components/IconWrapper/IconWrapper.js

@@ -11,9 +11,8 @@ 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 React, { forwardRef } from 'react';
-import { useStatusClasses, useTShirtSize } from '../../hooks';
+import { useGetTheme, useStatusClasses, useTShirtSize } from '../../hooks';
 import { Box, Icon } from '../../index';
-import { iconWrapperSizes } from '../../utils/devUtils/constants/tShirtSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var icon = props.icon,
@@ -25,10 +24,11 @@ var IconWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     className = props.className,
     isCircle = props.isCircle,
     sx = props.sx;
-  var _useTShirtSize = useTShirtSize(_objectSpread({}, {
+  var theme = useGetTheme();
+  var _useTShirtSize = useTShirtSize({
       size: size,
-      sizes: iconWrapperSizes
-    })),
+      sizes: theme.iconWrapperSizes
+    }),
     sizeProps = _useTShirtSize.sizeProps;
   var _useStatusClasses = useStatusClasses(className, {
       isCircle: isCircle

package/lib/hooks/useTShirtSize/useTShirtSize.js

@@ -1,5 +1,6 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import { useMemo } from 'react';
-import { tShirtSizes } from '../../utils/devUtils/constants/tShirtSizes';
+import tShirtSizes from '../../styles/themes/astro/customProperties/tShirtSizes';
 
 /**
  * A custom hook which returns the pixel value of a tShirtSize.
@@ -20,11 +21,17 @@ var useTShirtSize = function useTShirtSize(_ref) {
     }
     return sizes === null || sizes === void 0 ? void 0 : sizes[size];
   }, [size, sizes]);
-  var sizeProps = {
-    size: value ? "".concat(value, "px") : size
-  };
+  if (typeof value === 'string' && (_includesInstanceProperty(value).call(value, 'px') || _includesInstanceProperty(value).call(value, 'em') || _includesInstanceProperty(value).call(value, 'rem'))) {
+    return {
+      sizeProps: {
+        size: value || size
+      }
+    };
+  }
   return {
-    sizeProps: sizeProps
+    sizeProps: {
+      size: value ? "".concat(value, "px") : size
+    }
   };
 };
 export default useTShirtSize;

package/lib/hooks/useTShirtSize/useTShirtSize.test.js

@@ -1,12 +1,11 @@
 import { renderHook } from '@testing-library/react';
+import nextGenTShirtSizes from '../../styles/themes/next-gen/customProperties/tShirtSizes';
 import { iconWrapperSizes } from '../../utils/devUtils/constants/tShirtSizes';
 import useTShirtSize from './useTShirtSize';
 describe('useTShirtSize', function () {
   beforeEach(function () {
     process.env.NODE_ENV = 'development';
-    global.console.warn = function () {
-      return jest.mock();
-    }; // eslint-disable-line no-console
+    global.console.warn = jest.fn(); // eslint-disable-line no-console
   });
 
   afterEach(function () {
@@ -49,14 +48,30 @@ test('returns size value if size is a tshirt value', function () {
   };
   expect(result.current).toEqual(obj);
 });
-test('returns size value if size is a string value', function () {
+test('returns size value if size is a t-shirt value', function () {
   var props = {
-    size: '20px'
+    size: 'icon-500',
+    sizes: nextGenTShirtSizes
   };
   var _renderHook2 = renderHook(function () {
       return useTShirtSize(props);
     }),
     result = _renderHook2.result;
+  var obj = {
+    sizeProps: {
+      size: '3rem'
+    }
+  };
+  expect(result.current).toEqual(obj);
+});
+test('returns size value if size is a string value', function () {
+  var props = {
+    size: '20px'
+  };
+  var _renderHook3 = renderHook(function () {
+      return useTShirtSize(props);
+    }),
+    result = _renderHook3.result;
   var obj = {
     sizeProps: {
       size: '20px'
@@ -68,10 +83,10 @@ test('returns size value if size is a number value', function () {
   var props = {
     size: 20
   };
-  var _renderHook3 = renderHook(function () {
+  var _renderHook4 = renderHook(function () {
       return useTShirtSize(props);
     }),
-    result = _renderHook3.result;
+    result = _renderHook4.result;
   var obj = {
     sizeProps: {
       size: 20
@@ -84,10 +99,10 @@ test('using custom sizes, returns size value if size is a string value', functio
     size: '20px',
     sizes: iconWrapperSizes
   };
-  var _renderHook4 = renderHook(function () {
+  var _renderHook5 = renderHook(function () {
       return useTShirtSize(props);
     }),
-    result = _renderHook4.result;
+    result = _renderHook5.result;
   var obj = {
     sizeProps: {
       size: '20px'

package/lib/styles/themes/astro/customProperties/index.js

@@ -1,6 +1,9 @@
 import icons from './icons';
 import styles from './styles';
+import tShirtSizes, { iconWrapperSizes } from './tShirtSizes';
 export var astroThemeValues = {
   icons: icons,
-  styles: styles
+  styles: styles,
+  tShirtSizes: tShirtSizes,
+  iconWrapperSizes: iconWrapperSizes
 };

package/lib/styles/themes/astro/customProperties/tShirtSizes.js

@@ -0,0 +1,11 @@
+export default {
+  xxs: 9,
+  xs: 15,
+  sm: 20,
+  md: 25
+};
+export var iconWrapperSizes = {
+  sm: 18,
+  md: 24,
+  lg: 48
+};

package/lib/styles/themes/next-gen/customProperties/index.js

@@ -1,6 +1,9 @@
 import icons from './icons';
 import styles from './styles';
+import tShirtSizes, { iconWrapperSizes } from './tShirtSizes';
 export var nextGenThemeValues = {
   styles: styles,
-  icons: icons
+  icons: icons,
+  tShirtSizes: tShirtSizes,
+  iconWrapperSizes: iconWrapperSizes
 };

package/lib/styles/themes/next-gen/customProperties/tShirtSizes.js

@@ -0,0 +1,20 @@
+export default {
+  xxs: '.875rem',
+  'icon-100': '.875rem',
+  xs: '1.125rem',
+  'icon-200': '1.125rem',
+  sm: '1.5rem',
+  'icon-300': '1.5rem',
+  md: '2.25rem',
+  'icon-400': '2.25rem',
+  'icon-500': '3rem',
+  'icon-600': '3.75rem',
+  'icon-700': '4.5rem',
+  'icon-800': '5.25rem',
+  'icon-900': '6rem'
+};
+export var iconWrapperSizes = {
+  sm: 18,
+  md: 24,
+  lg: 48
+};

package/lib/styles/themes/next-gen/stories/StickerSheetComponent.js

@@ -1,5 +1,6 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
+import CameraIrisIcon from '@pingux/mdi-react/CameraIrisIcon';
 import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
 import { Avatar, Badge, Box, Button, Card, CheckboxField, Icon, IconButton, IconWrapper, Item, Menu, Messages, MultivaluesField, OverlayProvider, PopoverMenu, RadioField, RadioGroupField, SearchField, SelectField, Tab, Tabs, Text, TextAreaField, TextField } from '../../../../index';
 import statuses from '../../../../utils/devUtils/constants/statuses';
@@ -50,6 +51,7 @@ var tabs = [{
   name: 'Tab 3',
   children: 'Tab 3 body'
 }];
+var iconSizes = ['icon-100', 'icon-200', 'icon-300', 'icon-400', 'icon-500', 'icon-600', 'icon-700', 'icon-800', 'icon-900'];
 var StickerSheetComponent = function StickerSheetComponent() {
   return ___EmotionJSX(Box, {
     sx: {
@@ -122,6 +124,20 @@ var StickerSheetComponent = function StickerSheetComponent() {
       icon: DeleteIcon,
       color: color
     });
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    alignContent: "center",
+    flexWrap: "wrap"
+  }, _mapInstanceProperty(iconSizes).call(iconSizes, function (size) {
+    return ___EmotionJSX(Icon, {
+      key: size,
+      icon: CameraIrisIcon,
+      size: size,
+      title: {
+        name: 'Camera'
+      }
+    });
   })), ___EmotionJSX(Box, {
     isRow: true,
     gap: "md",

package/package.json

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