@pingux/astro 2.91.0 → 2.92.0-alpha.1

package/lib/components/IconWrapper/IconWrapper.mdx

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/IconWrapper/IconWrapper" />
+
+# IconWrapper
+
+This is a convenience component that provides an easy way to size and style Icons and their backgrounds.
+
+### Required props
+
+This component requires three props: size, color, and icon.
+
+### Required components
+This component can be used independently and does not require any additional components.

package/lib/components/IconWrapper/IconWrapper.stories.js

@@ -0,0 +1,44 @@
+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";
+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 DeleteIcon from '@pingux/mdi-react/DeleteIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { IconWrapper } from '../../index';
+import IconWrapperReadme from './IconWrapper.mdx';
+import { iconWrapperArgTypes } from './iconWrapperAttributes';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/IconWrapper',
+  component: IconWrapper,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconWrapperReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: _objectSpread({}, iconWrapperArgTypes),
+  args: {
+    icon: DeleteIcon,
+    color: 'cyan',
+    size: 'sm',
+    title: {
+      name: 'delete Icon'
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(IconWrapper, args);
+};

package/lib/components/IconWrapper/IconWrapper.test.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import Earth from '@pingux/mdi-react/EarthIcon';
+import { render, screen } from '@testing-library/react';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import IconWrapper from './IconWrapper';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-icon';
+var defaultProps = {
+  iconProps: {
+    'data-testid': testId
+  },
+  title: {
+    name: 'earth icon'
+  },
+  icon: Earth,
+  size: 'md'
+};
+var getComponent = function getComponent() {
+  return render(___EmotionJSX(IconWrapper, _extends({}, defaultProps, {
+    size: "sm"
+  })));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(IconWrapper, _extends({}, props, defaultProps, {
+      size: "sm"
+    }));
+  }
+});
+test('default icon', function () {
+  getComponent();
+  var icon = screen.getByTestId(testId);
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+});

package/lib/components/IconWrapper/iconWrapperAttributes.js

@@ -0,0 +1,23 @@
+var colorOptions = ['cyan', 'orange', 'red', 'green', 'purple', 'yellow', 'teal', 'pink'];
+var sizes = ['sm', 'md', 'lg'];
+export var iconWrapperArgTypes = {
+  color: {
+    options: colorOptions,
+    control: {
+      type: 'select'
+    },
+    description: 'The color applied to the IconWrapper will style both the background and the icon.'
+  },
+  icon: {
+    control: {
+      type: 'none'
+    },
+    description: 'The icon to render. List of icons at https://materialdesignicons.com/'
+  },
+  size: {
+    options: sizes,
+    control: {
+      type: 'select'
+    }
+  }
+};

package/lib/components/IconWrapper/index.js

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

package/lib/components/Link/Link.stories.js

@@ -4,7 +4,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Link } from '../../index';
+import { Link, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import LinkReadme from './Link.mdx';
@@ -63,7 +63,7 @@ export var Default = function Default(_ref) {
     style: {
       width: 'max-content'
     }
-  }, ___EmotionJSX(Link, args, "Lorem ipsum"), ' ', "dolor sit amet, consectetur adipiscing elit");
+  }, ___EmotionJSX(Text, null, ___EmotionJSX(Link, args, "Lorem ipsum"), ' ', "dolor sit amet, consectetur adipiscing elit"));
 };
 Default.parameters = {
   design: {

package/lib/components/ListView/ListViewExpandableItem.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useContext, useRef } from 'react';
-import MenuDownIcon from '@pingux/mdi-react/MenuDownIcon';
-import MenuUpIcon from '@pingux/mdi-react/MenuUpIcon';
 import useExpandableListViewItem from '../../hooks/useExpandableListViewItem/useExpandableListViewItem';
+import useGetTheme from '../../hooks/useGetTheme';
 import { Box, Icon } from '../../index';
 import { ListViewContext } from './ListViewContext';
 import ListViewFocusWrapper from './ListViewFocusWrapper';
@@ -21,6 +20,10 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
     isHoverable = props.isHoverable,
     isFocusable = props.isFocusable,
     className = props.className;
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var _useContext = useContext(ListViewContext),
     state = _useContext.state;
   var expandableItemRowRef = useRef(null);
@@ -61,7 +64,7 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
     sx: {
       ml: 'auto'
     },
-    icon: isExpanded ? MenuUpIcon : MenuDownIcon,
+    icon: isExpanded ? MenuUp : MenuDown,
     title: {
       name: "".concat(key, " expand icon button")
     }

package/lib/components/NavBar/NavBar.stories.js

@@ -13,6 +13,7 @@ import ViewDashboard from '@pingux/mdi-react/ViewDashboardIcon';
 import ViewGridPlusOutline from '@pingux/mdi-react/ViewGridPlusOutlineIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { useGetTheme } from '../../hooks';
 import { Box, Link, NavBar, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection, Separator } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import NavBarReadme from './NavBar.mdx';
@@ -367,6 +368,8 @@ var thirdData = [{
   }, "Group")]
 }];
 export var Default = function Default() {
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
   return ___EmotionJSX(NavBar, null, ___EmotionJSX(Box, {
     padding: "md",
     key: "top-logo-parent"
@@ -374,7 +377,7 @@ export var Default = function Default() {
     "aria-label": "home link",
     href: "https://pingidentity.com",
     target: "_blank"
-  }, logo)), ___EmotionJSX(Separator, {
+  }, icons.pingLogoHorizontalSmall)), ___EmotionJSX(Separator, {
     m: 0,
     backgroundColor: "neutral.60"
   }), ___EmotionJSX(Box, {
@@ -412,6 +415,8 @@ export var Controlled = function Controlled() {
     _useState2 = _slicedToArray(_useState, 2),
     selectedKey = _useState2[0],
     setSelectedKey = _useState2[1];
+  var _useGetTheme2 = useGetTheme(),
+    icons = _useGetTheme2.icons;
   var customData = [{
     icon: Earth,
     key: 'Environment',
@@ -437,7 +442,7 @@ export var Controlled = function Controlled() {
     "aria-label": "home link",
     href: "https://pingidentity.com",
     target: "_blank"
-  }, logo)), ___EmotionJSX(Separator, {
+  }, icons.pingLogoHorizontalSmall)), ___EmotionJSX(Separator, {
     m: "0",
     backgroundColor: "neutral.60",
     key: "top-separator"
@@ -465,6 +470,8 @@ export var Controlled = function Controlled() {
   })));
 };
 export var AutoCollapse = function AutoCollapse() {
+  var _useGetTheme3 = useGetTheme(),
+    icons = _useGetTheme3.icons;
   return ___EmotionJSX(NavBar, {
     isAutoСollapsible: true
   }, ___EmotionJSX(Box, {
@@ -474,7 +481,7 @@ export var AutoCollapse = function AutoCollapse() {
     "aria-label": "home link",
     href: "https://pingidentity.com",
     target: "_blank"
-  }, logo)), ___EmotionJSX(Separator, {
+  }, icons.pingLogoHorizontalSmall)), ___EmotionJSX(Separator, {
     m: 0,
     backgroundColor: "neutral.60"
   }), ___EmotionJSX(Box, {

package/lib/components/NavBarSection/NavBarItemBody.js

@@ -15,6 +15,7 @@ import React, { forwardRef, Fragment } from 'react';
 import { useKeyboard } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { useNavBarContext } from '../../context/NavBarContext';
+import useGetTheme from '../../hooks/useGetTheme';
 import { Box, Separator, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBarItemBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -25,6 +26,8 @@ var NavBarItemBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isExpanded = _ref.isExpanded,
     isTransitioning = _ref.isTransitioning;
   var state = useNavBarContext();
+  var _useGetTheme = useGetTheme(),
+    styles = _useGetTheme.styles;
   var renderSubTitle = function renderSubTitle(child) {
     var _child$hasSeparator = child.hasSeparator,
       hasSeparator = _child$hasSeparator === void 0 ? true : _child$hasSeparator,
@@ -49,7 +52,7 @@ var NavBarItemBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var shouldShowTransition = isExpanded && isTransitioning;
   var getEstimatedHeight = function getEstimatedHeight() {
     if (item !== null && item !== void 0 && item.children && typeof (item === null || item === void 0 ? void 0 : item.children.length) === 'number') {
-      return (item !== null && item !== void 0 && item.itemHeight ? item.itemHeight : 40) * item.children.length;
+      return (item !== null && item !== void 0 && item.itemHeight ? item.itemHeight : styles.navButtonEstHeight) * item.children.length;
     }
     return null;
   };

package/lib/components/NavBarSection/NavBarItemHeader.js

@@ -2,10 +2,9 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useEffect } from 'react';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
-import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useNavBarContext } from '../../context/NavBarContext';
 import { useStatusClasses } from '../../hooks';
+import useGetTheme from '../../hooks/useGetTheme';
 import { Box, Icon, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBarItemHeader = function NavBarItemHeader(_ref) {
@@ -21,12 +20,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 = useNavBarContext();
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown,
+    MenuUp = icons.MenuUp;
   var selectedKey = navBarState.selectedKey,
     setExpandedKeys = navBarState.setExpandedKeys,
     expandedKeys = navBarState.expandedKeys,

package/lib/components/NavSideBar/NavSideBarSectionHeader.js

@@ -6,10 +6,9 @@ import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useEffect } from 'react';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
-import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useNavBarContext } from '../../context/NavBarContext';
 import { useStatusClasses } from '../../hooks';
+import useGetTheme from '../../hooks/useGetTheme';
 import { Box, Button, Icon, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
@@ -21,6 +20,10 @@ var NavSideBarSectionHeader = function NavSideBarSectionHeader(props) {
     className = props.className,
     onExpandedChange = props.onExpandedChange,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var MenuUp = icons.MenuUp,
+    MenuDown = icons.MenuDown;
   var navBarState = useNavBarContext();
   var expandedKeys = navBarState.expandedKeys,
     setExpandedKeys = navBarState.setExpandedKeys,

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

@@ -6,8 +6,9 @@ import HelpCircleOutlineIcon from '@pingux/mdi-react/HelpCircleOutlineIcon';
 import MoonWaningCrescentIcon from '@pingux/mdi-react/MoonWaningCrescentIcon';
 import WhiteBalanceSunnyIcon from '@pingux/mdi-react/WhiteBalanceSunnyIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Icon, IconButton, IconButtonToggle, Image, Item, Link, Menu, NavigationHeader, OverlayProvider, PopoverMenu, Separator, Text } from '../../index';
-import { pingLogoHorizontal, userImage } from '../../utils/devUtils/constants/images';
+import useGetTheme from '../../hooks/useGetTheme';
+import { Box, Icon, IconButton, IconButtonToggle, Item, Link, Menu, NavigationHeader, OverlayProvider, PopoverMenu, Separator, Text } from '../../index';
+import { userImage } from '../../utils/devUtils/constants/images';
 import HeaderAccountMenu from './HeaderAccountMenu';
 import NavigationHeaderReadme from './NavigationHeader.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -39,8 +40,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
@@ -58,35 +62,30 @@ export var Default = function Default(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isLoggedIn = _useState2[0],
     setIsLoggedIn = _useState2[1];
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
   return ___EmotionJSX(Box, {
     p: "0"
   }, ___EmotionJSX(NavigationHeader, _extends({}, args, {
     isSticky: true,
     "aria-labelledby": "next-gen-header"
-  }), ___EmotionJSX(Link, {
-    href: "#",
-    variant: "navigationHeader.logoBand"
-  }, ___EmotionJSX(Box, {
+  }), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
     justifyContent: "center",
     py: "sm",
     flex: "0 0 auto"
-  }, ___EmotionJSX(Image, {
-    src: pingLogoHorizontal,
-    alt: "Ping Identity Logo",
-    mr: "md",
-    sx: {
-      height: '24px'
-    }
-  }), ___EmotionJSX(Separator, {
+  }, icons.pingLogoHorizontalSmall, ___EmotionJSX(Separator, {
     orientation: "vertical",
     sx: placeholderSeparator,
     style: {
       height: '28px',
-      margin: '0'
+      marginLeft: '10px'
     }
-  }), ___EmotionJSX(Text, {
+  }), ___EmotionJSX(Link, {
+    href: "#",
+    variant: "navigationHeader.logoBand"
+  }, ___EmotionJSX(Text, {
     as: "h2",
     variant: "navigationHeader.headerPlaceholder",
     id: "next-gen-header"

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

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

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -15,9 +15,9 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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, useMemo } from 'react';
 import { HiddenSelect } from 'react-aria';
-import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
+import useGetTheme from '../../hooks/useGetTheme';
 import { modes } from '../../utils/devUtils/constants/labelModes';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
@@ -62,6 +62,9 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
     others = _objectWithoutProperties(_ref, _excluded);
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var MenuDown = icons.MenuDown;
   var helperTextId = useMemo(function () {
     return uuid();
   }, []);

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

@@ -49,13 +49,13 @@ export default {
 };
 var tabs = [{
   name: 'Tab 1',
-  children: 'Tab 1 body'
+  children: ___EmotionJSX(Text, null, "Tab 1 body")
 }, {
   name: 'Tab 2',
-  children: 'Tab 2 body'
+  children: ___EmotionJSX(Text, null, "Tab 2 body")
 }, {
   name: 'Tab 3',
-  children: 'Tab 3 body'
+  children: ___EmotionJSX(Text, null, "Tab 3 body")
 }];
 export var Uncontrolled = function Uncontrolled(args) {
   return ___EmotionJSX(Tabs, _extends({

package/lib/hooks/index.js

@@ -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/hooks/useGetTheme/index.js

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

package/lib/hooks/useGetTheme/useGetTheme.js

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

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

@@ -0,0 +1,81 @@
+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";
+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 { renderHook } from '@testing-library/react';
+import { AstroProvider, NextGenDarkTheme, NextGenTheme } from '../..';
+import theme from '../../styles/theme';
+import { themes } from '../../utils/devUtils/constants/themes';
+import useGetTheme, { baseState } from './useGetTheme';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testChild = ___EmotionJSX("p", null, "Lets see the theme!");
+var wrapper = function wrapper(_ref) {
+  var _children$props;
+  var children = _ref.children;
+  return ___EmotionJSX(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 = renderHook(function () {
+        return useGetTheme();
+      }, {
+        wrapper: wrapper,
+        initialProps: {
+          children: testChild,
+          theme: NextGenTheme
+        }
+      }),
+      result = _renderHook.result;
+    expect(result.current.name).toBe(themes.NEXT_GEN);
+    expect(result.current.themeState).toEqual(_objectSpread(_objectSpread({}, baseState), {}, {
+      isNextGen: true
+    }));
+  });
+});
+describe('useGetTheme', function () {
+  test('should return NextGenDark theme', function () {
+    var _renderHook2 = renderHook(function () {
+        return useGetTheme();
+      }, {
+        wrapper: wrapper,
+        initialProps: {
+          children: testChild,
+          theme: NextGenDarkTheme
+        }
+      }),
+      result = _renderHook2.result;
+    expect(result.current.name).toBe(themes.NEXT_GEN_DARK);
+    expect(result.current.themeState).toEqual(_objectSpread(_objectSpread({}, baseState), {}, {
+      isNextGen: true,
+      isNextGenDark: true
+    }));
+  });
+});
+describe('useGetTheme', function () {
+  test('should return Astro theme', function () {
+    var _renderHook3 = renderHook(function () {
+        return useGetTheme();
+      }, {
+        wrapper: wrapper,
+        initialProps: {
+          children: testChild,
+          theme: theme
+        }
+      }),
+      result = _renderHook3.result;
+    expect(result.current.name).toBe(themes.ASTRO);
+    expect(result.current.themeState).toEqual(_objectSpread(_objectSpread({}, baseState), {}, {
+      isAstro: true
+    }));
+  });
+});

package/lib/hooks/useTShirtSize/useTShirtSize.js

@@ -9,15 +9,17 @@ import { tShirtSizes } from '../../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 : _ref$sizes;
   var value = useMemo(function () {
     if (size === undefined) {
       // eslint-disable-next-line no-console
       console.warn('useTShirtSize hook requires a size prop.');
       return undefined;
     }
-    return tShirtSizes === null || tShirtSizes === void 0 ? void 0 : tShirtSizes[size];
-  }, [size]);
+    return sizes === null || sizes === void 0 ? void 0 : sizes[size];
+  }, [size, sizes]);
   var sizeProps = {
     size: value ? "".concat(value, "px") : size
   };