@zohodesk/dot 1.0.0-temp-187.11 → 1.0.0-temp-209

package/es/form/fields/DateField/DateField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from "../../../../../components/es/components-v2/Label/Label";
 import DateWidget from '@zohodesk/components/lib/DateTime/DateWidget';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -133,14 +134,12 @@ export default class DateField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
+      isMandatory: isMandatory,
+      customStyle: labelCustomClass,
       htmlFor: getAriaId,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      ...LabelProps,
-      id: labelName
+      testId: labelName,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {

package/es/form/fields/Fields.module.css

@@ -218,7 +218,3 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
-}

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from "../../../../../components/es/components-v2/Label/Label";
 import MultiSelect from '@zohodesk/components/lib/MultiSelect/MultiSelect';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -145,13 +146,11 @@ export default class MultiSelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+      isMandatory: isMandatory // customStyle={style.fieldLabel}
       ,
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
+      testId: id,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement(MultiSelect, {
       options: options,

package/es/form/fields/SelectField/SelectField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from "../../../../../components/es/components-v2/Label/Label";
 import Select from '@zohodesk/components/lib/Select/Select';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -115,13 +116,11 @@ export default class SelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isMandatory: isMandatory,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps,
-      id: uniqueId
+      testId: uniqueId,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
     }, /*#__PURE__*/React.createElement(Select, {

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -165,8 +165,7 @@ export default class TagsMultiSelect extends React.Component {
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {},
-      ListItemProps = {}
+      TagProps = {}
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
@@ -301,8 +300,7 @@ export default class TagsMultiSelect extends React.Component {
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
           customProps: listItemProps,
-          customClass: listItemClass,
-          ...ListItemProps
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

package/es/form/fields/TagsMultiSelect/props/propTypes.js

@@ -52,8 +52,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
-    TagProps: PropTypes.object,
-    ListItemProps: PropTypes.object
+    TagProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Box } from '@zohodesk/components/lib/Layout';
-import Label from '@zohodesk/components/lib/Label/Label';
+import { Box } from '@zohodesk/components/lib/Layout'; // import Label from '@zohodesk/components/lib/Label/Label';
+
+import Label from "../../../../../components/es/components-v2/Label/Label";
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import TagsMultiSelect from "../TagsMultiSelect/TagsMultiSelect";
@@ -206,13 +207,10 @@ const TagsMultiSelectField = props => {
     }
   }, /*#__PURE__*/React.createElement(Label, {
     text: labelName,
-    title: labelName,
-    id: id,
-    size: labelSize,
-    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: `${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
-    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+    isMandatory: isMandatory,
     htmlFor: htmlId,
+    testId: id,
+    customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
     ...LabelProps
   }), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {
     dataId: `${dataId}_tagCount`,

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from "../../../../../components/es/components-v2/Label/Label";
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -103,13 +104,12 @@ export default class TextBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isMandatory: isMandatory,
+      customStyle: labelCustomClass,
+      testId: labelName,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      ...LabelProps,
-      id: labelName
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {

package/es/form/fields/TextareaField/TextareaField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from "../../../../../components/es/components-v2/Label/Label";
 import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -131,12 +132,11 @@ export default class TextareaField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isMandatory: isMandatory,
+      customStyle: labelCustomClass,
+      testId: id,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/index.js

@@ -35,6 +35,7 @@ export { default as Loader } from "./Loader/Loader";
 export { default as Message, MessageUI, MessageNew } from "./Message/Message";
 export { default as MessageBanner } from "./MessageBanner/MessageBanner";
 export { default as NewStar } from "./NewStar/NewStar";
+export { default as Onboarding } from "./Onboarding/Onboarding";
 export { default as PlusIcon } from "./PlusIcon/PlusIcon";
 import * as _Provider from "./Provider/Config";
 export { _Provider as Provider };

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,12 +48,8 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys,
-      customProps
+      i18nKeys
     } = this.props;
-    const {
-      ToggleDropDownProps = {}
-    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
@@ -88,8 +84,7 @@ class DepartmentDropDown extends Component {
       getNextOptions: getNextOptions,
       isNextOptions: isNextOptions,
       onSearch: onSearch,
-      needSearchFetching: needSearchFetching,
-      ...ToggleDropDownProps
+      needSearchFetching: needSearchFetching
     });
   }
 

package/es/list/DepartmentDropDown/props/defaultProps.js

@@ -3,6 +3,5 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };

package/es/list/DepartmentDropDown/props/propTypes.js

@@ -20,8 +20,5 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    ToggleDropDownProps: PropTypes.object
   })
 };

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -36,8 +36,9 @@
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-.multiLineValue {
-  composes: lineClamp from '~@zohodesk/components/lib/common/common.module.css';
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -45,6 +46,7 @@
 [dir=rtl] .withBorder.active {
   border-right-color: var(--zdt_statuslistitem_default_active_border);
 }
+
 .default.hover, .default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }

package/es/utils/General.js

@@ -42,4 +42,5 @@ export function formatPhoneUrl(phone) {
   }
 
   return phone;
-}
+}
+export const DUMMY_OBJECT = Object.freeze({});

package/lib/DotProvider/libraryChunks/appearance/component/Dark_Component.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/mode/Component_v2_DarkMode.module.css");

package/lib/DotProvider/libraryChunks/appearance/component/Light_Component.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/mode/Component_v2_LightMode.module.css");

package/lib/DotProvider/libraryChunks/appearance/component/PureDark_Component.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/mode/Component_v2_PureDarkMode.module.css");

package/lib/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -20,17 +20,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var themeAppearanceImports = {
   Lib_LightMode_Component: function Lib_LightMode_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css'));
+      return _interopRequireWildcard(require("../libraryChunks/appearance/component/Light_Component"));
     });
   },
   Lib_DarkMode_Component: function Lib_DarkMode_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css'));
+      return _interopRequireWildcard(require("../libraryChunks/appearance/component/Dark_Component"));
     });
   },
   Lib_PureDarkMode_Component: function Lib_PureDarkMode_Component() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css'));
+      return _interopRequireWildcard(require("../libraryChunks/appearance/component/PureDark_Component"));
     });
   },
   Lib_LightMode_Dot: function Lib_LightMode_Dot() {

package/lib/Onboarding/CarouselDots/CarouselDot/CarouselDot.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("./props/propTypes.js");
+
+var _defaultProps = require("./props/defaultProps.js");
+
+var _CarouselDotModule = _interopRequireDefault(require("./css/CarouselDot.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* Props */
+
+/* Style */
+function CarouselDot(props) {
+  var onClick = props.onClick,
+      isActive = props.isActive,
+      index = props.index,
+      isAnimationPaused = props.isAnimationPaused,
+      testId = props.testId,
+      customId = props.customId;
+
+  function handleClick() {
+    typeof onClick === "function" && onClick(index);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(_CarouselDotModule["default"].bullet, " ").concat(isAnimationPaused ? _CarouselDotModule["default"].animationPaused : '', " ").concat(isActive ? _CarouselDotModule["default"].bulletActive : _CarouselDotModule["default"].bulletNormal),
+    onClick: handleClick,
+    "data-id": customId,
+    "data-test-id": testId
+  });
+}
+
+CarouselDot.propTypes = _propTypes.propTypes;
+CarouselDot.defaultProps = _defaultProps.defaultProps;
+var _default = CarouselDot;
+exports["default"] = _default;

package/lib/Onboarding/CarouselDots/CarouselDot/__tests__/CarouselDot.spec.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _CarouselDot = _interopRequireDefault(require("../CarouselDot"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('CarouselDot', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering of isActive', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], {
+      isActive: true
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering of isAnimationPaused', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], {
+      isAnimationPaused: true
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customId', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], {
+      customId: "radar"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with testId', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_CarouselDot["default"], {
+      testId: "radar_test"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/Onboarding/CarouselDots/CarouselDot/__tests__/__snapshots__/CarouselDot.spec.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CarouselDot rendering of isActive 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletActive"
+    data-id="carouselDot"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering of isAnimationPaused 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet animationPaused bulletNormal"
+    data-id="carouselDot"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletNormal"
+    data-id="carouselDot"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering with customId 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletNormal"
+    data-id="radar"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering with testId 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletNormal"
+    data-id="carouselDot"
+    data-test-id="radar_test"
+  />
+</DocumentFragment>
+`;

package/lib/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css

@@ -0,0 +1,83 @@
+.bulletNormal{
+    composes: pointer from '~@zohodesk/components/lib/common/common.module.css';
+  }
+  .bulletNormal:hover {
+    transform: scale(1.4);
+  }
+  .bullet {
+    /* padding: 4px 3px; */
+    position: relative;
+    width: var(--zd_size8) ;
+    height: var(--zd_size8) ;
+    overflow: hidden;
+    border-radius: 20px;
+  }
+  .bullet,
+  .bullet::after {
+    transition: opacity var(--zd_transition2), background-color var(--zd_transition2), width var(--zd_transition6) cubic-bezier(0.165, 0.84, 0.44, 1),transform 0.2s ease-in-out;
+  }
+  .bullet::before,
+  .bullet::after {
+    content: '';
+    width: inherit ;
+    height: inherit ;
+    position: absolute;
+    top: 50% ;
+  }
+  .bullet::before, .bullet::after {
+    border-radius: inherit;
+    transform: translateY(-50%);
+  }
+  [dir=ltr] .bullet::before, [dir=ltr] .bullet::after {
+    left: 0 ;
+  }
+  [dir=rtl] .bullet::before, [dir=rtl] .bullet::after {
+    right: 0 ;
+  }
+  .bullet::before {
+    opacity: .4;
+  }
+  .bullet::before, .bulletActive::after {
+    background-color: var(--zdt_button_primaryfill_bg);
+  }
+  .bulletActive {
+    width: var(--zd_size30) ;
+  }
+  .bulletActive::before,
+  .bulletActive::after {
+    width: 100% ;
+  }
+  .bulletActive::after {
+    opacity: 1;
+  }
+  [dir=ltr] .bulletActive::after {
+    left:-100% ;
+    animation:  progressLoading-ltr 5s linear infinite;
+  }
+  [dir=rtl] .bulletActive::after {
+    right:-100% ;
+    animation:  progressLoading-rtl 5s linear infinite;
+  }
+  [dir=ltr] .animationPaused::after {
+    animation-play-state: paused;
+  }
+  [dir=rtl] .animationPaused::after {
+    animation-play-state: paused;
+  }
+  @keyframes progressLoading-ltr {
+    0% {
+      left: -100% ;
+    }
+    100% {
+      left: 0% ;
+    }
+  }
+  @keyframes progressLoading-rtl {
+    0% {
+      left: -100% ;
+    }
+    100% {
+      left: 0% ;
+    }
+  }
+  

package/lib/Onboarding/CarouselDots/CarouselDot/props/defaultProps.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  isActive: false,
+  isAnimationPaused: false,
+  customId: "carouselDot",
+  testId: 'carouselDot'
+};
+exports.defaultProps = defaultProps;

package/lib/Onboarding/CarouselDots/CarouselDot/props/propTypes.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  isAnimationPaused: _propTypes["default"].bool,
+  isActive: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func.isRequired,
+  index: _propTypes["default"].number,
+  testId: _propTypes["default"].string,
+  customId: _propTypes["default"].string
+};
+exports.propTypes = propTypes;