@telus-uds/components-web 2.21.1 → 2.22.0

package/lib/WebVideo/WebVideo.js

@@ -4,31 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.VideoProps = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _reactYoutube = _interopRequireDefault(require("react-youtube"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _VideoSplash = _interopRequireDefault(require("../shared/VideoSplash/VideoSplash"));
-
 var _utils = require("../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
 const StyledPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "WebVideo__StyledPlayerContainer",
   componentId: "components-web__sc-327a6k-0"
@@ -37,7 +24,6 @@ const StyledPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withCon
   minWidth: 288,
   outline: 'none'
 });
-
 const StyledYoutubePlayer = /*#__PURE__*/(0, _styledComponents.default)(_reactYoutube.default).withConfig({
   displayName: "WebVideo__StyledYoutubePlayer",
   componentId: "components-web__sc-327a6k-1"
@@ -59,14 +45,13 @@ const aspectRatios = {
     paddingTop: '100%'
   }
 };
-
 const AspectLimiter = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "WebVideo__AspectLimiter",
   componentId: "components-web__sc-327a6k-2"
-})(props => ({ ...aspectRatios[props.aspectRatio],
+})(props => ({
+  ...aspectRatios[props.aspectRatio],
   position: 'relative'
 }));
-
 const WebVideo = _ref => {
   let {
     videoId,
@@ -80,14 +65,11 @@ const WebVideo = _ref => {
     ...rest
   } = _ref;
   const [started, setStarted] = (0, _react.useState)(false);
-
   const initializeYoutubePlayer = event => {
     onStart();
-
     if (beginMuted) {
       event.target.mute();
     }
-
     event.target.setVolume(defaultVolume);
     event.target.playVideo(); // This plays the video after passing the splash screen on mobile.
   };
@@ -121,44 +103,36 @@ const WebVideo = _ref => {
     })
   });
 };
-
-const VideoProps = { ...selectedSystemPropTypes,
-
+const VideoProps = {
+  ...selectedSystemPropTypes,
   /**
    * The video's ID, typically available via the video's URL.
    */
   videoId: _propTypes.default.string.isRequired,
-
   /**
    * The aspect ratio of the player.
    */
   aspectRatio: _propTypes.default.oneOf(['16:9', '4:3', '1:1']),
-
   /**
    * A path of the image that will be displayed on the video's splash screen. If this is undefined, it will pull an image from the defined web video if available.
    */
   posterSrc: _propTypes.default.string,
-
   /**
    * The video's default volume, defined from 1 to 100. Please use the `beginMuted` prop to have the video start silenced.
    */
   defaultVolume: _propTypes.default.number,
-
   /**
    * Defines if the video should start muted.
    */
   beginMuted: _propTypes.default.bool,
-
   /**
    * The video's length, which will be displayed on the splash screen. This is defined in seconds.
    */
   videoLength: _propTypes.default.number.isRequired,
-
   /**
    * The splash screen UI's language as an ISO language code. It currently supports English and French.
    */
   copy: _propTypes.default.oneOf(['en', 'fr']),
-
   /**
    * A function to be run when the play button is pressed on the video splash screen and the video is ready to play.
    */

package/lib/WebVideo/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _WebVideo = _interopRequireDefault(require("./WebVideo"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _WebVideo.default;
 exports.default = _default;

package/lib/baseExports.js

@@ -147,6 +147,12 @@ Object.defineProperty(exports, "Listbox", {
     return _componentsBase.Listbox;
   }
 });
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Modal;
+  }
+});
 Object.defineProperty(exports, "MultiSelectFilter", {
   enumerable: true,
   get: function () {
@@ -369,5 +375,4 @@ Object.defineProperty(exports, "useViewport", {
     return _componentsBase.useViewport;
   }
 });
-
 var _componentsBase = require("@telus-uds/components-base");

package/lib/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Badge: true,
-  Modal: true,
   OrderedList: true,
   PreviewCard: true,
   ResponsiveImage: true,
@@ -122,12 +121,6 @@ Object.defineProperty(exports, "List", {
     return _List.default;
   }
 });
-Object.defineProperty(exports, "Modal", {
-  enumerable: true,
-  get: function () {
-    return _Modal.default;
-  }
-});
 Object.defineProperty(exports, "NavigationBar", {
   enumerable: true,
   get: function () {
@@ -278,85 +271,44 @@ Object.defineProperty(exports, "transformGradient", {
     return _utils.transformGradient;
   }
 });
-
 var _Badge = _interopRequireDefault(require("./Badge"));
-
-var _Modal = _interopRequireDefault(require("./Modal"));
-
 var _OrderedList = _interopRequireDefault(require("./OrderedList"));
-
 var _PreviewCard = _interopRequireDefault(require("./PreviewCard"));
-
 var _ResponsiveImage = _interopRequireDefault(require("./ResponsiveImage"));
-
 var _Ribbon = _interopRequireDefault(require("./Ribbon"));
-
 var _Countdown = _interopRequireDefault(require("./Countdown"));
-
 var _DatePicker = _interopRequireDefault(require("./DatePicker"));
-
 var _Paragraph = _interopRequireDefault(require("./Paragraph"));
-
 var _Span = _interopRequireDefault(require("./Span"));
-
 var _ExpandCollapseMini = _interopRequireDefault(require("./ExpandCollapseMini"));
-
 var _Callout = _interopRequireDefault(require("./Callout"));
-
 var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
-
 var _Footnote = _interopRequireDefault(require("./Footnote"));
-
 var _QuantitySelector = _interopRequireDefault(require("./QuantitySelector"));
-
 var _IconButton = _interopRequireDefault(require("./IconButton"));
-
 var _utils = require("./utils");
-
 var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
-
 var _BlockQuote = _interopRequireDefault(require("./BlockQuote"));
-
 var _OptimizeImage = _interopRequireDefault(require("./OptimizeImage"));
-
 var _Testimonial = _interopRequireDefault(require("./Testimonial"));
-
 var _Toast = _interopRequireDefault(require("./Toast"));
-
 var _Table = _interopRequireDefault(require("./Table"));
-
 var _Image = _interopRequireDefault(require("./Image"));
-
 var _WebVideo = _interopRequireDefault(require("./WebVideo"));
-
 var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
-
 var _Spinner = _interopRequireDefault(require("./Spinner"));
-
 var _VideoPicker = _interopRequireDefault(require("./VideoPicker"));
-
 var _Video = _interopRequireDefault(require("./Video"));
-
 var _StoryCard = _interopRequireDefault(require("./StoryCard"));
-
 var _Disclaimer = _interopRequireDefault(require("./Disclaimer"));
-
 var _Card = _interopRequireDefault(require("./Card"));
-
 var _List = _interopRequireDefault(require("./List"));
-
 var _TermsAndConditions = _interopRequireDefault(require("./TermsAndConditions"));
-
 var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
-
 var _Progress = _interopRequireDefault(require("./Progress"));
-
 var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
-
 var _WebPortal = _interopRequireDefault(require("./WebPortal"));
-
 var _baseExports = require("./baseExports");
-
 Object.keys(_baseExports).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -368,5 +320,4 @@ Object.keys(_baseExports).forEach(function (key) {
     }
   });
 });
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/shared/FullBleedContent/FullBleedContent.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _ResponsiveImage = _interopRequireDefault(require("../../ResponsiveImage"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const selectFullBleedContentProps = _ref => {
   let {
     alt,
@@ -45,7 +38,6 @@ const selectFullBleedContentProps = _ref => {
     xsSrc
   };
 };
-
 const FullBleedContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "FullBleedContent__FullBleedContentContainer",
   componentId: "components-web__sc-1130ea5-0"
@@ -64,25 +56,25 @@ const FullBleedContentContainer = /*#__PURE__*/_styledComponents.default.div.wit
     borderTopRightRadius
   };
 });
+
 /**
  * Full bleed content component can accept either a single source,
  * a number of sources corresponding to the `ResponsiveImage` component API,
  * or a custom component.
  */
-
-
 const FullBleedContent = _ref3 => {
   let {
     borderRadius,
     content,
     ...rest
   } = _ref3;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedContentContainer, { ...borderRadius,
-    children: content ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, { ...selectFullBleedContentProps(rest)
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedContentContainer, {
+    ...borderRadius,
+    children: content ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
+      ...selectFullBleedContentProps(rest)
     })
   });
 };
-
 FullBleedContent.propTypes = {
   /**
    * Content border radius matching the edge values on the parent card.
@@ -93,22 +85,18 @@ FullBleedContent.propTypes = {
     borderTopLeftRadius: _propTypes.default.number,
     borderTopRightRadius: _propTypes.default.number
   }),
-
   /**
    * Custom JSX to be used for rendering the content (defaults to `ResponsiveImage` receiving other props).
    */
   content: _propTypes.default.node,
-
   /**
    * Image source.
    */
   src: _propTypes.default.string,
-
   /**
    * Also accept props for `ResponsiveImage`...
    */
   ..._ResponsiveImage.default.propTypes,
-
   /**
    * ...but make the required ones optional.
    */

package/lib/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /**
  * Gets the border radius values for an item of content that goes right up to
  * the edges of its container, to the top, bottom, left or right of other content.
@@ -25,7 +24,6 @@ const getFullBleedBorderRadius = function (borderRadius, position) {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0
   };
-
   if (position && position !== 'none') {
     if (borderRadius) {
       // Depending on the position of the image, we need to round some
@@ -36,38 +34,29 @@ const getFullBleedBorderRadius = function (borderRadius, position) {
             innerBorderRadius.borderBottomLeftRadius = borderRadius;
             innerBorderRadius.borderBottomRightRadius = borderRadius;
           }
-
           break;
-
         case 'left':
           if (!hasFooter) {
             innerBorderRadius.borderBottomLeftRadius = borderRadius;
           }
-
           innerBorderRadius.borderTopLeftRadius = borderRadius;
           break;
-
         case 'right':
           if (!hasFooter) {
             innerBorderRadius.borderBottomRightRadius = borderRadius;
           }
-
           innerBorderRadius.borderTopRightRadius = borderRadius;
           break;
-
         case 'top':
           innerBorderRadius.borderTopLeftRadius = borderRadius;
           innerBorderRadius.borderTopRightRadius = borderRadius;
           break;
-
         default:
           break;
       }
     }
   }
-
   return innerBorderRadius;
 };
-
 var _default = getFullBleedBorderRadius;
 exports.default = _default;

package/lib/shared/FullBleedContent/index.js

@@ -16,14 +16,9 @@ Object.defineProperty(exports, "useFullBleedContentProps", {
     return _useFullBleedContentProps.default;
   }
 });
-
 var _FullBleedContent = _interopRequireDefault(require("./FullBleedContent"));
-
 var _getFullBleedBorderRadius = _interopRequireDefault(require("./getFullBleedBorderRadius"));
-
 var _useFullBleedContentProps = _interopRequireDefault(require("./useFullBleedContentProps"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _FullBleedContent.default;
 exports.default = _default;

package/lib/shared/FullBleedContent/useFullBleedContentProps.js

@@ -4,42 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _componentsBase = require("@telus-uds/components-base");
-
 const getContentStackDirection = fullBleedContentPosition => {
   switch (fullBleedContentPosition) {
     case 'left':
       return 'row-reverse';
-
     case 'right':
       return 'row';
-
     case 'top':
       return 'column-reverse';
-
     default:
       return 'column';
   }
 };
-
 const getContentStackAlign = fullBleedContentAlign => {
   switch (fullBleedContentAlign) {
     case 'center':
       return 'center';
-
     case 'end':
     case 'flex-end':
       return 'flex-end';
-
     case 'start':
     case 'flex-start':
       return 'flex-start';
-
     default:
       return 'stretch';
   }
 };
+
 /**
  * Resolves a set of `FullBleedContent` props into the variables a container needs to
  * correctly position a `FullBleedContent` component for the current viewport.
@@ -47,8 +39,6 @@ const getContentStackAlign = fullBleedContentAlign => {
  * @param {object} [fullBleedContent] - a set of valid proptypes for FullBleedContent
  * @returns
  */
-
-
 const useFullBleedContentProps = fullBleedContent => {
   const {
     align: fullBleedContentAlignProp,
@@ -68,6 +58,5 @@ const useFullBleedContentProps = fullBleedContent => {
     fullBleedContentProps
   };
 };
-
 var _default = useFullBleedContentProps;
 exports.default = _default;

package/lib/shared/VideoSplash/SplashButton/SplashButton.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _helpers = require("../helpers");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const ButtonContainer = /*#__PURE__*/_styledComponents.default.button.withConfig({
   displayName: "SplashButton__ButtonContainer",
   componentId: "components-web__sc-1oe22fk-0"
@@ -34,7 +26,6 @@ const ButtonContainer = /*#__PURE__*/_styledComponents.default.button.withConfig
   alignItems: 'center',
   cursor: 'pointer'
 });
-
 const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "SplashButton__ButtonContent",
   componentId: "components-web__sc-1oe22fk-1"
@@ -61,7 +52,6 @@ const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
     }
   }
 });
-
 const SplashButton = _ref3 => {
   let {
     copy,
@@ -82,7 +72,8 @@ const SplashButton = _ref3 => {
   const ariaLabel = (0, _helpers.getAriaLabel)((0, _helpers.getTimestamp)(videoLength), copy);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
     "aria-label": ariaLabel,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContent, { ...themeTokens,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContent, {
+      ...themeTokens,
       buttonContentChildrenBackground: buttonContentChildrenBackground,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIcon, {
         size: 27,
@@ -91,7 +82,6 @@ const SplashButton = _ref3 => {
     })
   });
 };
-
 SplashButton.propTypes = {
   videoLength: _propTypes.default.number,
   tokens: _propTypes.default.object,

package/lib/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _helpers = require("../helpers");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const ButtonContainer = /*#__PURE__*/_styledComponents.default.button.withConfig({
   displayName: "SplashButtonWithDetails__ButtonContainer",
   componentId: "components-web__sc-1edwy9o-0"
@@ -31,7 +23,6 @@ const ButtonContainer = /*#__PURE__*/_styledComponents.default.button.withConfig
   padding: 0,
   cursor: 'pointer'
 });
-
 const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "SplashButtonWithDetails__ButtonContent",
   componentId: "components-web__sc-1edwy9o-1"
@@ -98,7 +89,6 @@ const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
     }
   }
 });
-
 const PlayIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "SplashButtonWithDetails__PlayIconContainer",
   componentId: "components-web__sc-1edwy9o-2"
@@ -117,7 +107,6 @@ const PlayIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   borderRadius: '100%',
   transition: 'background 0.2s ease-in-out'
 });
-
 const DetailsContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "SplashButtonWithDetails__DetailsContainer",
   componentId: "components-web__sc-1edwy9o-3"
@@ -132,7 +121,6 @@ const DetailsContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     return `${detailsContainerPadding}px`;
   }
 });
-
 const selectPlayIconContainerTokens = _ref12 => {
   let {
     playIconContainerBackground
@@ -141,7 +129,6 @@ const selectPlayIconContainerTokens = _ref12 => {
     playIconContainerBackground
   };
 };
-
 const selectDetailsContainerTokens = _ref13 => {
   let {
     detailsContainerPadding
@@ -150,7 +137,6 @@ const selectDetailsContainerTokens = _ref13 => {
     detailsContainerPadding
   };
 };
-
 const selectButtonContentTokens = _ref14 => {
   let {
     buttonBackground,
@@ -173,7 +159,6 @@ const selectButtonContentTokens = _ref14 => {
     buttonPaddingRight
   };
 };
-
 const getLabelTokens = _ref15 => {
   let {
     labelFontName: fontName,
@@ -184,7 +169,6 @@ const getLabelTokens = _ref15 => {
     fontWeight
   };
 };
-
 const SplashButtonWithDetails = _ref16 => {
   let {
     label,
@@ -207,14 +191,17 @@ const SplashButtonWithDetails = _ref16 => {
   const ariaLabel = (0, _helpers.getAriaLabel)(mappedVideoLength, copy);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
     "aria-label": ariaLabel,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonContent, { ...selectButtonContentTokens(themeTokens),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonContent, {
+      ...selectButtonContentTokens(themeTokens),
       buttonContentChildrenBackground: buttonContentChildrenBackground,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIconContainer, { ...selectPlayIconContainerTokens(themeTokens),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIconContainer, {
+        ...selectPlayIconContainerTokens(themeTokens),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIcon, {
           size: 13,
           color: playIconColor
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DetailsContainer, { ...selectDetailsContainerTokens(themeTokens),
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DetailsContainer, {
+        ...selectDetailsContainerTokens(themeTokens),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           variant: {
             bold: true
@@ -223,9 +210,7 @@ const SplashButtonWithDetails = _ref16 => {
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           variant: {
-            colour: 'secondary'
-            /* TODO: this is not the same color as in designs */
-            ,
+            colour: 'secondary' /* TODO: this is not the same color as in designs */,
             size: 'micro'
           },
           children: mappedVideoLength.timestamp
@@ -234,7 +219,6 @@ const SplashButtonWithDetails = _ref16 => {
     })
   });
 };
-
 SplashButtonWithDetails.propTypes = {
   label: _propTypes.default.string,
   tokens: _propTypes.default.object,