@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/index.js

@@ -1,325 +1,40 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  Badge: true,
-  OrderedList: true,
-  PreviewCard: true,
-  ResponsiveImage: true,
-  Ribbon: true,
-  Countdown: true,
-  DatePicker: true,
-  Paragraph: true,
-  Span: true,
-  ExpandCollapseMini: true,
-  Callout: true,
-  PriceLockup: true,
-  Footnote: true,
-  QuantitySelector: true,
-  IconButton: true,
-  Image: true,
-  DefaultImage: true,
-  transformGradient: true,
-  ssrStyles: true,
-  Breadcrumbs: true,
-  BlockQuote: true,
-  OptimizeImage: true,
-  Testimonial: true,
-  Toast: true,
-  Table: true,
-  WebVideo: true,
-  WaffleGrid: true,
-  Spinner: true,
-  VideoPicker: true,
-  Video: true,
-  StoryCard: true,
-  Disclaimer: true,
-  Card: true,
-  List: true,
-  TermsAndConditions: true,
-  NavigationBar: true,
-  Progress: true,
-  SkeletonProvider: true
-};
-Object.defineProperty(exports, "Badge", {
-  enumerable: true,
-  get: function () {
-    return _Badge.default;
-  }
-});
-Object.defineProperty(exports, "BlockQuote", {
-  enumerable: true,
-  get: function () {
-    return _BlockQuote.default;
-  }
-});
-Object.defineProperty(exports, "Breadcrumbs", {
-  enumerable: true,
-  get: function () {
-    return _Breadcrumbs.default;
-  }
-});
-Object.defineProperty(exports, "Callout", {
-  enumerable: true,
-  get: function () {
-    return _Callout.default;
-  }
-});
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function () {
-    return _Card.default;
-  }
-});
-Object.defineProperty(exports, "Countdown", {
-  enumerable: true,
-  get: function () {
-    return _Countdown.default;
-  }
-});
-Object.defineProperty(exports, "DatePicker", {
-  enumerable: true,
-  get: function () {
-    return _DatePicker.default;
-  }
-});
-Object.defineProperty(exports, "DefaultImage", {
-  enumerable: true,
-  get: function () {
-    return _Image.DefaultImage;
-  }
-});
-Object.defineProperty(exports, "Disclaimer", {
-  enumerable: true,
-  get: function () {
-    return _Disclaimer.default;
-  }
-});
-Object.defineProperty(exports, "ExpandCollapseMini", {
-  enumerable: true,
-  get: function () {
-    return _ExpandCollapseMini.default;
-  }
-});
-Object.defineProperty(exports, "Footnote", {
-  enumerable: true,
-  get: function () {
-    return _Footnote.default;
-  }
-});
-Object.defineProperty(exports, "IconButton", {
-  enumerable: true,
-  get: function () {
-    return _IconButton.default;
-  }
-});
-Object.defineProperty(exports, "Image", {
-  enumerable: true,
-  get: function () {
-    return _Image.default;
-  }
-});
-Object.defineProperty(exports, "List", {
-  enumerable: true,
-  get: function () {
-    return _List.default;
-  }
-});
-Object.defineProperty(exports, "NavigationBar", {
-  enumerable: true,
-  get: function () {
-    return _NavigationBar.default;
-  }
-});
-Object.defineProperty(exports, "OptimizeImage", {
-  enumerable: true,
-  get: function () {
-    return _OptimizeImage.default;
-  }
-});
-Object.defineProperty(exports, "OrderedList", {
-  enumerable: true,
-  get: function () {
-    return _OrderedList.default;
-  }
-});
-Object.defineProperty(exports, "Paragraph", {
-  enumerable: true,
-  get: function () {
-    return _Paragraph.default;
-  }
-});
-Object.defineProperty(exports, "PreviewCard", {
-  enumerable: true,
-  get: function () {
-    return _PreviewCard.default;
-  }
-});
-Object.defineProperty(exports, "PriceLockup", {
-  enumerable: true,
-  get: function () {
-    return _PriceLockup.default;
-  }
-});
-Object.defineProperty(exports, "Progress", {
-  enumerable: true,
-  get: function () {
-    return _Progress.default;
-  }
-});
-Object.defineProperty(exports, "QuantitySelector", {
-  enumerable: true,
-  get: function () {
-    return _QuantitySelector.default;
-  }
-});
-Object.defineProperty(exports, "ResponsiveImage", {
-  enumerable: true,
-  get: function () {
-    return _ResponsiveImage.default;
-  }
-});
-Object.defineProperty(exports, "Ribbon", {
-  enumerable: true,
-  get: function () {
-    return _Ribbon.default;
-  }
-});
-Object.defineProperty(exports, "SkeletonProvider", {
-  enumerable: true,
-  get: function () {
-    return _SkeletonProvider.default;
-  }
-});
-Object.defineProperty(exports, "Span", {
-  enumerable: true,
-  get: function () {
-    return _Span.default;
-  }
-});
-Object.defineProperty(exports, "Spinner", {
-  enumerable: true,
-  get: function () {
-    return _Spinner.default;
-  }
-});
-Object.defineProperty(exports, "StoryCard", {
-  enumerable: true,
-  get: function () {
-    return _StoryCard.default;
-  }
-});
-Object.defineProperty(exports, "Table", {
-  enumerable: true,
-  get: function () {
-    return _Table.default;
-  }
-});
-Object.defineProperty(exports, "TermsAndConditions", {
-  enumerable: true,
-  get: function () {
-    return _TermsAndConditions.default;
-  }
-});
-Object.defineProperty(exports, "Testimonial", {
-  enumerable: true,
-  get: function () {
-    return _Testimonial.default;
-  }
-});
-Object.defineProperty(exports, "Toast", {
-  enumerable: true,
-  get: function () {
-    return _Toast.default;
-  }
-});
-Object.defineProperty(exports, "Video", {
-  enumerable: true,
-  get: function () {
-    return _Video.default;
-  }
-});
-Object.defineProperty(exports, "VideoPicker", {
-  enumerable: true,
-  get: function () {
-    return _VideoPicker.default;
-  }
-});
-Object.defineProperty(exports, "WaffleGrid", {
-  enumerable: true,
-  get: function () {
-    return _WaffleGrid.default;
-  }
-});
-Object.defineProperty(exports, "WebVideo", {
-  enumerable: true,
-  get: function () {
-    return _WebVideo.default;
-  }
-});
-Object.defineProperty(exports, "ssrStyles", {
-  enumerable: true,
-  get: function () {
-    return _utils.ssrStyles;
-  }
-});
-Object.defineProperty(exports, "transformGradient", {
-  enumerable: true,
-  get: function () {
-    return _utils.transformGradient;
-  }
-});
-var _Badge = _interopRequireDefault(require("./Badge"));
-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 _Image = _interopRequireWildcard(require("./Image"));
-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 _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 _baseExports = require("./baseExports");
-Object.keys(_baseExports).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _baseExports[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _baseExports[key];
-    }
-  });
-});
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default as Badge } from './Badge';
+export { default as OrderedList } from './OrderedList';
+export { default as PreviewCard } from './PreviewCard';
+export { default as ResponsiveImage } from './ResponsiveImage';
+export { default as Ribbon } from './Ribbon';
+export { default as Countdown } from './Countdown';
+export { default as DatePicker } from './DatePicker';
+export { default as Paragraph } from './Paragraph';
+export { default as Span } from './Span';
+export { default as ExpandCollapseMini } from './ExpandCollapseMini';
+export { default as Callout } from './Callout';
+export { default as PriceLockup } from './PriceLockup';
+export { default as Footnote } from './Footnote';
+export { default as QuantitySelector } from './QuantitySelector';
+export { default as IconButton } from './IconButton';
+export { default as Image, DefaultImage } from './Image';
+export { transformGradient } from './utils';
+export { default as Breadcrumbs } from './Breadcrumbs';
+export { default as BlockQuote } from './BlockQuote';
+export { default as OptimizeImage } from './OptimizeImage';
+export { default as Testimonial } from './Testimonial';
+export { default as Toast } from './Toast';
+export { default as Table } from './Table';
+export { default as WebVideo } from './WebVideo';
+export { default as WaffleGrid } from './WaffleGrid';
+export { default as Spinner } from './Spinner';
+export { default as VideoPicker } from './VideoPicker';
+export { default as Video } from './Video';
+export { default as StoryCard } from './StoryCard';
+export { default as Disclaimer } from './Disclaimer';
+export { default as Card } from './Card';
+export { default as List } from './List';
+export { default as TermsAndConditions } from './TermsAndConditions';
+export { default as NavigationBar } from './NavigationBar';
+export { default as Progress } from './Progress';
+export { default as SkeletonProvider } from './SkeletonProvider';
+export { ssrStyles } from './utils';
+export * from './baseExports';

package/lib/server.js

@@ -1,13 +1,5 @@
-"use strict";
+import ServerThemedImage from './Image/server';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Image", {
-  enumerable: true,
-  get: function () {
-    return _server.default;
-  }
-});
-var _server = _interopRequireDefault(require("./Image/server"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Export themed components
+/* eslint-disable import/prefer-default-export */
+export { ServerThemedImage as Image };

package/lib/shared/ConditionalWrapper/ConditionalWrapper.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
 const ConditionalWrapper = _ref => {
   let {
     children,
@@ -15,16 +8,15 @@ const ConditionalWrapper = _ref => {
     WrapperComponent,
     wrapperProps
   } = _ref;
-  return condition ? /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, {
+  return condition ? /*#__PURE__*/_jsx(WrapperComponent, {
     ...wrapperProps,
     children: children
   }) : children;
 };
 ConditionalWrapper.propTypes = {
-  children: _propTypes.default.node,
-  condition: _propTypes.default.bool,
-  WrapperComponent: _propTypes.default.elementType,
-  wrapperProps: _propTypes.default.object
+  children: PropTypes.node,
+  condition: PropTypes.bool,
+  WrapperComponent: PropTypes.elementType,
+  wrapperProps: PropTypes.object
 };
-var _default = ConditionalWrapper;
-exports.default = _default;
+export default ConditionalWrapper;

package/lib/shared/ConditionalWrapper/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ConditionalWrapper = _interopRequireDefault(require("./ConditionalWrapper"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _ConditionalWrapper.default;
-exports.default = _default;
+import ConditionalWrapper from './ConditionalWrapper';
+export default ConditionalWrapper;

package/lib/shared/FullBleedContent/FullBleedContent.js

@@ -1,15 +1,8 @@
-"use strict";
-
-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 }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ResponsiveImage from '../../ResponsiveImage';
+import { jsx as _jsx } from "react/jsx-runtime";
 const selectFullBleedContentProps = _ref => {
   let {
     alt,
@@ -38,7 +31,7 @@ const selectFullBleedContentProps = _ref => {
     xsSrc
   };
 };
-const FullBleedContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const FullBleedContentContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "FullBleedContent__FullBleedContentContainer",
   componentId: "components-web__sc-1130ea5-0"
 })(_ref2 => {
@@ -68,9 +61,9 @@ const FullBleedContent = _ref3 => {
     content,
     ...rest
   } = _ref3;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedContentContainer, {
+  return /*#__PURE__*/_jsx(FullBleedContentContainer, {
     ...borderRadius,
-    children: content ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
+    children: content ?? /*#__PURE__*/_jsx(ResponsiveImage, {
       ...selectFullBleedContentProps(rest)
     })
   });
@@ -79,31 +72,30 @@ FullBleedContent.propTypes = {
   /**
    * Content border radius matching the edge values on the parent card.
    */
-  borderRadius: _propTypes.default.shape({
-    borderBottomLeftRadius: _propTypes.default.number,
-    borderBottomRightRadius: _propTypes.default.number,
-    borderTopLeftRadius: _propTypes.default.number,
-    borderTopRightRadius: _propTypes.default.number
+  borderRadius: PropTypes.shape({
+    borderBottomLeftRadius: PropTypes.number,
+    borderBottomRightRadius: PropTypes.number,
+    borderTopLeftRadius: PropTypes.number,
+    borderTopRightRadius: PropTypes.number
   }),
   /**
    * Custom JSX to be used for rendering the content (defaults to `ResponsiveImage` receiving other props).
    */
-  content: _propTypes.default.node,
+  content: PropTypes.node,
   /**
    * Image source.
    */
-  src: _propTypes.default.string,
+  src: PropTypes.string,
   /**
    * Also accept props for `ResponsiveImage`...
    */
-  ..._ResponsiveImage.default.propTypes,
+  ...ResponsiveImage.propTypes,
   /**
    * ...but make the required ones optional.
    */
-  alt: _propTypes.default.string,
-  xsSrc: _propTypes.default.string,
-  smSrc: _propTypes.default.string,
-  fallbackSrc: _propTypes.default.string
+  alt: PropTypes.string,
+  xsSrc: PropTypes.string,
+  smSrc: PropTypes.string,
+  fallbackSrc: PropTypes.string
 };
-var _default = FullBleedContent;
-exports.default = _default;
+export default FullBleedContent;

package/lib/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -1,9 +1,3 @@
-"use strict";
-
-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.
@@ -58,5 +52,4 @@ const getFullBleedBorderRadius = function (borderRadius, position) {
   }
   return innerBorderRadius;
 };
-var _default = getFullBleedBorderRadius;
-exports.default = _default;
+export default getFullBleedBorderRadius;

package/lib/shared/FullBleedContent/index.js

@@ -1,24 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "getFullBleedBorderRadius", {
-  enumerable: true,
-  get: function () {
-    return _getFullBleedBorderRadius.default;
-  }
-});
-Object.defineProperty(exports, "useFullBleedContentProps", {
-  enumerable: true,
-  get: function () {
-    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;
+import FullBleedContent from './FullBleedContent';
+export default FullBleedContent;
+export { default as getFullBleedBorderRadius } from './getFullBleedBorderRadius';
+export { default as useFullBleedContentProps } from './useFullBleedContentProps';

package/lib/shared/FullBleedContent/useFullBleedContentProps.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _componentsBase = require("@telus-uds/components-base");
+import { useResponsiveProp } from '@telus-uds/components-base';
 const getContentStackDirection = fullBleedContentPosition => {
   switch (fullBleedContentPosition) {
     case 'left':
@@ -47,9 +41,9 @@ const useFullBleedContentProps = fullBleedContent => {
   } = fullBleedContent ?? {
     position: 'none'
   };
-  const fullBleedContentPosition = (0, _componentsBase.useResponsiveProp)(fullBleedContentPositionProp, 'none');
+  const fullBleedContentPosition = useResponsiveProp(fullBleedContentPositionProp, 'none');
   const contentStackDirection = getContentStackDirection(fullBleedContentPosition);
-  const fullBleedContentAlign = (0, _componentsBase.useResponsiveProp)(fullBleedContentAlignProp, 'stretch');
+  const fullBleedContentAlign = useResponsiveProp(fullBleedContentAlignProp, 'stretch');
   const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
   return {
     contentStackAlign,
@@ -58,5 +52,4 @@ const useFullBleedContentProps = fullBleedContent => {
     fullBleedContentProps
   };
 };
-var _default = useFullBleedContentProps;
-exports.default = _default;
+export default useFullBleedContentProps;

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

@@ -1,17 +1,10 @@
-"use strict";
-
-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({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useThemeTokens } from '@telus-uds/components-base';
+import { getAriaLabel, getTimestamp } from '../helpers';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ButtonContainer = /*#__PURE__*/styled.button.withConfig({
   displayName: "SplashButton__ButtonContainer",
   componentId: "components-web__sc-1oe22fk-0"
 })({
@@ -26,7 +19,7 @@ const ButtonContainer = /*#__PURE__*/_styledComponents.default.button.withConfig
   alignItems: 'center',
   cursor: 'pointer'
 });
-const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const ButtonContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "SplashButton__ButtonContent",
   componentId: "components-web__sc-1oe22fk-1"
 })({
@@ -61,21 +54,21 @@ const SplashButton = _ref3 => {
   } = _ref3;
   const {
     buttonContentChildrenBackground
-  } = (0, _componentsBase.useThemeTokens)('SplashButton', tokens, variant, {
+  } = useThemeTokens('SplashButton', tokens, variant, {
     hover: true
   });
   const {
     playIcon: PlayIcon,
     playIconColor,
     ...themeTokens
-  } = (0, _componentsBase.useThemeTokens)('SplashButton', tokens, variant);
-  const ariaLabel = (0, _helpers.getAriaLabel)((0, _helpers.getTimestamp)(videoLength), copy);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+  } = useThemeTokens('SplashButton', tokens, variant);
+  const ariaLabel = getAriaLabel(getTimestamp(videoLength), copy);
+  return /*#__PURE__*/_jsx(ButtonContainer, {
     "aria-label": ariaLabel,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContent, {
+    children: /*#__PURE__*/_jsx(ButtonContent, {
       ...themeTokens,
       buttonContentChildrenBackground: buttonContentChildrenBackground,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIcon, {
+      children: /*#__PURE__*/_jsx(PlayIcon, {
         size: 27,
         color: playIconColor
       })
@@ -83,10 +76,9 @@ const SplashButton = _ref3 => {
   });
 };
 SplashButton.propTypes = {
-  videoLength: _propTypes.default.number,
-  tokens: _propTypes.default.object,
-  variant: _propTypes.default.object,
-  copy: _propTypes.default.oneOf(['en', 'fr'])
+  videoLength: PropTypes.number,
+  tokens: PropTypes.object,
+  variant: PropTypes.object,
+  copy: PropTypes.oneOf(['en', 'fr'])
 };
-var _default = SplashButton;
-exports.default = _default;
+export default SplashButton;