@pingux/astro 2.91.0-alpha.1 → 2.92.0-alpha.0

package/lib/cjs/components/NavBarSection/NavBarItemHeader.js

@@ -13,10 +13,9 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _react = _interopRequireWildcard(require("react"));
-var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
-var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon"));
 var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
+var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _index = require("../../index");
 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); }
@@ -34,12 +33,15 @@ var NavBarItemHeader = function NavBarItemHeader(_ref) {
 var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
   var _context;
   var item = _ref2.item;
-  // const { item } = props;
   var icon = item.icon,
     key = item.key,
     className = item.className,
     heading = item.heading;
   var navBarState = (0, _NavBarContext.useNavBarContext)();
+  var _useGetTheme = (0, _useGetTheme2["default"])(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var selectedKey = navBarState.selectedKey,
     setExpandedKeys = navBarState.setExpandedKeys,
     expandedKeys = navBarState.expandedKeys,
@@ -88,7 +90,7 @@ var NavBarSectionItemHeader = function NavBarSectionItemHeader(_ref2) {
       ml: 'auto'
     }
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: isExpanded ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
+    icon: isExpanded ? MenuUp : MenuDown,
     size: navStyles.navBarItemHeaderIconSize,
     sx: {
       color: getIconColor(),

package/lib/cjs/components/NavSideBar/NavSideBarSectionHeader.js

@@ -16,10 +16,9 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
-var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon"));
 var _NavBarContext = require("../../context/NavBarContext");
 var _hooks = require("../../hooks");
+var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "icon", "items", "id", "className", "onExpandedChange"];
@@ -34,6 +33,10 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     className = props.className,
     onExpandedChange = props.onExpandedChange,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useGetTheme = (0, _useGetTheme2["default"])(),
+    icons = _useGetTheme.icons;
+  var MenuUp = icons.MenuUp,
+    MenuDown = icons.MenuDown;
   var navBarState = (0, _NavBarContext.useNavBarContext)();
   var expandedKeys = navBarState.expandedKeys,
     setExpandedKeys = navBarState.setExpandedKeys,
@@ -84,7 +87,7 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
       ml: 'auto'
     }
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: isExpanded ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
+    icon: isExpanded ? MenuUp : MenuDown,
     size: navStyles.navBarItemHeaderIconSize,
     variant: variant,
     mr: "0",

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

@@ -17,6 +17,7 @@ var _HelpCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/H
 var _MoonWaningCrescentIcon = _interopRequireDefault(require("@pingux/mdi-react/MoonWaningCrescentIcon"));
 var _WhiteBalanceSunnyIcon = _interopRequireDefault(require("@pingux/mdi-react/WhiteBalanceSunnyIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _index = require("../../index");
 var _images = require("../../utils/devUtils/constants/images");
 var _HeaderAccountMenu = _interopRequireDefault(require("./HeaderAccountMenu"));
@@ -53,8 +54,11 @@ var iconButtonSX = {
   px: 'sm'
 };
 var placeholderSeparator = {
-  bg: 'gray-300',
-  flexShrink: 0
+  bg: 'border.base',
+  flexShrink: 0,
+  mr: '0px',
+  ml: '10px',
+  height: '28px'
 };
 
 // Breakpoints for display property
@@ -72,35 +76,30 @@ var Default = function Default(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isLoggedIn = _useState2[0],
     setIsLoggedIn = _useState2[1];
+  var _useGetTheme = (0, _useGetTheme2["default"])(),
+    icons = _useGetTheme.icons;
   return (0, _react2.jsx)(_index.Box, {
     p: "0"
   }, (0, _react2.jsx)(_index.NavigationHeader, (0, _extends2["default"])({}, args, {
     isSticky: true,
     "aria-labelledby": "next-gen-header"
-  }), (0, _react2.jsx)(_index.Link, {
-    href: "#",
-    variant: "navigationHeader.logoBand"
-  }, (0, _react2.jsx)(_index.Box, {
+  }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
     justifyContent: "center",
     py: "sm",
     flex: "0 0 auto"
-  }, (0, _react2.jsx)(_index.Image, {
-    src: _images.pingLogoHorizontal,
-    alt: "Ping Identity Logo",
-    mr: "md",
-    sx: {
-      height: '24px'
-    }
-  }), (0, _react2.jsx)(_index.Separator, {
+  }, icons.pingLogoHorizontalSmall, (0, _react2.jsx)(_index.Separator, {
     orientation: "vertical",
     sx: placeholderSeparator,
     style: {
       height: '28px',
-      margin: '0'
+      marginLeft: '10px'
     }
-  }), (0, _react2.jsx)(_index.Text, {
+  }), (0, _react2.jsx)(_index.Link, {
+    href: "#",
+    variant: "navigationHeader.logoBand"
+  }, (0, _react2.jsx)(_index.Text, {
     as: "h2",
     variant: "navigationHeader.headerPlaceholder",
     id: "next-gen-header"

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

@@ -342,7 +342,11 @@ var Expandable = function Expandable() {
     label: "Log field Description",
     defaultValue: "The Value of the Text Input"
   }));
-  var footer = (0, _react2.jsx)(_index.ButtonBar, null, (0, _react2.jsx)(_index.Button, {
+  var footer = (0, _react2.jsx)(_index.ButtonBar, {
+    sx: {
+      backgroundColor: 'background.base'
+    }
+  }, (0, _react2.jsx)(_index.Button, {
     onPress: onCloseHandler,
     variant: "primary"
   }, "Save"), (0, _react2.jsx)(_index.Button, {

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -21,9 +21,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
+var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
@@ -72,6 +72,9 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
+  var _useGetTheme = (0, _useGetTheme2["default"])(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown;
   var helperTextId = (0, _react.useMemo)(function () {
     return (0, _uuid.v4)();
   }, []);
@@ -95,7 +98,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-hidden": "true",
     variant: "forms.select.arrow"
   }, (0, _react2.jsx)(_Icon["default"], {
-    icon: _MenuDownIcon["default"],
+    icon: MenuDown,
     title: {
       name: 'Menu down'
     },

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

@@ -63,13 +63,13 @@ var _default = {
 exports["default"] = _default;
 var tabs = [{
   name: 'Tab 1',
-  children: 'Tab 1 body'
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 1 body")
 }, {
   name: 'Tab 2',
-  children: 'Tab 2 body'
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 2 body")
 }, {
   name: 'Tab 3',
-  children: 'Tab 3 body'
+  children: (0, _react2.jsx)(_index.Text, null, "Tab 3 body")
 }];
 var Uncontrolled = function Uncontrolled(args) {
   return (0, _react2.jsx)(_index.Tabs, (0, _extends2["default"])({

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

@@ -7,6 +7,7 @@ export { default as useDeprecationWarning } from './useDeprecationWarning';
 export { default as useDevelopmentWarning } from './useDevelopmentWarning';
 export { default as useFallbackImage } from './useFallbackImage';
 export { default as useField } from './useField';
+export { default as useGetTheme } from './useGetTheme';
 export { default as useLabelHeight } from './useLabelHeight';
 export { default as useLocalOrForwardRef } from './useLocalOrForwardRef';
 export { default as useModalState } from './useModalState';

package/lib/cjs/hooks/index.js

@@ -59,6 +59,12 @@ _Object$defineProperty(exports, "useField", {
     return _useField["default"];
   }
 });
+_Object$defineProperty(exports, "useGetTheme", {
+  enumerable: true,
+  get: function get() {
+    return _useGetTheme["default"];
+  }
+});
 _Object$defineProperty(exports, "useLabelHeight", {
   enumerable: true,
   get: function get() {
@@ -146,6 +152,7 @@ var _useDeprecationWarning = _interopRequireDefault(require("./useDeprecationWar
 var _useDevelopmentWarning = _interopRequireDefault(require("./useDevelopmentWarning"));
 var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));
 var _useField = _interopRequireDefault(require("./useField"));
+var _useGetTheme = _interopRequireDefault(require("./useGetTheme"));
 var _useLabelHeight = _interopRequireDefault(require("./useLabelHeight"));
 var _useLocalOrForwardRef = _interopRequireDefault(require("./useLocalOrForwardRef"));
 var _useModalState = _interopRequireDefault(require("./useModalState"));

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

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

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

@@ -0,0 +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
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useGetTheme["default"];
+  }
+});
+var _useGetTheme = _interopRequireDefault(require("./useGetTheme"));

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const baseState: {
+    isNextGen: boolean;
+    isAstro: boolean;
+    isNextGenDark: boolean;
+    isCustom: boolean;
+};
+declare const useGetTheme: () => {
+    styles: {
+        navButtonEstHeight: number;
+    };
+    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;
+    };
+    themeState: {
+        isNextGen: boolean;
+        isAstro: boolean;
+        isNextGenDark: boolean;
+        isCustom: boolean;
+    };
+    name: string;
+};
+export default useGetTheme;

package/lib/cjs/hooks/useGetTheme/useGetTheme.js

@@ -0,0 +1,82 @@
+"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.baseState = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _customProperties = require("../../styles/themeOverrides/nextGenDarkMode/customProperties");
+var _customProperties2 = require("../../styles/themes/astro/customProperties");
+var _customProperties3 = require("../../styles/themes/next-gen/customProperties");
+var _themes = require("../../utils/devUtils/constants/themes");
+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; } /* eslint-disable no-else-return */
+var baseState = {
+  isNextGen: false,
+  isAstro: false,
+  isNextGenDark: false,
+  isCustom: false
+};
+exports.baseState = baseState;
+var astroState = _objectSpread({
+  name: _themes.themes.ASTRO,
+  themeState: _objectSpread(_objectSpread({}, baseState), {}, {
+    isAstro: true
+  })
+}, _customProperties2.astroThemeValues);
+var nextGenState = _objectSpread({
+  themeState: _objectSpread(_objectSpread({}, baseState), {}, {
+    isNextGen: true
+  }),
+  name: _themes.themes.NEXT_GEN
+}, _customProperties3.nextGenThemeValues);
+var nextGenDarkState = _objectSpread({
+  name: _themes.themes.NEXT_GEN_DARK,
+  themeState: _objectSpread(_objectSpread({}, baseState), {}, {
+    isNextGen: true,
+    isNextGenDark: true
+  })
+}, _customProperties.nextGenDarkThemeValues);
+var customThemeState = _objectSpread({
+  themeState: _objectSpread(_objectSpread({}, baseState), {}, {
+    isCustom: true
+  }),
+  name: 'custom'
+}, _customProperties2.astroThemeValues);
+var getTheme = function getTheme(theme) {
+  if (theme === _themes.themes.NEXT_GEN) {
+    return _objectSpread({}, nextGenState);
+  }
+  if (theme === _themes.themes.ASTRO) {
+    return _objectSpread({}, astroState);
+  }
+  if (theme === _themes.themes.NEXT_GEN_DARK) {
+    return _objectSpread({}, nextGenDarkState);
+  }
+  return _objectSpread({}, customThemeState);
+};
+var useGetTheme = function useGetTheme() {
+  var theme = (0, _react2.useTheme)();
+  var _useState = (0, _react.useState)(getTheme(theme.name)),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    themeObject = _useState2[0],
+    setThemeObject = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setThemeObject(getTheme(theme.name));
+  }, [theme.name]);
+  return themeObject;
+};
+var _default = useGetTheme;
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _ = require("../..");
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _themes = require("../../utils/devUtils/constants/themes");
+var _useGetTheme = _interopRequireWildcard(require("./useGetTheme"));
+var _react3 = 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; }
+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 testChild = (0, _react3.jsx)("p", null, "Lets see the theme!");
+var wrapper = function wrapper(_ref) {
+  var _children$props;
+  var children = _ref.children;
+  return (0, _react3.jsx)(_.AstroProvider, {
+    theme: children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 || (_children$props = _children$props.renderCallbackProps) === null || _children$props === void 0 ? void 0 : _children$props.theme
+  }, children);
+};
+describe('useGetTheme', function () {
+  test('should return NextGen theme', function () {
+    var _renderHook = (0, _react2.renderHook)(function () {
+        return (0, _useGetTheme["default"])();
+      }, {
+        wrapper: wrapper,
+        initialProps: {
+          children: testChild,
+          theme: _.NextGenTheme
+        }
+      }),
+      result = _renderHook.result;
+    expect(result.current.name).toBe(_themes.themes.NEXT_GEN);
+    expect(result.current.themeState).toEqual(_objectSpread(_objectSpread({}, _useGetTheme.baseState), {}, {
+      isNextGen: true
+    }));
+  });
+});
+describe('useGetTheme', function () {
+  test('should return NextGenDark theme', function () {
+    var _renderHook2 = (0, _react2.renderHook)(function () {
+        return (0, _useGetTheme["default"])();
+      }, {
+        wrapper: wrapper,
+        initialProps: {
+          children: testChild,
+          theme: _.NextGenDarkTheme
+        }
+      }),
+      result = _renderHook2.result;
+    expect(result.current.name).toBe(_themes.themes.NEXT_GEN_DARK);
+    expect(result.current.themeState).toEqual(_objectSpread(_objectSpread({}, _useGetTheme.baseState), {}, {
+      isNextGen: true,
+      isNextGenDark: true
+    }));
+  });
+});
+describe('useGetTheme', function () {
+  test('should return Astro theme', function () {
+    var _renderHook3 = (0, _react2.renderHook)(function () {
+        return (0, _useGetTheme["default"])();
+      }, {
+        wrapper: wrapper,
+        initialProps: {
+          children: testChild,
+          theme: _theme["default"]
+        }
+      }),
+      result = _renderHook3.result;
+    expect(result.current.name).toBe(_themes.themes.ASTRO);
+    expect(result.current.themeState).toEqual(_objectSpread(_objectSpread({}, _useGetTheme.baseState), {}, {
+      isAstro: true
+    }));
+  });
+});

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

@@ -15,15 +15,17 @@ var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
  */
 
 var useTShirtSize = function useTShirtSize(_ref) {
-  var size = _ref.size;
+  var size = _ref.size,
+    _ref$sizes = _ref.sizes,
+    sizes = _ref$sizes === void 0 ? _tShirtSizes.tShirtSizes : _ref$sizes;
   var value = (0, _react.useMemo)(function () {
     if (size === undefined) {
       // eslint-disable-next-line no-console
       console.warn('useTShirtSize hook requires a size prop.');
       return undefined;
     }
-    return _tShirtSizes.tShirtSizes === null || _tShirtSizes.tShirtSizes === void 0 ? void 0 : _tShirtSizes.tShirtSizes[size];
-  }, [size]);
+    return sizes === null || sizes === void 0 ? void 0 : sizes[size];
+  }, [size, sizes]);
   var sizeProps = {
     size: value ? "".concat(value, "px") : size
   };

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

@@ -2,6 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _react = require("@testing-library/react");
+var _tShirtSizes = require("../../utils/devUtils/constants/tShirtSizes");
 var _useTShirtSize = _interopRequireDefault(require("./useTShirtSize"));
 describe('useTShirtSize', function () {
   beforeEach(function () {
@@ -80,4 +81,20 @@ test('returns size value if size is a number value', function () {
     }
   };
   expect(result.current).toEqual(obj);
+});
+test('using custom sizes, returns size value if size is a string value', function () {
+  var props = {
+    size: '20px',
+    sizes: _tShirtSizes.iconWrapperSizes
+  };
+  var _renderHook4 = (0, _react.renderHook)(function () {
+      return (0, _useTShirtSize["default"])(props);
+    }),
+    result = _renderHook4.result;
+  var obj = {
+    sizeProps: {
+      size: '20px'
+    }
+  };
+  expect(result.current).toEqual(obj);
 });

package/lib/cjs/index.d.ts

@@ -76,6 +76,8 @@ export { default as IconButton } from './components/IconButton';
 export * from './components/IconButton';
 export { default as IconButtonToggle } from './components/IconButtonToggle';
 export * from './components/IconButtonToggle';
+export { default as IconWrapper } from './components/IconWrapper';
+export * from './components/IconWrapper';
 export { default as Image } from './components/Image';
 export * from './components/Image';
 export { default as ImageUploadField } from './components/ImageUploadField';
@@ -187,6 +189,7 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
+export { default as NextGenDarkTheme } from './styles/themeOverrides/nextGenDarkMode';
 export { default as NextGenTheme } from './styles/themes/next-gen';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';