@asantemedia-org/edwardsvacuum-design-system 1.6.43 → 1.6.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1585,6 +1585,12 @@
1585
1585
  padding: 10px 18px 10px 18px;
1586
1586
  box-sizing: content-box;
1587
1587
  }
1588
+ .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel] {
1589
+ padding: 9px 18px 9px 18px;
1590
+ }
1591
+ .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus-visible {
1592
+ padding: 9px 18px 9px 18px;
1593
+ }
1588
1594
  .qr-journey-form-wrapper .qr-form-filed-wrapper label input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus-visible {
1589
1595
  border: 2px solid #678B3B;
1590
1596
  outline: none;
@@ -1645,28 +1651,117 @@
1645
1651
  font-size: 12px;
1646
1652
  line-height: 18px;
1647
1653
  }
1654
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector {
1655
+ position: relative;
1656
+ }
1648
1657
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container {
1658
+ display: flex;
1649
1659
  width: 100%;
1650
1660
  }
1651
1661
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button {
1662
+ display: flex;
1652
1663
  height: calc(2.3em + 20px);
1664
+ box-sizing: border-box;
1665
+ align-items: center;
1666
+ justify-content: center;
1667
+ padding: 0 10px;
1653
1668
  border: 1px solid;
1654
1669
  border-right: none;
1655
- padding: 0 10px;
1670
+ margin: 0;
1656
1671
  background: white;
1672
+ border-radius: 0;
1673
+ cursor: pointer;
1674
+ -webkit-user-select: none;
1675
+ -moz-user-select: none;
1676
+ user-select: none;
1677
+ }
1678
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button:hover {
1679
+ background-color: #f5f5f5;
1680
+ }
1681
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__button-content {
1682
+ display: flex;
1683
+ align-items: center;
1684
+ justify-content: center;
1685
+ }
1686
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__flag-emoji,
1687
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-flag-emoji {
1688
+ width: 24px;
1689
+ height: 24px;
1690
+ margin: 0 4px;
1691
+ box-sizing: border-box;
1692
+ }
1693
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow {
1694
+ border-top: 4px solid #777;
1695
+ border-right: 4px solid transparent;
1696
+ border-left: 4px solid transparent;
1697
+ margin-right: 4px;
1698
+ transition: all 0.1s ease-out;
1699
+ }
1700
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow--active {
1701
+ transform: rotateX(180deg);
1657
1702
  }
1658
1703
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input {
1659
1704
  width: 100%;
1660
1705
  height: calc(2.3em + 20px);
1706
+ box-sizing: border-box;
1661
1707
  line-height: 1em;
1662
1708
  padding: 10px 18px;
1663
1709
  border: 1px solid;
1664
1710
  font-size: 18px;
1711
+ border-radius: 0;
1712
+ margin: 0;
1713
+ font-family: inherit;
1714
+ }
1715
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus {
1716
+ outline: none;
1717
+ border: 2px solid #678B3B;
1665
1718
  }
1666
- .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus-visible {
1719
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus-visible {
1667
1720
  border: 2px solid #678B3B;
1668
1721
  outline: none;
1669
1722
  }
1723
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown {
1724
+ position: absolute;
1725
+ z-index: 100;
1726
+ top: 44px;
1727
+ left: 0;
1728
+ display: flex;
1729
+ width: 300px;
1730
+ max-height: 200px;
1731
+ flex-direction: column;
1732
+ padding: 4px 0;
1733
+ margin: 0;
1734
+ background-color: white;
1735
+ box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
1736
+ color: #222;
1737
+ list-style: none;
1738
+ overflow-y: scroll;
1739
+ }
1740
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item {
1741
+ display: flex;
1742
+ min-height: 28px;
1743
+ box-sizing: border-box;
1744
+ align-items: center;
1745
+ padding: 2px 8px;
1746
+ cursor: pointer;
1747
+ }
1748
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item:hover, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item--selected, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item--focused {
1749
+ background-color: #f5f5f5;
1750
+ }
1751
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-flag-emoji {
1752
+ margin-right: 8px;
1753
+ }
1754
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-country-name {
1755
+ overflow: hidden;
1756
+ margin-right: 8px;
1757
+ font-size: 14px;
1758
+ text-overflow: ellipsis;
1759
+ white-space: nowrap;
1760
+ }
1761
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-dial-code {
1762
+ color: gray;
1763
+ font-size: 14px;
1764
+ }
1670
1765
  .qr-journey-form-wrapper .disabled-product-fields-section {
1671
1766
  background-color: rgb(243, 243, 243);
1672
1767
  padding: 1rem;
@@ -1872,7 +1967,7 @@
1872
1967
  background-color: rgb(196, 38, 46);
1873
1968
  color: #FFFFFF;
1874
1969
  }
1875
- .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked h3 {
1970
+ .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page h3 {
1876
1971
  color: black;
1877
1972
  font-weight: 700;
1878
1973
  }
@@ -1585,6 +1585,12 @@
1585
1585
  padding: 10px 18px 10px 18px;
1586
1586
  box-sizing: content-box;
1587
1587
  }
1588
+ .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel], .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel] {
1589
+ padding: 9px 18px 9px 18px;
1590
+ }
1591
+ .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=tel]:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=tel]:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus-visible {
1592
+ padding: 9px 18px 9px 18px;
1593
+ }
1588
1594
  .qr-journey-form-wrapper .qr-form-filed-wrapper label input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus-visible, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea:focus-visible {
1589
1595
  border: 2px solid #678B3B;
1590
1596
  outline: none;
@@ -1645,28 +1651,117 @@
1645
1651
  font-size: 12px;
1646
1652
  line-height: 18px;
1647
1653
  }
1654
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector {
1655
+ position: relative;
1656
+ }
1648
1657
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container {
1658
+ display: flex;
1649
1659
  width: 100%;
1650
1660
  }
1651
1661
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button {
1662
+ display: flex;
1652
1663
  height: calc(2.3em + 20px);
1664
+ box-sizing: border-box;
1665
+ align-items: center;
1666
+ justify-content: center;
1667
+ padding: 0 10px;
1653
1668
  border: 1px solid;
1654
1669
  border-right: none;
1655
- padding: 0 10px;
1670
+ margin: 0;
1656
1671
  background: white;
1672
+ border-radius: 0;
1673
+ cursor: pointer;
1674
+ -webkit-user-select: none;
1675
+ -moz-user-select: none;
1676
+ user-select: none;
1677
+ }
1678
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button:hover {
1679
+ background-color: #f5f5f5;
1680
+ }
1681
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__button-content {
1682
+ display: flex;
1683
+ align-items: center;
1684
+ justify-content: center;
1685
+ }
1686
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__flag-emoji,
1687
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-flag-emoji {
1688
+ width: 24px;
1689
+ height: 24px;
1690
+ margin: 0 4px;
1691
+ box-sizing: border-box;
1692
+ }
1693
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow {
1694
+ border-top: 4px solid #777;
1695
+ border-right: 4px solid transparent;
1696
+ border-left: 4px solid transparent;
1697
+ margin-right: 4px;
1698
+ transition: all 0.1s ease-out;
1699
+ }
1700
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow--active {
1701
+ transform: rotateX(180deg);
1657
1702
  }
1658
1703
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input {
1659
1704
  width: 100%;
1660
1705
  height: calc(2.3em + 20px);
1706
+ box-sizing: border-box;
1661
1707
  line-height: 1em;
1662
1708
  padding: 10px 18px;
1663
1709
  border: 1px solid;
1664
1710
  font-size: 18px;
1711
+ border-radius: 0;
1712
+ margin: 0;
1713
+ font-family: inherit;
1714
+ }
1715
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus {
1716
+ outline: none;
1717
+ border: 2px solid #678B3B;
1665
1718
  }
1666
- .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus-visible {
1719
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus-visible {
1667
1720
  border: 2px solid #678B3B;
1668
1721
  outline: none;
1669
1722
  }
1723
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown {
1724
+ position: absolute;
1725
+ z-index: 100;
1726
+ top: 44px;
1727
+ left: 0;
1728
+ display: flex;
1729
+ width: 300px;
1730
+ max-height: 200px;
1731
+ flex-direction: column;
1732
+ padding: 4px 0;
1733
+ margin: 0;
1734
+ background-color: white;
1735
+ box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
1736
+ color: #222;
1737
+ list-style: none;
1738
+ overflow-y: scroll;
1739
+ }
1740
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item {
1741
+ display: flex;
1742
+ min-height: 28px;
1743
+ box-sizing: border-box;
1744
+ align-items: center;
1745
+ padding: 2px 8px;
1746
+ cursor: pointer;
1747
+ }
1748
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item:hover, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item--selected, .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item--focused {
1749
+ background-color: #f5f5f5;
1750
+ }
1751
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-flag-emoji {
1752
+ margin-right: 8px;
1753
+ }
1754
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-country-name {
1755
+ overflow: hidden;
1756
+ margin-right: 8px;
1757
+ font-size: 14px;
1758
+ text-overflow: ellipsis;
1759
+ white-space: nowrap;
1760
+ }
1761
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-dial-code {
1762
+ color: gray;
1763
+ font-size: 14px;
1764
+ }
1670
1765
  .qr-journey-form-wrapper .disabled-product-fields-section {
1671
1766
  background-color: rgb(243, 243, 243);
1672
1767
  padding: 1rem;
@@ -1872,7 +1967,7 @@
1872
1967
  background-color: rgb(196, 38, 46);
1873
1968
  color: #FFFFFF;
1874
1969
  }
1875
- .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked h3 {
1970
+ .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page h3 {
1876
1971
  color: black;
1877
1972
  font-weight: 700;
1878
1973
  }
package/dist/index.esm.js CHANGED
@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3
3
  import { faChevronDown, faChevronRight, faArrowRight } from '@fortawesome/pro-solid-svg-icons';
4
4
  import { v4 } from 'uuid';
5
5
  import { PhoneInput } from 'react-international-phone';
6
- import 'react-international-phone/style.css';
7
6
 
8
7
  /******************************************************************************
9
8
  Copyright (c) Microsoft Corporation.
@@ -1368,7 +1367,7 @@ var QrForm = function (props) {
1368
1367
  className: "progress-indicator-desktop current-page-".concat(currentPage, " ").concat(currentPage === 0 ? "first-page" : "")
1369
1368
  }, pages.map(function (_, index) {
1370
1369
  return /*#__PURE__*/React.createElement("li", {
1371
- className: currentPage >= index ? "checked" : "",
1370
+ className: "".concat(currentPage >= index ? "checked" : "", " ").concat(index === currentPage ? "current-page" : ""),
1372
1371
  key: index
1373
1372
  }, /*#__PURE__*/React.createElement("div", {
1374
1373
  className: "bullet-point"