@zohodesk/dot 1.7.8-temp-0 → 1.7.9-temp-0

package/coverage/src/version2/lookup/AlertLookup/props/defaultProps.js.html

@@ -109,7 +109,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/lookup/AlertLookup/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/lookup/AlertLookup/props/propTypes.js.html

@@ -199,7 +199,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/DesktopNotification.js.html

@@ -697,7 +697,7 @@ DesktopNotification.defaultProps = defaultProps;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/DesktopNotification.module.css.html

@@ -409,7 +409,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/props/defaultProps.js.html

@@ -124,7 +124,7 @@ export const defaultProps = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotification/props/propTypes.js.html

@@ -202,7 +202,7 @@ export const DesktopNotificationUI_propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js.html

@@ -346,7 +346,7 @@ DesktopNotificationHeader.defaultProps = defaultProps;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css.html

@@ -370,7 +370,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/props/defaultProps.js.html

@@ -94,7 +94,7 @@ export const defaultProps = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/props/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/coverage/src/version2/notification/DesktopNotificationHeader/props/propTypes.js.html

@@ -109,7 +109,7 @@ export const propTypes = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-05-07T15:23:43.620Z
+                at 2025-05-12T13:45:30.374Z
             </div>
         <script src="../../../../../prettify.js"></script>
         <script>

package/es/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap

@@ -79,7 +79,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   >
                     <div
                       aria-pressed="false"
-                      class="false wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                      class="large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
                       data-id="iconContainer"
                       data-ishtml="false"
                       data-selector-id="iconButton"
@@ -103,7 +103,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 >
                   <button
                     aria-pressed="false"
-                    class="buttonReset wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
+                    class="buttonReset large wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
                     data-id="iconContainer"
                     data-ishtml="false"
                     data-selector-id="iconButton"
@@ -361,7 +361,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         </div>
         <button
           aria-pressed="false"
-          class="buttonReset wrapper button undefined effect default border borderHover  hoverEffect  inflex coldir both"
+          class="buttonReset large wrapper button undefined effect default border borderHover  hoverEffect  inflex coldir both"
           data-id="attachToggle"
           data-ishtml="false"
           data-selector-id="iconButton"

package/es/IconButton/IconButton.js

@@ -70,6 +70,7 @@ export default class IconButton extends React.Component {
     let {
       palette,
       iconSize,
+      size,
       iconName,
       className,
       iconClass,
@@ -116,7 +117,7 @@ export default class IconButton extends React.Component {
       tourId: tourId,
       align: "both",
       isCover: false,
-      className: `${needButtonTag && btnStyle.buttonReset} ${style.wrapper} ${className ? className : ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
+      className: `${needButtonTag ? btnStyle.buttonReset : ''} ${style[size]} ${style.wrapper} ${className || ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
       dataId: dataId,
       dataSelectorId: dataSelectorId,
       onClick: this.triggerClick,

package/es/IconButton/IconButton.module.css

@@ -1,22 +1,49 @@
 .varClass {
   --iconColor: var(--zdt_iconButton_icon_black);
 }
+
 .wrapper {
-  height: var(--zd_size28) ;
-  width: var(--zd_size28) ;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
   color: var(--iconColor);
   cursor: pointer;
 }
+
+.xsmall {
+  width: var(--zd_size16) ;
+  height: var(--zd_size16) ;
+}
+
+.small {
+  width: var(--zd_size20) ;
+  height: var(--zd_size20) ;
+}
+
+.medium {
+  width: var(--zd_size24) ;
+  height: var(--zd_size24) ;
+}
+
+.large {
+  width: var(--zd_size28) ;
+  height: var(--zd_size28) ;
+}
+
+.xlarge {
+  width: var(--zd_size32) ;
+  height: var(--zd_size32) ;
+}
+
 .primary {
   --iconColor: var(--zdt_iconButton_icon_primary);
 }
+
 .primary:hover {
   --iconColor: var(--zdt_iconButton_icon_primaryHover);
 }
+
 .primary_active,
 .primaryFilled,
 .primaryFilled_active {
   --iconColor: var(--zdt_iconButton_icon_primaryActive);
-}
+}

package/es/IconButton/__tests__/IconButton.spec.js

@@ -26,6 +26,15 @@ describe('IconButton', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+  test.each(sizes)('rendering the size of- %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(IconButton, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
   const hoverType = ['default', 'border', 'bg'];
   test.each(hoverType)('rendering the hovertypes- %s', hoverType => {
     const {

package/es/IconButton/__tests__/__snapshots__/IconButton.spec.js.snap

@@ -4,7 +4,7 @@ exports[`IconButton Checking the "Children" 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -27,7 +27,7 @@ exports[`IconButton eleRef prop is a function 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -45,7 +45,7 @@ exports[`IconButton rendering ally 1`] = `
     aria-label="ariaLabel"
     aria-labelledby="ariaLabelledby"
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -60,7 +60,7 @@ exports[`IconButton rendering ally 2`] = `
     aria-expanded="false"
     aria-haspopup="false"
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -73,7 +73,7 @@ exports[`IconButton rendering in ClassName 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -86,7 +86,7 @@ exports[`IconButton rendering in Icon 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -108,7 +108,7 @@ exports[`IconButton rendering in dataIsHtml is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="true"
     data-selector-id="iconButton"
@@ -121,7 +121,7 @@ exports[`IconButton rendering in isDisabled is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -135,7 +135,7 @@ exports[`IconButton rendering in title 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -149,7 +149,7 @@ exports[`IconButton rendering isNeedEffect is False 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined  inflex coldir both"
+    class="buttonReset large wrapper  undefined  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -162,7 +162,7 @@ exports[`IconButton rendering needButtonTag 1`] = `
 <DocumentFragment>
   <div
     aria-pressed="false"
-    class="false wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -175,7 +175,7 @@ exports[`IconButton rendering the defult props 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -188,7 +188,7 @@ exports[`IconButton rendering the hovertypes- bg 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -201,7 +201,7 @@ exports[`IconButton rendering the hovertypes- border 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -214,7 +214,7 @@ exports[`IconButton rendering the hovertypes- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -227,7 +227,7 @@ exports[`IconButton rendering the isActive true with palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -240,7 +240,7 @@ exports[`IconButton rendering the isActive true with palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -253,7 +253,7 @@ exports[`IconButton rendering the isActive true with palette of- primaryFilled 1
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -266,7 +266,7 @@ exports[`IconButton rendering the palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -279,7 +279,7 @@ exports[`IconButton rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -292,7 +292,72 @@ exports[`IconButton rendering the palette of- primaryFilled 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- large 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- medium 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset medium wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- small 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset small wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- xlarge 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset xlarge wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- xsmall 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset xsmall wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -305,7 +370,7 @@ exports[`IconButton rendering tourId 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"

package/es/IconButton/props/defaultProps.js

@@ -1,6 +1,7 @@
 export const defaultProps = {
   palette: 'default',
   iconSize: '13',
+  size: 'large',
   className: '',
   iconClass: '',
   dataId: 'iconContainer',

package/es/IconButton/props/propTypes.js

@@ -9,6 +9,7 @@ export const propTypes = {
   iconClass: PropTypes.string,
   iconName: PropTypes.string,
   iconSize: PropTypes.string,
+  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
   isActive: PropTypes.bool,
   isBold: PropTypes.bool,
   isDisabled: PropTypes.bool,

package/es/Onboarding/Onboarding.js

@@ -43,7 +43,6 @@ const Onboarding = _ref => {
     hasBouncAnimationOnMount,
     customId,
     testId,
-    videoFormats,
     hasExpandedButton,
     onPrimaryButtonClick,
     onSecondaryButtonClick,
@@ -58,7 +57,8 @@ const Onboarding = _ref => {
   const {
     videoLookupLink,
     isVideoLookupOpen,
-    isEmbeddedLink
+    isEmbeddedLink,
+    videoLookupFormat
   } = state;
   const {
     primaryButtonProps,
@@ -82,19 +82,18 @@ const Onboarding = _ref => {
     sliderData: sliderData
   });
 
-  const renderMediaElement = (imageSource, videoSource) => imageSource ? /*#__PURE__*/React.createElement(Image, {
+  const renderMediaElement = (imageSource, videoSourceLink, videoSourceFormat) => imageSource ? /*#__PURE__*/React.createElement(Image, {
     src: imageSource,
     className: `${style.mediaElement} ${style.image}`
-  }) : videoSource ? /*#__PURE__*/React.createElement("video", {
+  }) : videoSourceLink ? /*#__PURE__*/React.createElement("video", {
     className: style.mediaElement,
     autoPlay: true,
     loop: true,
     muted: true
-  }, videoFormats.map(ext => /*#__PURE__*/React.createElement("source", {
-    key: ext,
-    src: videoSource,
-    type: `video/${ext}`
-  }))) : null;
+  }, /*#__PURE__*/React.createElement("source", {
+    src: videoSourceLink,
+    type: `video/${videoSourceFormat}`
+  })) : null;
 
   const renderFooter = (sliderData, currentSliderIndex) => {
     const currentSliderData = sliderData && sliderData[currentSliderIndex];
@@ -207,9 +206,13 @@ const Onboarding = _ref => {
       description,
       hasVideoPlayButton = false,
       videoLookupSource,
-      hasEmbeddedVideoLookupSource = false,
       tabName
     } = item;
+    const videoLookupSourceLink = videoLookupSource && videoLookupSource.link ? videoLookupSource.link : null;
+    const videoLookupSourceFormat = videoLookupSource && videoLookupSource.format ? videoLookupSource.format : null;
+    const isEmbeddedvideoLookupSource = videoLookupSource && videoLookupSource.isEmbeddedLink ? videoLookupSource.isEmbeddedLink : null;
+    const videoSourceLink = videoSource && videoSource.link ? videoSource.link : null;
+    const videoSourceFormat = videoSource && videoSource.format ? videoSource.format : null;
     return /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_direction: "column",
@@ -224,7 +227,7 @@ const Onboarding = _ref => {
       $flag_fullsize: true
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.innerHead} ${hasVideoPlayButton ? style.dvLayer : null}`
-    }, renderMediaElement(imageSource, videoSource), hasVideoPlayButton && /*#__PURE__*/React.createElement(Flex, {
+    }, renderMediaElement(imageSource, videoSourceLink, videoSourceFormat), hasVideoPlayButton && /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_justifyContent: "center",
       $ui_alignItems: "center",
@@ -237,7 +240,7 @@ const Onboarding = _ref => {
       customId: `${customId}_play_icon`,
       testId: `${testId}_play_icon`,
       $ui_className: `${style.playIcon} ${style.animate} ${btnStyle.buttonReset}`,
-      $event_onClick: () => openVideoLookup(videoLookupSource, hasEmbeddedVideoLookupSource)
+      $event_onClick: () => openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat)
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-arrowFill",
       iconClass: style.playIconInner
@@ -282,7 +285,7 @@ const Onboarding = _ref => {
     text: ribbonText,
     ...ribbonProps
   }) : null, isVideoLookupOpen ? /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(VideoLookup, {
-    videoFormats: videoFormats,
+    videoFormat: videoLookupFormat,
     onClose: closeVideoLookup,
     isEmbeddedLink: isEmbeddedLink,
     link: videoLookupLink,