@asantemedia-org/edwardsvacuum-design-system 1.6.44 → 1.6.46

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.
Files changed (11) hide show
  1. package/dist/index.css +121 -6
  2. package/dist/index.esm.css +121 -6
  3. package/dist/index.esm.js +0 -1
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +38 -45
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.scss +121 -6
  8. package/dist/stories/experiences/QRFormJourney/FormFieldType.d.ts +0 -1
  9. package/dist/stories/experiences/QRFormJourney/Qr-form/Qr-form.d.ts +1 -0
  10. package/dist/tsconfig.tsbuildinfo +1 -1
  11. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -495,6 +495,9 @@
495
495
  color: rgb(255, 255, 255);
496
496
  border-color: #2d363a;
497
497
  }
498
+ .Button-module__cmp-button___SMjDF:visited {
499
+ color: rgb(255, 255, 255);
500
+ }
498
501
  @keyframes algolia-dynamic-search-module__loading___Hb3Uw {
499
502
  0% {
500
503
  transform: skewX(-10deg) translateX(-100%);
@@ -1651,30 +1654,117 @@
1651
1654
  font-size: 12px;
1652
1655
  line-height: 18px;
1653
1656
  }
1657
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector {
1658
+ position: relative;
1659
+ }
1654
1660
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container {
1661
+ display: flex;
1655
1662
  width: 100%;
1656
1663
  }
1657
1664
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button {
1665
+ display: flex;
1658
1666
  height: calc(2.3em + 20px);
1667
+ box-sizing: border-box;
1668
+ align-items: center;
1669
+ justify-content: center;
1670
+ padding: 0 10px;
1659
1671
  border: 1px solid;
1660
1672
  border-right: none;
1661
- padding: 0 10px;
1673
+ margin: 0;
1662
1674
  background: white;
1663
1675
  border-radius: 0;
1676
+ cursor: pointer;
1677
+ -webkit-user-select: none;
1678
+ -moz-user-select: none;
1679
+ user-select: none;
1680
+ }
1681
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button:hover {
1682
+ background-color: #f5f5f5;
1683
+ }
1684
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__button-content {
1685
+ display: flex;
1686
+ align-items: center;
1687
+ justify-content: center;
1688
+ }
1689
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__flag-emoji,
1690
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-flag-emoji {
1691
+ width: 24px;
1692
+ height: 24px;
1693
+ margin: 0 4px;
1694
+ box-sizing: border-box;
1695
+ }
1696
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow {
1697
+ border-top: 4px solid #777;
1698
+ border-right: 4px solid transparent;
1699
+ border-left: 4px solid transparent;
1700
+ margin-right: 4px;
1701
+ transition: all 0.1s ease-out;
1702
+ }
1703
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow--active {
1704
+ transform: rotateX(180deg);
1664
1705
  }
1665
1706
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input {
1666
1707
  width: 100%;
1667
- height: calc(2.3em - 2px);
1708
+ height: calc(2.3em + 20px);
1709
+ box-sizing: border-box;
1668
1710
  line-height: 1em;
1669
1711
  padding: 10px 18px;
1670
1712
  border: 1px solid;
1671
1713
  font-size: 18px;
1672
1714
  border-radius: 0;
1715
+ margin: 0;
1716
+ font-family: inherit;
1673
1717
  }
1674
- .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 {
1718
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus {
1719
+ outline: none;
1720
+ border: 2px solid #678B3B;
1721
+ }
1722
+ .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 {
1675
1723
  border: 2px solid #678B3B;
1676
1724
  outline: none;
1677
1725
  }
1726
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown {
1727
+ position: absolute;
1728
+ z-index: 100;
1729
+ top: 44px;
1730
+ left: 0;
1731
+ display: flex;
1732
+ width: 300px;
1733
+ max-height: 200px;
1734
+ flex-direction: column;
1735
+ padding: 4px 0;
1736
+ margin: 0;
1737
+ background-color: white;
1738
+ box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
1739
+ color: #222;
1740
+ list-style: none;
1741
+ overflow-y: scroll;
1742
+ }
1743
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item {
1744
+ display: flex;
1745
+ min-height: 28px;
1746
+ box-sizing: border-box;
1747
+ align-items: center;
1748
+ padding: 2px 8px;
1749
+ cursor: pointer;
1750
+ }
1751
+ .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 {
1752
+ background-color: #f5f5f5;
1753
+ }
1754
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-flag-emoji {
1755
+ margin-right: 8px;
1756
+ }
1757
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-country-name {
1758
+ overflow: hidden;
1759
+ margin-right: 8px;
1760
+ font-size: 14px;
1761
+ text-overflow: ellipsis;
1762
+ white-space: nowrap;
1763
+ }
1764
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-dial-code {
1765
+ color: gray;
1766
+ font-size: 14px;
1767
+ }
1678
1768
  .qr-journey-form-wrapper .disabled-product-fields-section {
1679
1769
  background-color: rgb(243, 243, 243);
1680
1770
  padding: 1rem;
@@ -1744,9 +1834,30 @@
1744
1834
  }
1745
1835
  .qr-journey-form-wrapper .qr-form-thank-you-page {
1746
1836
  position: relative;
1837
+ display: flex;
1838
+ flex-direction: column;
1839
+ gap: 1rem;
1840
+ }
1841
+ .qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper {
1842
+ display: flex;
1843
+ align-items: center;
1844
+ justify-content: space-between;
1845
+ flex-direction: row-reverse;
1846
+ gap: 1rem;
1847
+ }
1848
+ .qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper h2 {
1849
+ margin: 0;
1850
+ }
1851
+ @media (min-width: 768px) {
1852
+ .qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper {
1853
+ flex-direction: column;
1854
+ justify-content: unset;
1855
+ align-items: flex-start;
1856
+ }
1747
1857
  }
1748
1858
  .qr-journey-form-wrapper .qr-form-thank-you-page p {
1749
1859
  line-height: 1.2em;
1860
+ margin: 0;
1750
1861
  }
1751
1862
  .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
1752
1863
  background-color: white;
@@ -1754,9 +1865,13 @@
1754
1865
  height: 60px;
1755
1866
  border-radius: 50%;
1756
1867
  border: 6px solid rgb(196, 38, 46);
1757
- position: absolute;
1758
- top: -20px;
1759
- right: 0;
1868
+ position: relative;
1869
+ margin-left: auto;
1870
+ }
1871
+ @media (min-width: 768px) {
1872
+ .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
1873
+ margin-left: 0;
1874
+ }
1760
1875
  }
1761
1876
  .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:after, .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:before {
1762
1877
  position: absolute;
package/dist/index.esm.css CHANGED
@@ -495,6 +495,9 @@
495
495
  color: rgb(255, 255, 255);
496
496
  border-color: #2d363a;
497
497
  }
498
+ .Button-module__cmp-button___SMjDF:visited {
499
+ color: rgb(255, 255, 255);
500
+ }
498
501
  @keyframes algolia-dynamic-search-module__loading___Hb3Uw {
499
502
  0% {
500
503
  transform: skewX(-10deg) translateX(-100%);
@@ -1651,30 +1654,117 @@
1651
1654
  font-size: 12px;
1652
1655
  line-height: 18px;
1653
1656
  }
1657
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector {
1658
+ position: relative;
1659
+ }
1654
1660
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container {
1661
+ display: flex;
1655
1662
  width: 100%;
1656
1663
  }
1657
1664
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button {
1665
+ display: flex;
1658
1666
  height: calc(2.3em + 20px);
1667
+ box-sizing: border-box;
1668
+ align-items: center;
1669
+ justify-content: center;
1670
+ padding: 0 10px;
1659
1671
  border: 1px solid;
1660
1672
  border-right: none;
1661
- padding: 0 10px;
1673
+ margin: 0;
1662
1674
  background: white;
1663
1675
  border-radius: 0;
1676
+ cursor: pointer;
1677
+ -webkit-user-select: none;
1678
+ -moz-user-select: none;
1679
+ user-select: none;
1680
+ }
1681
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button:hover {
1682
+ background-color: #f5f5f5;
1683
+ }
1684
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__button-content {
1685
+ display: flex;
1686
+ align-items: center;
1687
+ justify-content: center;
1688
+ }
1689
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__flag-emoji,
1690
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-flag-emoji {
1691
+ width: 24px;
1692
+ height: 24px;
1693
+ margin: 0 4px;
1694
+ box-sizing: border-box;
1695
+ }
1696
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow {
1697
+ border-top: 4px solid #777;
1698
+ border-right: 4px solid transparent;
1699
+ border-left: 4px solid transparent;
1700
+ margin-right: 4px;
1701
+ transition: all 0.1s ease-out;
1702
+ }
1703
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-country-selector-button__dropdown-arrow--active {
1704
+ transform: rotateX(180deg);
1664
1705
  }
1665
1706
  .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input {
1666
1707
  width: 100%;
1667
- height: calc(2.3em - 2px);
1708
+ height: calc(2.3em + 20px);
1709
+ box-sizing: border-box;
1668
1710
  line-height: 1em;
1669
1711
  padding: 10px 18px;
1670
1712
  border: 1px solid;
1671
1713
  font-size: 18px;
1672
1714
  border-radius: 0;
1715
+ margin: 0;
1716
+ font-family: inherit;
1673
1717
  }
1674
- .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 {
1718
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-input-container .react-international-phone-input:focus {
1719
+ outline: none;
1720
+ border: 2px solid #678B3B;
1721
+ }
1722
+ .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 {
1675
1723
  border: 2px solid #678B3B;
1676
1724
  outline: none;
1677
1725
  }
1726
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown {
1727
+ position: absolute;
1728
+ z-index: 100;
1729
+ top: 44px;
1730
+ left: 0;
1731
+ display: flex;
1732
+ width: 300px;
1733
+ max-height: 200px;
1734
+ flex-direction: column;
1735
+ padding: 4px 0;
1736
+ margin: 0;
1737
+ background-color: white;
1738
+ box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
1739
+ color: #222;
1740
+ list-style: none;
1741
+ overflow-y: scroll;
1742
+ }
1743
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item {
1744
+ display: flex;
1745
+ min-height: 28px;
1746
+ box-sizing: border-box;
1747
+ align-items: center;
1748
+ padding: 2px 8px;
1749
+ cursor: pointer;
1750
+ }
1751
+ .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 {
1752
+ background-color: #f5f5f5;
1753
+ }
1754
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-flag-emoji {
1755
+ margin-right: 8px;
1756
+ }
1757
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-country-name {
1758
+ overflow: hidden;
1759
+ margin-right: 8px;
1760
+ font-size: 14px;
1761
+ text-overflow: ellipsis;
1762
+ white-space: nowrap;
1763
+ }
1764
+ .qr-journey-form-wrapper .qr-form-filed-wrapper .react-international-phone-country-selector-dropdown__list-item-dial-code {
1765
+ color: gray;
1766
+ font-size: 14px;
1767
+ }
1678
1768
  .qr-journey-form-wrapper .disabled-product-fields-section {
1679
1769
  background-color: rgb(243, 243, 243);
1680
1770
  padding: 1rem;
@@ -1744,9 +1834,30 @@
1744
1834
  }
1745
1835
  .qr-journey-form-wrapper .qr-form-thank-you-page {
1746
1836
  position: relative;
1837
+ display: flex;
1838
+ flex-direction: column;
1839
+ gap: 1rem;
1840
+ }
1841
+ .qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper {
1842
+ display: flex;
1843
+ align-items: center;
1844
+ justify-content: space-between;
1845
+ flex-direction: row-reverse;
1846
+ gap: 1rem;
1847
+ }
1848
+ .qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper h2 {
1849
+ margin: 0;
1850
+ }
1851
+ @media (min-width: 768px) {
1852
+ .qr-journey-form-wrapper .qr-form-thank-you-page .title-wrapper {
1853
+ flex-direction: column;
1854
+ justify-content: unset;
1855
+ align-items: flex-start;
1856
+ }
1747
1857
  }
1748
1858
  .qr-journey-form-wrapper .qr-form-thank-you-page p {
1749
1859
  line-height: 1.2em;
1860
+ margin: 0;
1750
1861
  }
1751
1862
  .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
1752
1863
  background-color: white;
@@ -1754,9 +1865,13 @@
1754
1865
  height: 60px;
1755
1866
  border-radius: 50%;
1756
1867
  border: 6px solid rgb(196, 38, 46);
1757
- position: absolute;
1758
- top: -20px;
1759
- right: 0;
1868
+ position: relative;
1869
+ margin-left: auto;
1870
+ }
1871
+ @media (min-width: 768px) {
1872
+ .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
1873
+ margin-left: 0;
1874
+ }
1760
1875
  }
1761
1876
  .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:after, .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:before {
1762
1877
  position: absolute;
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.