@ebay/skin 16.5.0 → 16.6.0-0

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 (73) hide show
  1. package/.storybook/preview-head.html +67 -11
  2. package/.stylelintrc +4 -7
  3. package/dist/alert-dialog/alert-dialog.css +0 -1
  4. package/dist/button/button.css +4 -0
  5. package/dist/carousel/carousel.css +26 -7
  6. package/dist/confirm-dialog/confirm-dialog.css +0 -1
  7. package/dist/drawer-dialog/drawer-dialog.css +0 -1
  8. package/dist/field/field.css +2 -2
  9. package/dist/fullscreen-dialog/fullscreen-dialog.css +0 -1
  10. package/dist/global/global.css +1 -0
  11. package/dist/icon/icon.css +32 -0
  12. package/dist/lightbox-dialog/lightbox-dialog.css +21 -0
  13. package/dist/listbox-button/listbox-button.css +4 -0
  14. package/dist/page-notice/page-notice.css +9 -4
  15. package/dist/panel-dialog/panel-dialog.css +0 -1
  16. package/dist/section-notice/section-notice.css +4 -4
  17. package/dist/snackbar-dialog/snackbar-dialog.css +0 -1
  18. package/dist/svg/icon/icon-arrows-3d-filled-64-colored.svg +9 -0
  19. package/dist/svg/icon/icon-discount-16.svg +7 -0
  20. package/dist/svg/icon/icon-discount-24.svg +7 -0
  21. package/dist/svg/icon/icon-package-16.svg +7 -0
  22. package/dist/svg/icon/icon-package-24.svg +4 -2
  23. package/dist/svg/icon/icon-pause-filled-64-colored.svg +3 -1
  24. package/dist/svg/icon/icon-phone-16.svg +5 -0
  25. package/dist/svg/icon/icon-phone-24.svg +3 -1
  26. package/dist/svg/icon/icon-promotion-16.svg +7 -0
  27. package/dist/svg/icon/icon-promotion-24.svg +7 -0
  28. package/dist/svg/icon/icon-search-similar-16.svg +1 -4
  29. package/dist/svg/icon/icon-search-similar-20.svg +2 -5
  30. package/dist/svg/icon/icon-search-similar-24.svg +7 -0
  31. package/dist/svg/icon/icon-wrench-16.svg +2 -2
  32. package/dist/svg/icon/icon-wrench-24.svg +2 -2
  33. package/dist/svg/icons.svg +67 -11
  34. package/dist/textbox/textbox.css +1 -1
  35. package/dist/toast-dialog/toast-dialog.css +6 -3
  36. package/package.json +3 -3
  37. package/src/less/button/button.less +5 -0
  38. package/src/less/button/stories/destructive-button/borderless.stories.js +4 -0
  39. package/src/less/carousel/carousel.less +42 -7
  40. package/src/less/carousel/stories/carousel.stories.js +167 -40
  41. package/src/less/field/field.less +2 -2
  42. package/src/less/global/global.less +1 -0
  43. package/src/less/icon/generated/icon.less +32 -0
  44. package/src/less/lightbox-dialog/lightbox-dialog.less +28 -0
  45. package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +110 -0
  46. package/src/less/listbox-button/listbox-button.less +9 -0
  47. package/src/less/mixins/private/dialog-mixins.less +0 -1
  48. package/src/less/page-notice/page-notice.less +14 -4
  49. package/src/less/section-notice/section-notice.less +4 -4
  50. package/src/less/textbox/textbox.less +1 -1
  51. package/src/less/toast-dialog/toast-dialog.less +6 -2
  52. package/src/svg/icon/icon-arrows-3d-filled-64-colored.svg +9 -0
  53. package/src/svg/icon/icon-discount-16.svg +7 -0
  54. package/src/svg/icon/icon-discount-24.svg +7 -0
  55. package/src/svg/icon/icon-package-16.svg +7 -0
  56. package/src/svg/icon/icon-package-24.svg +4 -2
  57. package/src/svg/icon/icon-pause-filled-64-colored.svg +3 -1
  58. package/src/svg/icon/icon-phone-16.svg +5 -0
  59. package/src/svg/icon/icon-phone-24.svg +3 -1
  60. package/src/svg/icon/icon-promotion-16.svg +7 -0
  61. package/src/svg/icon/icon-promotion-24.svg +7 -0
  62. package/src/svg/icon/icon-search-similar-16.svg +1 -4
  63. package/src/svg/icon/icon-search-similar-20.svg +2 -5
  64. package/src/svg/icon/icon-search-similar-24.svg +7 -0
  65. package/src/svg/icon/icon-wrench-16.svg +2 -2
  66. package/src/svg/icon/icon-wrench-24.svg +2 -2
  67. package/src/svg/icons.svg +67 -11
  68. package/svg.svg +67 -11
  69. package/_cdn/skin/v16.5.0/skin-default.min.css +0 -6
  70. package/_cdn/skin/v16.5.0/skin-full.min.css +0 -6
  71. package/_cdn/skin/v16.5.0/skin-headless.min.css +0 -6
  72. package/_cdn/skin/v16.5.0/skin-legacy.min.css +0 -6
  73. /package/dist/svg/icon/{icon-zoom-in-16.svg → icon-zoom-In-16.svg} +0 -0
@@ -265,6 +265,15 @@
265
265
  d="M20.003 15.995h-2.285c1.952-1.714 3.466-3.62 4.363-5.476 1.064-2.203 1.358-4.582.051-6.388-.93-1.286-2.45-1.95-4.114-2.098-1.669-.149-3.566.21-5.433 1.056a1 1 0 1 0 .827 1.82c1.61-.73 3.162-.998 4.43-.885 1.272.113 2.175.595 2.668 1.277.672.93.7 2.42-.232 4.349-.813 1.684-2.285 3.517-4.274 5.18v-2.834a1 1 0 0 0-2 0v4.91A1 1 0 0 0 15 17.994h5.002a1 1 0 1 0 0-2ZM9.997 6.998v4.998a1 1 0 0 1-2.001 0V9.157c-1.989 1.663-3.46 3.495-4.274 5.18-.932 1.928-.904 3.42-.232 4.348.497.688 1.395 1.173 2.657 1.29 1.26.116 2.808-.15 4.435-.891a1.001 1.001 0 0 1 .83 1.818c-1.883.86-3.781 1.217-5.448 1.063-1.664-.153-3.17-.829-4.096-2.11C.56 18.05.855 15.67 1.919 13.469c.896-1.854 2.407-3.758 4.357-5.47H3.993a1 1 0 1 1 0-2h5.003a1 1 0 0 1 .996.898l.005.102Z"
266
266
  />
267
267
  </symbol>
268
+ <symbol viewBox="0 0 64 64" id="icon-arrows-3d-filled-64-colored">
269
+ <circle cx="32" cy="32" r="32" fill="#fff" fill-opacity=".88" />
270
+ <path
271
+ fill-rule="evenodd"
272
+ clip-rule="evenodd"
273
+ d="M26 35a2 2 0 0 1-2-2v-3.1c-1.91 2.297-3.091 4.591-3.637 6.633-.781 2.923-.225 5.082.96 6.307 1.185 1.173 4.15 1.754 7.96.293a2 2 0 0 1 1.433 3.734c-4.43 1.7-9.402 1.621-12.23-1.208l-.01-.009-.008-.01c-2.492-2.556-2.982-6.351-1.97-10.14.746-2.79 2.325-5.714 4.716-8.5H18a2 2 0 1 1 0-4h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Zm7.283-17.868a2 2 0 1 0 1.433 3.735c3.81-1.461 6.776-.88 7.96.293 1.185 1.225 1.741 3.384.96 6.307-.546 2.041-1.727 4.335-3.637 6.633V31a2 2 0 0 0-4 0v8a2 2 0 0 0 2 2h8a2 2 0 0 0 0-4h-3.214c2.391-2.786 3.97-5.71 4.715-8.5 1.013-3.789.523-7.584-1.968-10.141l-.01-.01-.009-.008c-2.828-2.83-7.8-2.907-12.23-1.209Z"
274
+ fill="#191919"
275
+ />
276
+ </symbol>
268
277
  <symbol viewBox="0 0 16 16" id="icon-article-16">
269
278
  <path
270
279
  d="M8 4a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2H8Zm0 3a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2H8Zm-1 4a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z"
@@ -1574,6 +1583,20 @@
1574
1583
  d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.078.078 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026 13.83 13.83 0 0 0 1.226-1.963.074.074 0 0 0-.041-.104 13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028ZM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38Zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38Z"
1575
1584
  />
1576
1585
  </symbol>
1586
+ <symbol viewBox="0 0 16 16" id="icon-discount-16">
1587
+ <path
1588
+ fill-rule="evenodd"
1589
+ clip-rule="evenodd"
1590
+ d="M6.896 3.497 8 2.256l1.103 1.24A1.5 1.5 0 0 0 10.224 4H12v1.776c0 .428.183.836.503 1.121L13.745 8l-1.242 1.104a1.5 1.5 0 0 0-.503 1.12V12h-1.776a1.5 1.5 0 0 0-1.12.504L8 13.745l-1.104-1.241A1.5 1.5 0 0 0 5.776 12H4v-1.775a1.5 1.5 0 0 0-.504-1.121L2.255 8l1.241-1.103A1.5 1.5 0 0 0 4 5.776V4h1.775a1.5 1.5 0 0 0 1.121-.503ZM9.121.507a1.5 1.5 0 0 0-2.242 0L5.55 2H3.5A1.5 1.5 0 0 0 2 3.5v2.051L.506 6.88a1.5 1.5 0 0 0 0 2.243L2 10.45v2.05A1.5 1.5 0 0 0 3.5 14h2.05l1.329 1.494a1.5 1.5 0 0 0 2.242 0L10.449 14h2.05a1.5 1.5 0 0 0 1.5-1.5v-2.05l1.495-1.328a1.5 1.5 0 0 0 0-2.243L14 5.551v-2.05A1.5 1.5 0 0 0 12.5 2h-2.051L9.12.505ZM10 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM7 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm3.78.28a.75.75 0 1 0-1.06-1.06l-4.5 4.5a.75.75 0 1 0 1.06 1.06l4.5-4.5Z"
1591
+ />
1592
+ </symbol>
1593
+ <symbol viewBox="0 0 24 24" id="icon-discount-24">
1594
+ <path
1595
+ fill-rule="evenodd"
1596
+ clip-rule="evenodd"
1597
+ d="M13.392.566a2 2 0 0 0-2.783 0L8.095 3.001H5a2 2 0 0 0-2 2v3.536L.71 10.473a2 2 0 0 0 0 3.055L3 15.465v3.536a2 2 0 0 0 2 2h3.095l2.514 2.434a2 2 0 0 0 2.783 0l2.513-2.434H19a2 2 0 0 0 2-2v-3.536l2.292-1.937a2 2 0 0 0 0-3.055L21 8.537V5a2 2 0 0 0-2-2h-3.095L13.392.566ZM12 2.003l2.514 2.434a2 2 0 0 0 1.391.564H19v3.536a2 2 0 0 0 .71 1.527L22 12.001l-2.29 1.937a2 2 0 0 0-.71 1.527v3.536h-3.095a2 2 0 0 0-1.391.563L12 21.998l-2.513-2.434a2 2 0 0 0-1.392-.563H5v-3.536a2 2 0 0 0-.709-1.527L2 12l2.291-1.937a2 2 0 0 0 .71-1.527V5h3.094a2 2 0 0 0 1.392-.564L12 2.003Zm4.707 6.704a1 1 0 1 0-1.414-1.414l-8 8a1 1 0 1 0 1.414 1.415l8-8ZM10 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
1598
+ />
1599
+ </symbol>
1577
1600
  <symbol viewBox="0 0 20 12" id="icon-discover-12-colored">
1578
1601
  <rect
1579
1602
  x=".5"
@@ -5443,9 +5466,18 @@
5443
5466
  d="M12 7a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 7Zm0 7a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 14Zm2 5a2 2 0 1 1-3.999.001A2 2 0 0 1 14 19Z"
5444
5467
  />
5445
5468
  </symbol>
5469
+ <symbol viewBox="0 0 16 16" id="icon-package-16">
5470
+ <path
5471
+ fill-rule="evenodd"
5472
+ clip-rule="evenodd"
5473
+ d="M3.535 3 2.87 4H7V3H3.535ZM9 3v1h4.132l-.667-1H9ZM7 6H2v6.5a.5.5 0 0 0 .5.5H7V6Zm2 7V6h5v6.5a.5.5 0 0 1-.5.5H9ZM2.02 1.668A1.5 1.5 0 0 1 3.268 1h9.464c.502 0 .97.25 1.248.668l1.6 2.4c.274.41.42.893.42 1.386V12.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5V5.454a2.5 2.5 0 0 1 .42-1.387l1.6-2.399Z"
5474
+ />
5475
+ </symbol>
5446
5476
  <symbol viewBox="0 0 24 24" id="icon-package-24">
5447
5477
  <path
5448
- d="M23 7c-.005-.184-.054-.407-.16-.56l-3-4A.998.998 0 0 0 19 2H5a1 1 0 0 0-.8.4l-3 4A1.37 1.37 0 0 0 1 7v14a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1V7Zm-3-1h-7V4h5.5L20 6Zm-9-2v2H4l1.5-2H11ZM3 8h8v12H3V8Zm18 0v12h-8V8h8Z"
5478
+ fill-rule="evenodd"
5479
+ clip-rule="evenodd"
5480
+ d="M3.9 2.8A2 2 0 0 1 5.5 2h13a2 2 0 0 1 1.6.8l2.3 3.067a3 3 0 0 1 .6 1.8V19a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V7.667a3 3 0 0 1 .6-1.8L3.9 2.8ZM18.5 4H13v2h7l-1.5-2ZM21 8h-8v12h7a1 1 0 0 0 1-1V8ZM11 6V4H5.5L4 6h7ZM3 8v11a1 1 0 0 0 1 1h7V8H3Z"
5449
5481
  />
5450
5482
  </symbol>
5451
5483
  <symbol viewBox="0 0 64 64" id="icon-package-64">
@@ -5475,7 +5507,9 @@
5475
5507
  <symbol viewBox="0 0 64 64" id="icon-pause-filled-64-colored">
5476
5508
  <circle cx="32" cy="32" r="32" fill="#fff" fill-opacity=".88" />
5477
5509
  <path
5478
- d="M23.5 16a3.5 3.5 0 0 0-3.5 3.5v25a3.5 3.5 0 1 0 7 0v-25a3.5 3.5 0 0 0-3.5-3.5Zm17 0a3.5 3.5 0 0 0-3.5 3.5v25a3.5 3.5 0 1 0 7 0v-25a3.5 3.5 0 0 0-3.5-3.5Z"
5510
+ fill-rule="evenodd"
5511
+ clip-rule="evenodd"
5512
+ d="M27 20.5a3.5 3.5 0 1 0-7 0v23a3.5 3.5 0 1 0 7 0v-23Zm17 0a3.5 3.5 0 1 0-7 0v23a3.5 3.5 0 1 0 7 0v-23Z"
5479
5513
  fill="#191919"
5480
5514
  />
5481
5515
  </symbol>
@@ -6466,9 +6500,16 @@
6466
6500
  clip-rule="evenodd"
6467
6501
  />
6468
6502
  </symbol>
6503
+ <symbol viewBox="0 0 16 16" id="icon-phone-16">
6504
+ <path
6505
+ d="M4.222 2.178a.5.5 0 0 0-.708-.053L2.067 3.38c-.06.052-.067.1-.067.11.18 2.275 1.58 4.82 3.635 6.874C7.69 12.42 10.235 13.82 12.51 14c.009 0 .057-.007.11-.067l1.257-1.446a.5.5 0 0 0-.053-.709l-2.03-1.73-2.452.892a1 1 0 0 1-1.049-.233l-3-3a1 1 0 0 1-.232-1.05l.893-2.451-1.732-2.028ZM2.202.615a2.5 2.5 0 0 1 3.54.264l1.86 2.175c.39.457.504 1.09.298 1.654l-.742 2.035 2.099 2.1 2.037-.74a1.667 1.667 0 0 1 1.65.298l2.177 1.855a2.5 2.5 0 0 1 .265 3.543l-1.257 1.446c-.417.48-1.058.805-1.776.748-2.904-.228-5.87-1.951-8.132-4.214C1.958 9.517.235 6.552.006 3.648c-.056-.719.27-1.36.75-1.777L2.203.615Z"
6506
+ />
6507
+ </symbol>
6469
6508
  <symbol viewBox="0 0 24 24" id="icon-phone-24">
6470
6509
  <path
6471
- d="M5.4 2.2a1 1 0 0 1 1.307.093l4 4a1 1 0 0 1 .125 1.262L9.287 9.873l3.84 3.84 2.318-1.545a1 1 0 0 1 1.262.125l4 4A1 1 0 0 1 20.8 17.6l-3 4a1 1 0 0 1-.9.395 8.658 8.658 0 0 1-.964-.166 16.67 16.67 0 0 1-2.353-.707 19.298 19.298 0 0 1-6.79-4.415C4.427 14.341 2.988 11.72 2.14 9.7a21.537 21.537 0 0 1-.877-2.5c-.13-.465-.201-.791-.23-.937-.011-.05-.015-.062-.017-.114A.95.95 0 0 1 1.4 5.2l4-3ZM3.12 6.409l.068.251c.155.552.408 1.34.796 2.266.777 1.854 2.088 4.233 4.222 6.367a17.297 17.297 0 0 0 6.085 3.96 14.68 14.68 0 0 0 2.27.663l2.117-2.822-2.807-2.807-2.317 1.545a1 1 0 0 1-1.262-.125l-5-5a1 1 0 0 1-.125-1.262l1.545-2.318L5.906 4.32 3.121 6.41Z"
6510
+ fill-rule="evenodd"
6511
+ clip-rule="evenodd"
6512
+ d="M6.647 3.32a1 1 0 0 0-1.425-.044L3.129 5.277c-.112.107-.134.211-.128.268.266 2.877 2.541 6.609 5.689 9.76 3.147 3.15 6.875 5.428 9.75 5.695.058.005.162-.017.269-.128l2.013-2.1a1 1 0 0 0-.044-1.427l-3.28-3.024-2.929 1.555a1 1 0 0 1-1.176-.176l-4.999-4.998a1 1 0 0 1-.176-1.175l1.556-2.928L6.647 3.32ZM3.84 1.833a3 3 0 0 1 4.277.133l3.026 3.277c.577.625.695 1.544.297 2.294l-1.209 2.275 3.953 3.953 2.276-1.209a2 2 0 0 1 2.294.296l3.28 3.025a2.998 2.998 0 0 1 .132 4.279l-2.014 2.1c-.458.479-1.138.806-1.896.736-3.574-.332-7.719-3.008-10.981-6.274C4.012 13.451 1.34 9.302 1.009 5.73c-.07-.758.258-1.439.738-1.898l2.093-2Z"
6472
6513
  />
6473
6514
  </symbol>
6474
6515
  <symbol viewBox="0 0 24 24" id="icon-pin-24">
@@ -6675,6 +6716,20 @@
6675
6716
  clip-rule="evenodd"
6676
6717
  />
6677
6718
  </symbol>
6719
+ <symbol viewBox="0 0 16 16" id="icon-promotion-16">
6720
+ <path
6721
+ fill-rule="evenodd"
6722
+ clip-rule="evenodd"
6723
+ d="M5 3a1 1 0 0 1 1-1h3.392a.5.5 0 0 1 .348.141l3.104 3.01a.5.5 0 0 1 .003.715l-.749.74-2.962-2.894A2.5 2.5 0 0 0 7.389 3h-2.39Zm9.253 4.288-.746.738a2.5 2.5 0 0 1-.243 3.255L9.28 15.264a2.5 2.5 0 0 1-3.556-.02l-4.012-4.108A2.5 2.5 0 0 1 1 9.39V6c0-1.306.835-2.417 2-2.829V3a3 3 0 0 1 3-3h3.392a2.5 2.5 0 0 1 1.74.705l3.104 3.01a2.5 2.5 0 0 1 .017 3.573ZM4 5a1 1 0 0 0-1 1v3.39a.5.5 0 0 0 .142.349l4.013 4.107a.5.5 0 0 0 .711.004l3.984-3.984a.5.5 0 0 0-.005-.71L7.738 5.142A.5.5 0 0 0 7.388 5H4Zm2 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
6724
+ />
6725
+ </symbol>
6726
+ <symbol viewBox="0 0 24 24" id="icon-promotion-24">
6727
+ <path
6728
+ fill-rule="evenodd"
6729
+ clip-rule="evenodd"
6730
+ d="M6.002 4a2 2 0 0 1 2-2h5.158a1 1 0 0 1 .714.3l6.845 6.985a1 1 0 0 1-.007 1.408l-1.877 1.874L12.302 5.9A3 3 0 0 0 10.16 5H6.002V4Zm16.123 8.108-2.198 2.195a2.998 2.998 0 0 1-.802 2.805l-6.019 6.012a3 3 0 0 1-4.219.02l-6.983-6.837a3 3 0 0 1-.901-2.144V9a4.002 4.002 0 0 1 3-3.874V4a4 4 0 0 1 4-4h5.157a3 3 0 0 1 2.142.9l6.846 6.985a3 3 0 0 1-.023 4.223ZM5.002 7a2 2 0 0 0-2 2v5.16a1 1 0 0 0 .301.714l6.984 6.838a1 1 0 0 0 1.406-.007l6.019-6.012a1 1 0 0 0 .007-1.408L10.874 7.3a1 1 0 0 0-.714-.3H5.002ZM7.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
6731
+ />
6732
+ </symbol>
6678
6733
  <symbol viewBox="0 0 16 16" id="icon-qr-code-16">
6679
6734
  <path
6680
6735
  d="M2.5 0A2.5 2.5 0 0 0 0 2.5V4a1 1 0 0 0 2 0V2.5a.5.5 0 0 1 .5-.5H4a1 1 0 0 0 0-2H2.5Zm11 0A2.5 2.5 0 0 1 16 2.5V4a1 1 0 1 1-2 0V2.5a.5.5 0 0 0-.5-.5H12a1 1 0 1 1 0-2h1.5ZM0 13.5A2.5 2.5 0 0 0 2.5 16H4a1 1 0 1 0 0-2H2.5a.5.5 0 0 1-.5-.5V12a1 1 0 1 0-2 0v1.5ZM13.5 16a2.5 2.5 0 0 0 2.5-2.5V12a1 1 0 1 0-2 0v1.5a.5.5 0 0 1-.5.5H12a1 1 0 1 0 0 2h1.5ZM4 5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5Zm5 0a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V5Zm-5 5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1Zm5 0a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1Z"
@@ -7007,23 +7062,24 @@
7007
7062
  />
7008
7063
  </symbol>
7009
7064
  <symbol viewBox="0 0 16 16" id="icon-search-similar-16">
7010
- <path
7011
- d="M3.5 1H5a1 1 0 0 1 0 2H3.5a.5.5 0 0 0-.5.5V5a1 1 0 0 1-2 0V3.5A2.5 2.5 0 0 1 3.5 1ZM2 10a1 1 0 0 0-1 1v1.5A2.5 2.5 0 0 0 3.5 15H5a1 1 0 1 0 0-2H3.5a.5.5 0 0 1-.5-.5V11a1 1 0 0 0-1-1Zm11 1a1 1 0 1 1 2 0v1.5a2.5 2.5 0 0 1-2.5 2.5H11a1 1 0 1 1 0-2h1.5a.5.5 0 0 0 .5-.5V11Zm1-5a1 1 0 0 0 1-1V3.5A2.5 2.5 0 0 0 12.5 1H11a1 1 0 1 0 0 2h1.5a.5.5 0 0 1 .5.5V5a1 1 0 0 0 1 1Z"
7012
- />
7013
7065
  <path
7014
7066
  fill-rule="evenodd"
7015
7067
  clip-rule="evenodd"
7016
- d="M7 10a2.99 2.99 0 0 0 1.293-.292l1.5 1.5a1 1 0 0 0 1.414-1.415l-1.5-1.5A3 3 0 1 0 7 10Zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
7068
+ d="M6 2a1 1 0 0 0-1-1H3.5A2.5 2.5 0 0 0 1 3.5V5a1 1 0 0 0 2 0V3.5a.5.5 0 0 1 .5-.5H5a1 1 0 0 0 1-1Zm9 3a1 1 0 1 1-2 0V3.5a.5.5 0 0 0-.5-.5H11a1 1 0 1 1 0-2h1.5A2.5 2.5 0 0 1 15 3.5V5ZM3 11a1 1 0 1 0-2 0v1.5A2.5 2.5 0 0 0 3.5 15H5a1 1 0 1 0 0-2H3.5a.5.5 0 0 1-.5-.5V11Zm5-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 2c.742 0 1.436-.202 2.032-.554l2.26 2.261a1 1 0 0 0 1.415-1.414l-2.26-2.261A4 4 0 1 0 8 12Z"
7017
7069
  />
7018
7070
  </symbol>
7019
7071
  <symbol viewBox="0 0 20 20" id="icon-search-similar-20">
7020
7072
  <path
7021
- d="M1 3.999a3 3 0 0 1 3-3h2a1 1 0 0 1 0 2H4a1 1 0 0 0-1 1v2a1 1 0 1 1-2 0v-2Zm2 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H4a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2Zm16 0a3 3 0 0 1-3 3h-2a1 1 0 1 1 0-2h2a1 1 0 0 0 1-1v-2a1 1 0 1 1 2 0v2Zm-2-12a1 1 0 0 0-1-1h-2a1 1 0 1 1 0-2h2a3 3 0 0 1 3 3v2a1 1 0 1 1-2 0v-2Z"
7073
+ fill-rule="evenodd"
7074
+ clip-rule="evenodd"
7075
+ d="M3 3.999a1 1 0 0 1 1-1h2a1 1 0 1 0 0-2H4a3 3 0 0 0-3 3v2a1 1 0 1 0 2 0v-2Zm16 0a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0v-2Zm-15 13a1 1 0 0 1-1-1v-2a1 1 0 1 0-2 0v2a3 3 0 0 0 3 3h2a1 1 0 1 0 0-2H4ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 2c1.02 0 1.967-.305 2.757-.828l3.536 3.535a1 1 0 0 0 1.414-1.414l-3.535-3.536A5 5 0 1 0 10 15Z"
7022
7076
  />
7077
+ </symbol>
7078
+ <symbol viewBox="0 0 24 24" id="icon-search-similar-24">
7023
7079
  <path
7024
7080
  fill-rule="evenodd"
7025
- d="M12.446 11.032a4 4 0 1 0-1.414 1.414l1.76 1.761a1 1 0 0 0 1.415-1.414l-1.76-1.761ZM9 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
7026
7081
  clip-rule="evenodd"
7082
+ d="M7 1H4a3 3 0 0 0-3 3v3a1 1 0 0 0 2 0V4a1 1 0 0 1 1-1h3a1 1 0 0 0 0-2ZM1 17a1 1 0 1 1 2 0v3a1 1 0 0 0 1 1h3a1 1 0 1 1 0 2H4a3 3 0 0 1-3-3v-3ZM23 7a1 1 0 1 1-2 0V4a1 1 0 0 0-1-1h-3a1 1 0 1 1 0-2h3a3 3 0 0 1 3 3v3ZM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-6 4a6 6 0 1 1 10.89 3.476l4.817 4.817a1 1 0 0 1-1.414 1.414l-4.816-4.816A6 6 0 0 1 6 12Z"
7027
7083
  />
7028
7084
  </symbol>
7029
7085
  <symbol viewBox="0 0 24 24" id="icon-security-key-24">
@@ -8107,15 +8163,15 @@
8107
8163
  <symbol viewBox="0 0 16 16" id="icon-wrench-16">
8108
8164
  <path
8109
8165
  fill-rule="evenodd"
8110
- d="M4 7.586V5c0-1.847.834-3.157 2.06-3.961C7.23.27 8.696 0 10 0h1.99a1.01 1.01 0 0 1 1.006.908 1.01 1.01 0 0 1-.198.695L10.32 4.906l.774.774 3.295-2.472c.297-.23.71-.272 1.047-.108.346.167.57.53.564.915V6c0 1.358-.268 2.83-1.043 3.992C14.143 11.212 12.83 12 11 12H8.415L5.33 15.086A3.122 3.122 0 1 1 .915 10.67L4 7.586ZM10 2 8.212 4.385c-.315.401-.27.982.091 1.333l1.98 1.979c.347.358.92.407 1.324.098L14 6c0 1.142-.232 2.17-.707 2.883C12.857 9.537 12.17 10 11 10H8.01a1.006 1.006 0 0 0-.729.305l-3.364 3.367a1.122 1.122 0 1 1-1.588-1.587l3.378-3.378A.992.992 0 0 0 6 7.979V5c0-1.153.477-1.843 1.157-2.289C7.89 2.23 8.927 2 10 2Z"
8111
8166
  clip-rule="evenodd"
8167
+ d="M12 7.586V5c0-1.847-.834-3.157-2.06-3.961C8.77.27 7.305 0 6 0H4.01a1.01 1.01 0 0 0-1.006.908c-.022.24.046.494.198.695L5.68 4.906l-.774.774-3.295-2.472A1.008 1.008 0 0 0 .564 3.1 1.01 1.01 0 0 0 0 4.015V6c0 1.358.268 2.83 1.043 3.992C1.857 11.212 3.172 12 5 12h2.585l3.084 3.086a3.122 3.122 0 1 0 4.416-4.415L12 7.586ZM6 2l1.789 2.385c.314.401.27.982-.092 1.333l-1.98 1.979c-.347.358-.92.407-1.324.098L2 6c0 1.142.232 2.17.707 2.883C3.144 9.537 3.83 10 5 10h2.99c.273-.003.539.109.729.305l3.365 3.367a1.122 1.122 0 1 0 1.587-1.587l-3.378-3.378A.997.997 0 0 1 10 7.98V5c0-1.153-.477-1.843-1.157-2.289C8.11 2.23 7.073 2 6 2Z"
8112
8168
  />
8113
8169
  </symbol>
8114
8170
  <symbol viewBox="0 0 24 24" id="icon-wrench-24">
8115
8171
  <path
8116
8172
  fill-rule="evenodd"
8117
- d="M17.991 1H16c-1.853 0-3.613.56-4.92 1.766C9.759 3.984 9 5.77 9 8.008v2.588l-6.968 6.968c-1.23 1.23-1.45 3.273-.17 4.555 1.33 1.333 3.326 1.062 4.597-.2l6.953-6.903H16c2.236 0 4.019-.76 5.235-2.082C22.44 11.624 23 9.862 23 8.008V6.029a1.041 1.041 0 0 0-.483-.88 1.008 1.008 0 0 0-1.054.012l-4.308 2.588-.896-.897 2.594-4.329a1.03 1.03 0 0 0 .02-1.012 1.03 1.03 0 0 0-.882-.51Zm-1.757 2.002H16c-1.462 0-2.701.44-3.566 1.237C11.585 5.024 11 6.242 11 8.008v2.98c.006.28-.112.558-.31.747l-7.244 7.244c-.597.598-.528 1.366-.17 1.724.55.55 1.282.283 1.775-.206l7.237-7.186c.197-.199.465-.302.729-.297H16c1.763 0 2.98-.585 3.764-1.437C20.56 10.712 21 9.471 21 8.008v-.234l-3.48 2.09a1 1 0 0 1-1.242-.162l-1.968-1.97a1.004 1.004 0 0 1-.154-1.263l2.078-3.467Z"
8118
8173
  clip-rule="evenodd"
8174
+ d="M6.009 1H8c1.853 0 3.613.56 4.92 1.766C14.241 3.984 15 5.77 15 8.008v2.588l6.968 6.968c1.23 1.23 1.45 3.273.17 4.555-1.33 1.333-3.326 1.062-4.597-.2l-6.953-6.903H8c-2.236 0-4.019-.76-5.235-2.082C1.56 11.624 1 9.862 1 8.008V6.029a1.041 1.041 0 0 1 .483-.88c.322-.195.737-.19 1.054.012l4.308 2.588.896-.897-2.594-4.329a1.03 1.03 0 0 1-.02-1.012A1.03 1.03 0 0 1 6.01 1Zm1.757 2.002H8c1.462 0 2.701.44 3.566 1.237.85.785 1.434 2.003 1.434 3.769v2.98c-.006.28.112.558.31.747l7.244 7.244c.597.598.528 1.366.17 1.724-.55.55-1.282.283-1.775-.206l-7.237-7.186a1.005 1.005 0 0 0-.729-.297H8c-1.763 0-2.98-.585-3.764-1.437C3.44 10.712 3 9.471 3 8.008v-.234l3.48 2.09a1 1 0 0 0 1.242-.162l1.968-1.97a1.004 1.004 0 0 0 .154-1.263L7.766 3.002Z"
8119
8175
  />
8120
8176
  </symbol>
8121
8177
  <symbol viewBox="0 0 16 16" id="icon-yuan-16">
package/.stylelintrc CHANGED
@@ -59,6 +59,9 @@
59
59
  ]
60
60
  }
61
61
  ],
62
+ "plugin/no-unsupported-browser-features": [true, {
63
+ "ignorePartialSupport": true
64
+ }],
62
65
  "declaration-empty-line-before": null,
63
66
  "function-no-unknown": [
64
67
  true,
@@ -72,13 +75,7 @@
72
75
  ],
73
76
  "no-descending-specificity": true,
74
77
  "no-duplicate-selectors": true,
75
- "order/properties-alphabetical-order": true,
76
- "plugin/no-unsupported-browser-features": [
77
- null,
78
- {
79
- "severity": "warning"
80
- }
81
- ]
78
+ "order/properties-alphabetical-order": true
82
79
  }
83
80
  }
84
81
  ]
@@ -2,7 +2,6 @@
2
2
  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
3
  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
- --dialog-lightbox-wide-max-width: 896px;
6
5
  }
7
6
  .alert-dialog[role="alertdialog"] {
8
7
  background-color: var(--dialog-scrim-color-show);
@@ -63,6 +63,10 @@ button.btn--borderless[aria-disabled="true"],
63
63
  a.fake-btn--borderless[aria-disabled="true"] {
64
64
  border-color: transparent;
65
65
  }
66
+ button.btn--borderless.btn--destructive,
67
+ a.fake-btn--borderless.btn--destructive {
68
+ color: var(--btn-secondary-destructive-foreground-color, var(--color-foreground-attention));
69
+ }
66
70
  button.btn--slim,
67
71
  a.fake-btn--slim {
68
72
  height: 40px;
@@ -2,7 +2,6 @@
2
2
  position: relative;
3
3
  }
4
4
  .carousel__container {
5
- overflow: hidden;
6
5
  position: relative;
7
6
  white-space: nowrap;
8
7
  width: 100%;
@@ -118,10 +117,10 @@ div.carousel {
118
117
  z-index: 1;
119
118
  }
120
119
  .carousel__control--prev {
121
- left: 0;
120
+ left: -16px;
122
121
  }
123
122
  .carousel__control--next {
124
- right: 0;
123
+ right: -16px;
125
124
  }
126
125
  .carousel__control .icon--chevron-right-24 {
127
126
  margin-left: 2px;
@@ -129,6 +128,12 @@ div.carousel {
129
128
  .carousel__control .icon--chevron-left-24 {
130
129
  margin-left: -2px;
131
130
  }
131
+ .carousel__control .icon--chevron-right-12 {
132
+ margin-left: 1px;
133
+ }
134
+ .carousel__control .icon--chevron-left-12 {
135
+ margin-left: -1px;
136
+ }
132
137
  .carousel__control svg {
133
138
  color: var(--carousel-paddle-foreground-color, var(--color-foreground-primary));
134
139
  }
@@ -182,20 +187,28 @@ span.carousel__container {
182
187
  }
183
188
  [dir="rtl"] .carousel__control--prev {
184
189
  left: unset;
185
- right: 0;
190
+ right: -16px;
186
191
  }
187
192
  [dir="rtl"] .carousel__control .icon--chevron-left-24 {
188
193
  margin-left: 2px;
189
194
  }
195
+ [dir="rtl"] .carousel__control .icon--chevron-left-12 {
196
+ margin-left: 1px;
197
+ }
190
198
  [dir="rtl"] .carousel__control--next {
191
- left: 0;
199
+ left: -16px;
192
200
  right: unset;
193
201
  }
194
202
  [dir="rtl"] .carousel__control .icon--chevron-right-24 {
195
203
  margin-left: -2px;
196
204
  }
205
+ [dir="rtl"] .carousel__control .icon--chevron-right-12 {
206
+ margin-left: -1px;
207
+ }
197
208
  [dir="rtl"] .carousel__control .icon--chevron-left-24,
198
- [dir="rtl"] .carousel__control .icon--chevron-right-24 {
209
+ [dir="rtl"] .carousel__control .icon--chevron-right-24,
210
+ [dir="rtl"] .carousel__control .icon--chevron-left-12,
211
+ [dir="rtl"] .carousel__control .icon--chevron-right-12 {
199
212
  transform: rotate(180deg);
200
213
  }
201
214
  /* autoprefixer: ignore next */
@@ -261,7 +274,7 @@ span.carousel__container {
261
274
  border-right-width: calc(100vw + 100vh);
262
275
  }
263
276
  .carousel__snap-point {
264
- scroll-snap-align: start;
277
+ scroll-snap-align: flex-start;
265
278
  scroll-snap-coordinate: 0 0;
266
279
  }
267
280
  /* autoprefixer: on */
@@ -283,3 +296,9 @@ span.carousel__container {
283
296
  .carousel--hidden-scrollbar .carousel__container .carousel__list {
284
297
  padding-bottom: 80px;
285
298
  }
299
+ .carousel--hidden-scrollbar .carousel__control--prev {
300
+ left: 0;
301
+ }
302
+ .carousel--hidden-scrollbar .carousel__control--next {
303
+ right: 0;
304
+ }
@@ -2,7 +2,6 @@
2
2
  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
3
  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
- --dialog-lightbox-wide-max-width: 896px;
6
5
  }
7
6
  .confirm-dialog[role="dialog"] {
8
7
  background-color: var(--dialog-scrim-color-show);
@@ -2,7 +2,6 @@
2
2
  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
3
  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
- --dialog-lightbox-wide-max-width: 896px;
6
5
  }
7
6
  .drawer-dialog[role="dialog"] {
8
7
  background-color: var(--dialog-scrim-color-show);
@@ -22,7 +22,7 @@ div.field--table {
22
22
  }
23
23
  .field__description--group {
24
24
  display: flex;
25
- justify-content: end;
25
+ justify-content: flex-end;
26
26
  }
27
27
  .field__description--group > :last-child {
28
28
  margin-left: 5px;
@@ -111,7 +111,7 @@ div.field__description {
111
111
  vertical-align: top;
112
112
  }
113
113
  .field__group--align-top > .field__label {
114
- align-self: start;
114
+ align-self: flex-start;
115
115
  margin-top: 16px;
116
116
  }
117
117
  [dir="rtl"] .field__description--group > :last-child {
@@ -2,7 +2,6 @@
2
2
  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
3
  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
- --dialog-lightbox-wide-max-width: 896px;
6
5
  }
7
6
  .fullscreen-dialog[role="dialog"] {
8
7
  background-color: var(--dialog-scrim-color-show);
@@ -3,6 +3,7 @@ body {
3
3
  color: var(--color-foreground-primary);
4
4
  font-family: "Market Sans", Arial, sans-serif;
5
5
  font-size: 0.875rem;
6
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
6
7
  -webkit-text-size-adjust: 100%;
7
8
  }
8
9
  fieldset {
@@ -111,6 +111,10 @@ svg.icon--arrows-3d-24 {
111
111
  height: 24px;
112
112
  width: 24px;
113
113
  }
114
+ svg.icon--arrows-3d-filled-64-colored {
115
+ height: 64px;
116
+ width: 64px;
117
+ }
114
118
  svg.icon--article-16 {
115
119
  height: 16px;
116
120
  width: 16px;
@@ -743,6 +747,14 @@ svg.icon--discord-24 {
743
747
  height: 24px;
744
748
  width: 24px;
745
749
  }
750
+ svg.icon--discount-16 {
751
+ height: 16px;
752
+ width: 16px;
753
+ }
754
+ svg.icon--discount-24 {
755
+ height: 24px;
756
+ width: 24px;
757
+ }
746
758
  svg.icon--discover-12-colored {
747
759
  height: 12px;
748
760
  width: 20px;
@@ -1715,6 +1727,10 @@ svg.icon--overflow-vertical-24 {
1715
1727
  height: 24px;
1716
1728
  width: 24px;
1717
1729
  }
1730
+ svg.icon--package-16 {
1731
+ height: 16px;
1732
+ width: 16px;
1733
+ }
1718
1734
  svg.icon--package-24 {
1719
1735
  height: 24px;
1720
1736
  width: 24px;
@@ -1823,6 +1839,10 @@ svg.icon--peso-24 {
1823
1839
  height: 24px;
1824
1840
  width: 24px;
1825
1841
  }
1842
+ svg.icon--phone-16 {
1843
+ height: 16px;
1844
+ width: 16px;
1845
+ }
1826
1846
  svg.icon--phone-24 {
1827
1847
  height: 24px;
1828
1848
  width: 24px;
@@ -1919,6 +1939,14 @@ svg.icon--progress-upcoming-24 {
1919
1939
  height: 24px;
1920
1940
  width: 24px;
1921
1941
  }
1942
+ svg.icon--promotion-16 {
1943
+ height: 16px;
1944
+ width: 16px;
1945
+ }
1946
+ svg.icon--promotion-24 {
1947
+ height: 24px;
1948
+ width: 24px;
1949
+ }
1922
1950
  svg.icon--qr-code-16 {
1923
1951
  height: 16px;
1924
1952
  width: 16px;
@@ -2119,6 +2147,10 @@ svg.icon--search-similar-20 {
2119
2147
  height: 20px;
2120
2148
  width: 20px;
2121
2149
  }
2150
+ svg.icon--search-similar-24 {
2151
+ height: 24px;
2152
+ width: 24px;
2153
+ }
2122
2154
  svg.icon--security-key-24 {
2123
2155
  height: 24px;
2124
2156
  width: 24px;
@@ -2,7 +2,10 @@
2
2
  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
3
  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
+ }
6
+ :root {
5
7
  --dialog-lightbox-wide-max-width: 896px;
8
+ --dialog-lightbox-narrow-max-width: 480px;
6
9
  }
7
10
  .lightbox-dialog[role="dialog"] {
8
11
  background-color: var(--dialog-scrim-color-show);
@@ -102,6 +105,7 @@
102
105
  .lightbox-dialog--expressive .lightbox-dialog__footer {
103
106
  padding: 16px 24px;
104
107
  }
108
+ button.icon-btn.lightbox-dialog__prev,
105
109
  button.icon-btn.lightbox-dialog__close {
106
110
  align-self: center;
107
111
  border: 0;
@@ -111,10 +115,17 @@ button.icon-btn.lightbox-dialog__close {
111
115
  width: 32px;
112
116
  z-index: 1;
113
117
  }
118
+ button.icon-btn.lightbox-dialog__prev {
119
+ margin-right: 16px;
120
+ }
121
+ .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev,
114
122
  .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close {
115
123
  align-self: self-start;
116
124
  margin: 0;
117
125
  }
126
+ .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev + * {
127
+ margin-left: -32px;
128
+ }
118
129
  .lightbox-dialog__title:not(:first-child) {
119
130
  margin-left: 16px;
120
131
  }
@@ -165,10 +176,20 @@ button.icon-btn.lightbox-dialog__close {
165
176
  .lightbox-dialog--hide-init .lightbox-dialog__window--fade {
166
177
  opacity: 1;
167
178
  }
179
+ [dir="rtl"] button.icon-btn.lightbox-dialog__prev {
180
+ margin-left: 16px;
181
+ margin-right: 0;
182
+ }
183
+ [dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
184
+ transform: rotate(180deg);
185
+ }
168
186
  @media (min-width: 512px) {
169
187
  .lightbox-dialog__window {
170
188
  max-width: calc(88% - 32px);
171
189
  }
190
+ .lightbox-dialog--narrow .lightbox-dialog__window {
191
+ max-width: var(--dialog-lightbox-narrow-max-width);
192
+ }
172
193
  .lightbox-dialog__window .lightbox-dialog__footer {
173
194
  flex-direction: row;
174
195
  justify-content: flex-end;
@@ -6,6 +6,10 @@
6
6
  span.listbox-button {
7
7
  display: inline-block;
8
8
  }
9
+ .listbox-button .btn {
10
+ padding-left: 15px;
11
+ padding-right: 15px;
12
+ }
9
13
  span.listbox-button--fluid,
10
14
  span.listbox-button--fluid .expand-btn,
11
15
  span.listbox-button--fluid .btn {
@@ -47,6 +47,11 @@ span[role="region"].page-notice {
47
47
  .page-notice button.fake-link:hover {
48
48
  color: var(--page-notice-color, var(--color-foreground-on-inverse));
49
49
  }
50
+ .page-notice a:focus-visible,
51
+ .page-notice button.fake-link:focus-visible {
52
+ outline: 2px solid var(--color-foreground-on-inverse);
53
+ outline-offset: 2px;
54
+ }
50
55
  .page-notice--attention {
51
56
  background-color: var(--page-notice-attention-background-color, var(--color-background-attention));
52
57
  border-color: var(--page-notice-attention-border-color, var(--color-stroke-attention));
@@ -100,7 +105,8 @@ span[role="region"].page-notice {
100
105
  p.page-notice__cta {
101
106
  grid-column: 2;
102
107
  grid-row: 2;
103
- justify-self: start;
108
+ justify-self: flex-start;
109
+ margin-bottom: 0;
104
110
  margin-right: 16px;
105
111
  margin-top: 16px;
106
112
  }
@@ -115,13 +121,12 @@ p.page-notice__cta {
115
121
  p.page-notice__cta {
116
122
  grid-column: 4;
117
123
  grid-row: 1;
118
- justify-self: end;
119
- margin-bottom: 0;
124
+ justify-self: flex-end;
120
125
  margin-top: 1px;
121
126
  padding-right: 16px;
122
127
  }
123
128
  .page-notice__footer {
124
- justify-self: end;
129
+ justify-self: flex-end;
125
130
  margin-top: 0;
126
131
  }
127
132
  }
@@ -2,7 +2,6 @@
2
2
  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
3
  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
- --dialog-lightbox-wide-max-width: 896px;
6
5
  }
7
6
  .panel-dialog[role="dialog"] {
8
7
  background-color: var(--dialog-scrim-color-show);
@@ -62,7 +62,7 @@ span[role="region"].section-notice {
62
62
  .section-notice__footer {
63
63
  grid-column: 4;
64
64
  grid-row: 1;
65
- justify-self: end;
65
+ justify-self: flex-end;
66
66
  margin-top: 2px;
67
67
  }
68
68
  .section-notice__main p {
@@ -72,7 +72,7 @@ span[role="region"].section-notice {
72
72
  p.section-notice__cta {
73
73
  grid-column: 2;
74
74
  grid-row: 2;
75
- justify-self: start;
75
+ justify-self: flex-start;
76
76
  margin-right: 16px;
77
77
  margin-top: 16px;
78
78
  }
@@ -89,7 +89,7 @@ p.section-notice__cta {
89
89
  p.section-notice__cta {
90
90
  grid-column: 4;
91
91
  grid-row: 1;
92
- justify-self: end;
92
+ justify-self: flex-end;
93
93
  margin-bottom: 0;
94
94
  margin-top: 0;
95
95
  padding-right: 16px;
@@ -103,7 +103,7 @@ p.section-notice__cta {
103
103
  padding-right: 0;
104
104
  }
105
105
  [dir="rtl"] .section-notice__footer {
106
- justify-self: start;
106
+ justify-self: flex-start;
107
107
  margin-left: initial;
108
108
  margin-right: auto;
109
109
  padding-left: initial;
@@ -2,7 +2,6 @@
2
2
  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
3
  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
- --dialog-lightbox-wide-max-width: 896px;
6
5
  }
7
6
  .snackbar-dialog {
8
7
  background-color: var(--snackbar-dialog-background-color, var(--color-background-inverse));
@@ -0,0 +1,9 @@
1
+ <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="32" cy="32" r="32" fill="#fff" fill-opacity=".88" />
3
+ <path
4
+ fill-rule="evenodd"
5
+ clip-rule="evenodd"
6
+ d="M26 35a2 2 0 0 1-2-2v-3.1c-1.91 2.297-3.091 4.591-3.637 6.633-.781 2.923-.225 5.082.96 6.307 1.185 1.173 4.15 1.754 7.96.293a2 2 0 0 1 1.433 3.734c-4.43 1.7-9.402 1.621-12.23-1.208l-.01-.009-.008-.01c-2.492-2.556-2.982-6.351-1.97-10.14.746-2.79 2.325-5.714 4.716-8.5H18a2 2 0 1 1 0-4h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Zm7.283-17.868a2 2 0 1 0 1.433 3.735c3.81-1.461 6.776-.88 7.96.293 1.185 1.225 1.741 3.384.96 6.307-.546 2.041-1.727 4.335-3.637 6.633V31a2 2 0 0 0-4 0v8a2 2 0 0 0 2 2h8a2 2 0 0 0 0-4h-3.214c2.391-2.786 3.97-5.71 4.715-8.5 1.013-3.789.523-7.584-1.968-10.141l-.01-.01-.009-.008c-2.828-2.83-7.8-2.907-12.23-1.209Z"
7
+ fill="#191919"
8
+ />
9
+ </svg>
@@ -0,0 +1,7 @@
1
+ <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ fill-rule="evenodd"
4
+ clip-rule="evenodd"
5
+ d="M6.896 3.497 8 2.256l1.103 1.24A1.5 1.5 0 0 0 10.224 4H12v1.776c0 .428.183.836.503 1.121L13.745 8l-1.242 1.104a1.5 1.5 0 0 0-.503 1.12V12h-1.776a1.5 1.5 0 0 0-1.12.504L8 13.745l-1.104-1.241A1.5 1.5 0 0 0 5.776 12H4v-1.775a1.5 1.5 0 0 0-.504-1.121L2.255 8l1.241-1.103A1.5 1.5 0 0 0 4 5.776V4h1.775a1.5 1.5 0 0 0 1.121-.503ZM9.121.507a1.5 1.5 0 0 0-2.242 0L5.55 2H3.5A1.5 1.5 0 0 0 2 3.5v2.051L.506 6.88a1.5 1.5 0 0 0 0 2.243L2 10.45v2.05A1.5 1.5 0 0 0 3.5 14h2.05l1.329 1.494a1.5 1.5 0 0 0 2.242 0L10.449 14h2.05a1.5 1.5 0 0 0 1.5-1.5v-2.05l1.495-1.328a1.5 1.5 0 0 0 0-2.243L14 5.551v-2.05A1.5 1.5 0 0 0 12.5 2h-2.051L9.12.505ZM10 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM7 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm3.78.28a.75.75 0 1 0-1.06-1.06l-4.5 4.5a.75.75 0 1 0 1.06 1.06l4.5-4.5Z"
6
+ />
7
+ </svg>
@@ -0,0 +1,7 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ fill-rule="evenodd"
4
+ clip-rule="evenodd"
5
+ d="M13.392.566a2 2 0 0 0-2.783 0L8.095 3.001H5a2 2 0 0 0-2 2v3.536L.71 10.473a2 2 0 0 0 0 3.055L3 15.465v3.536a2 2 0 0 0 2 2h3.095l2.514 2.434a2 2 0 0 0 2.783 0l2.513-2.434H19a2 2 0 0 0 2-2v-3.536l2.292-1.937a2 2 0 0 0 0-3.055L21 8.537V5a2 2 0 0 0-2-2h-3.095L13.392.566ZM12 2.003l2.514 2.434a2 2 0 0 0 1.391.564H19v3.536a2 2 0 0 0 .71 1.527L22 12.001l-2.29 1.937a2 2 0 0 0-.71 1.527v3.536h-3.095a2 2 0 0 0-1.391.563L12 21.998l-2.513-2.434a2 2 0 0 0-1.392-.563H5v-3.536a2 2 0 0 0-.709-1.527L2 12l2.291-1.937a2 2 0 0 0 .71-1.527V5h3.094a2 2 0 0 0 1.392-.564L12 2.003Zm4.707 6.704a1 1 0 1 0-1.414-1.414l-8 8a1 1 0 1 0 1.414 1.415l8-8ZM10 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
6
+ />
7
+ </svg>
@@ -0,0 +1,7 @@
1
+ <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ fill-rule="evenodd"
4
+ clip-rule="evenodd"
5
+ d="M3.535 3 2.87 4H7V3H3.535ZM9 3v1h4.132l-.667-1H9ZM7 6H2v6.5a.5.5 0 0 0 .5.5H7V6Zm2 7V6h5v6.5a.5.5 0 0 1-.5.5H9ZM2.02 1.668A1.5 1.5 0 0 1 3.268 1h9.464c.502 0 .97.25 1.248.668l1.6 2.4c.274.41.42.893.42 1.386V12.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5V5.454a2.5 2.5 0 0 1 .42-1.387l1.6-2.399Z"
6
+ />
7
+ </svg>
@@ -1,5 +1,7 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
2
  <path
3
- d="M23 7c-.005-.184-.054-.407-.16-.56l-3-4A.998.998 0 0 0 19 2H5a1 1 0 0 0-.8.4l-3 4A1.37 1.37 0 0 0 1 7v14a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1V7Zm-3-1h-7V4h5.5L20 6Zm-9-2v2H4l1.5-2H11ZM3 8h8v12H3V8Zm18 0v12h-8V8h8Z"
3
+ fill-rule="evenodd"
4
+ clip-rule="evenodd"
5
+ d="M3.9 2.8A2 2 0 0 1 5.5 2h13a2 2 0 0 1 1.6.8l2.3 3.067a3 3 0 0 1 .6 1.8V19a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V7.667a3 3 0 0 1 .6-1.8L3.9 2.8ZM18.5 4H13v2h7l-1.5-2ZM21 8h-8v12h7a1 1 0 0 0 1-1V8ZM11 6V4H5.5L4 6h7ZM3 8v11a1 1 0 0 0 1 1h7V8H3Z"
4
6
  />
5
7
  </svg>
@@ -1,7 +1,9 @@
1
1
  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
2
2
  <circle cx="32" cy="32" r="32" fill="#fff" fill-opacity=".88" />
3
3
  <path
4
- d="M23.5 16a3.5 3.5 0 0 0-3.5 3.5v25a3.5 3.5 0 1 0 7 0v-25a3.5 3.5 0 0 0-3.5-3.5Zm17 0a3.5 3.5 0 0 0-3.5 3.5v25a3.5 3.5 0 1 0 7 0v-25a3.5 3.5 0 0 0-3.5-3.5Z"
4
+ fill-rule="evenodd"
5
+ clip-rule="evenodd"
6
+ d="M27 20.5a3.5 3.5 0 1 0-7 0v23a3.5 3.5 0 1 0 7 0v-23Zm17 0a3.5 3.5 0 1 0-7 0v23a3.5 3.5 0 1 0 7 0v-23Z"
5
7
  fill="#191919"
6
8
  />
7
9
  </svg>
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
2
+ <path
3
+ d="M4.222 2.178a.5.5 0 0 0-.708-.053L2.067 3.38c-.06.052-.067.1-.067.11.18 2.275 1.58 4.82 3.635 6.874C7.69 12.42 10.235 13.82 12.51 14c.009 0 .057-.007.11-.067l1.257-1.446a.5.5 0 0 0-.053-.709l-2.03-1.73-2.452.892a1 1 0 0 1-1.049-.233l-3-3a1 1 0 0 1-.232-1.05l.893-2.451-1.732-2.028ZM2.202.615a2.5 2.5 0 0 1 3.54.264l1.86 2.175c.39.457.504 1.09.298 1.654l-.742 2.035 2.099 2.1 2.037-.74a1.667 1.667 0 0 1 1.65.298l2.177 1.855a2.5 2.5 0 0 1 .265 3.543l-1.257 1.446c-.417.48-1.058.805-1.776.748-2.904-.228-5.87-1.951-8.132-4.214C1.958 9.517.235 6.552.006 3.648c-.056-.719.27-1.36.75-1.777L2.203.615Z"
4
+ />
5
+ </svg>