@transferwise/components 0.0.0-experimental-bd2aa28 → 0.0.0-experimental-17d9e6b

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 (182) hide show
  1. package/build/i18n/cs.json +0 -2
  2. package/build/i18n/cs.json.js +0 -2
  3. package/build/i18n/cs.json.js.map +1 -1
  4. package/build/i18n/cs.json.mjs +0 -2
  5. package/build/i18n/cs.json.mjs.map +1 -1
  6. package/build/i18n/de.json +0 -2
  7. package/build/i18n/de.json.js +0 -2
  8. package/build/i18n/de.json.js.map +1 -1
  9. package/build/i18n/de.json.mjs +0 -2
  10. package/build/i18n/de.json.mjs.map +1 -1
  11. package/build/i18n/en.json +0 -2
  12. package/build/i18n/en.json.js +0 -2
  13. package/build/i18n/en.json.js.map +1 -1
  14. package/build/i18n/en.json.mjs +0 -2
  15. package/build/i18n/en.json.mjs.map +1 -1
  16. package/build/i18n/es.json +0 -2
  17. package/build/i18n/es.json.js +0 -2
  18. package/build/i18n/es.json.js.map +1 -1
  19. package/build/i18n/es.json.mjs +0 -2
  20. package/build/i18n/es.json.mjs.map +1 -1
  21. package/build/i18n/fr.json +0 -2
  22. package/build/i18n/fr.json.js +0 -2
  23. package/build/i18n/fr.json.js.map +1 -1
  24. package/build/i18n/fr.json.mjs +0 -2
  25. package/build/i18n/fr.json.mjs.map +1 -1
  26. package/build/i18n/hu.json +0 -2
  27. package/build/i18n/hu.json.js +0 -2
  28. package/build/i18n/hu.json.js.map +1 -1
  29. package/build/i18n/hu.json.mjs +0 -2
  30. package/build/i18n/hu.json.mjs.map +1 -1
  31. package/build/i18n/id.json +0 -2
  32. package/build/i18n/id.json.js +0 -2
  33. package/build/i18n/id.json.js.map +1 -1
  34. package/build/i18n/id.json.mjs +0 -2
  35. package/build/i18n/id.json.mjs.map +1 -1
  36. package/build/i18n/it.json +0 -2
  37. package/build/i18n/it.json.js +0 -2
  38. package/build/i18n/it.json.js.map +1 -1
  39. package/build/i18n/it.json.mjs +0 -2
  40. package/build/i18n/it.json.mjs.map +1 -1
  41. package/build/i18n/ja.json +0 -2
  42. package/build/i18n/ja.json.js +0 -2
  43. package/build/i18n/ja.json.js.map +1 -1
  44. package/build/i18n/ja.json.mjs +0 -2
  45. package/build/i18n/ja.json.mjs.map +1 -1
  46. package/build/i18n/nl.json +0 -2
  47. package/build/i18n/pl.json +0 -2
  48. package/build/i18n/pl.json.js +0 -2
  49. package/build/i18n/pl.json.js.map +1 -1
  50. package/build/i18n/pl.json.mjs +0 -2
  51. package/build/i18n/pl.json.mjs.map +1 -1
  52. package/build/i18n/pt.json +0 -2
  53. package/build/i18n/pt.json.js +0 -2
  54. package/build/i18n/pt.json.js.map +1 -1
  55. package/build/i18n/pt.json.mjs +0 -2
  56. package/build/i18n/pt.json.mjs.map +1 -1
  57. package/build/i18n/ro.json +0 -2
  58. package/build/i18n/ro.json.js +0 -2
  59. package/build/i18n/ro.json.js.map +1 -1
  60. package/build/i18n/ro.json.mjs +0 -2
  61. package/build/i18n/ro.json.mjs.map +1 -1
  62. package/build/i18n/ru.json +0 -2
  63. package/build/i18n/ru.json.js +0 -2
  64. package/build/i18n/ru.json.js.map +1 -1
  65. package/build/i18n/ru.json.mjs +0 -2
  66. package/build/i18n/ru.json.mjs.map +1 -1
  67. package/build/i18n/th.json +0 -2
  68. package/build/i18n/th.json.js +0 -2
  69. package/build/i18n/th.json.js.map +1 -1
  70. package/build/i18n/th.json.mjs +0 -2
  71. package/build/i18n/th.json.mjs.map +1 -1
  72. package/build/i18n/tr.json +0 -2
  73. package/build/i18n/tr.json.js +0 -2
  74. package/build/i18n/tr.json.js.map +1 -1
  75. package/build/i18n/tr.json.mjs +0 -2
  76. package/build/i18n/tr.json.mjs.map +1 -1
  77. package/build/i18n/zh-CN.json +0 -2
  78. package/build/i18n/zh-CN.json.js +0 -2
  79. package/build/i18n/zh-CN.json.js.map +1 -1
  80. package/build/i18n/zh-CN.json.mjs +0 -2
  81. package/build/i18n/zh-CN.json.mjs.map +1 -1
  82. package/build/i18n/zh-HK.json +0 -2
  83. package/build/i18n/zh-HK.json.js +0 -2
  84. package/build/i18n/zh-HK.json.js.map +1 -1
  85. package/build/i18n/zh-HK.json.mjs +0 -2
  86. package/build/i18n/zh-HK.json.mjs.map +1 -1
  87. package/build/index.js +0 -3
  88. package/build/index.js.map +1 -1
  89. package/build/index.mjs +1 -2
  90. package/build/index.mjs.map +1 -1
  91. package/build/main.css +0 -256
  92. package/build/styles/main.css +0 -256
  93. package/build/types/index.d.ts +0 -4
  94. package/build/types/index.d.ts.map +1 -1
  95. package/build/types/test-utils/index.d.ts +0 -4
  96. package/build/types/test-utils/index.d.ts.map +1 -1
  97. package/package.json +1 -1
  98. package/src/i18n/cs.json +0 -2
  99. package/src/i18n/de.json +0 -2
  100. package/src/i18n/en.json +0 -2
  101. package/src/i18n/es.json +0 -2
  102. package/src/i18n/fr.json +0 -2
  103. package/src/i18n/hu.json +0 -2
  104. package/src/i18n/id.json +0 -2
  105. package/src/i18n/it.json +0 -2
  106. package/src/i18n/ja.json +0 -2
  107. package/src/i18n/nl.json +0 -2
  108. package/src/i18n/pl.json +0 -2
  109. package/src/i18n/pt.json +0 -2
  110. package/src/i18n/ro.json +0 -2
  111. package/src/i18n/ru.json +0 -2
  112. package/src/i18n/th.json +0 -2
  113. package/src/i18n/tr.json +0 -2
  114. package/src/i18n/zh-CN.json +0 -2
  115. package/src/i18n/zh-HK.json +0 -2
  116. package/src/index.ts +0 -4
  117. package/src/main.css +0 -256
  118. package/src/main.less +0 -2
  119. package/src/ssr.spec.tsx +0 -1
  120. package/build/selectOption/SelectOption.js +0 -131
  121. package/build/selectOption/SelectOption.js.map +0 -1
  122. package/build/selectOption/SelectOption.messages.js +0 -17
  123. package/build/selectOption/SelectOption.messages.js.map +0 -1
  124. package/build/selectOption/SelectOption.messages.mjs +0 -13
  125. package/build/selectOption/SelectOption.messages.mjs.map +0 -1
  126. package/build/selectOption/SelectOption.mjs +0 -127
  127. package/build/selectOption/SelectOption.mjs.map +0 -1
  128. package/build/styles/listItem/ListItem.css +0 -212
  129. package/build/styles/selectOption/SelectOption.css +0 -44
  130. package/build/types/listItem/ListItem.d.ts +0 -50
  131. package/build/types/listItem/ListItem.d.ts.map +0 -1
  132. package/build/types/listItem/ListItemAdditionalInfo.d.ts +0 -9
  133. package/build/types/listItem/ListItemAdditionalInfo.d.ts.map +0 -1
  134. package/build/types/listItem/ListItemButton.d.ts +0 -6
  135. package/build/types/listItem/ListItemButton.d.ts.map +0 -1
  136. package/build/types/listItem/ListItemCheckbox.d.ts +0 -4
  137. package/build/types/listItem/ListItemCheckbox.d.ts.map +0 -1
  138. package/build/types/listItem/ListItemIconButton.d.ts +0 -8
  139. package/build/types/listItem/ListItemIconButton.d.ts.map +0 -1
  140. package/build/types/listItem/ListItemMedia.d.ts +0 -19
  141. package/build/types/listItem/ListItemMedia.d.ts.map +0 -1
  142. package/build/types/listItem/ListItemNavigation.d.ts +0 -4
  143. package/build/types/listItem/ListItemNavigation.d.ts.map +0 -1
  144. package/build/types/listItem/ListItemSwitch.d.ts +0 -3
  145. package/build/types/listItem/ListItemSwitch.d.ts.map +0 -1
  146. package/build/types/listItem/index.d.ts +0 -6
  147. package/build/types/listItem/index.d.ts.map +0 -1
  148. package/build/types/listItem/prompt/Prompt.d.ts +0 -12
  149. package/build/types/listItem/prompt/Prompt.d.ts.map +0 -1
  150. package/build/types/listItem/useItemControl.d.ts +0 -5
  151. package/build/types/listItem/useItemControl.d.ts.map +0 -1
  152. package/build/types/selectOption/SelectOption.d.ts +0 -21
  153. package/build/types/selectOption/SelectOption.d.ts.map +0 -1
  154. package/build/types/selectOption/SelectOption.messages.d.ts +0 -12
  155. package/build/types/selectOption/SelectOption.messages.d.ts.map +0 -1
  156. package/build/types/selectOption/index.d.ts +0 -3
  157. package/build/types/selectOption/index.d.ts.map +0 -1
  158. package/src/listItem/ListItem.css +0 -212
  159. package/src/listItem/ListItem.less +0 -210
  160. package/src/listItem/ListItem.spec.tsx +0 -35
  161. package/src/listItem/ListItem.story.tsx +0 -461
  162. package/src/listItem/ListItem.tsx +0 -282
  163. package/src/listItem/ListItemAdditionalInfo.tsx +0 -31
  164. package/src/listItem/ListItemButton.spec.tsx +0 -92
  165. package/src/listItem/ListItemButton.tsx +0 -24
  166. package/src/listItem/ListItemCheckbox.tsx +0 -14
  167. package/src/listItem/ListItemIconButton.tsx +0 -16
  168. package/src/listItem/ListItemMedia.tsx +0 -52
  169. package/src/listItem/ListItemNavigation.tsx +0 -23
  170. package/src/listItem/ListItemSwitch.tsx +0 -8
  171. package/src/listItem/index.ts +0 -10
  172. package/src/listItem/prompt/Prompt.spec.tsx +0 -77
  173. package/src/listItem/prompt/Prompt.story.tsx +0 -170
  174. package/src/listItem/prompt/Prompt.tsx +0 -44
  175. package/src/listItem/useItemControl.tsx +0 -23
  176. package/src/selectOption/SelectOption.css +0 -44
  177. package/src/selectOption/SelectOption.less +0 -40
  178. package/src/selectOption/SelectOption.messages.ts +0 -12
  179. package/src/selectOption/SelectOption.spec.tsx +0 -83
  180. package/src/selectOption/SelectOption.story.tsx +0 -277
  181. package/src/selectOption/SelectOption.tsx +0 -151
  182. package/src/selectOption/index.ts +0 -2
package/src/main.css CHANGED
@@ -1789,50 +1789,6 @@ button.np-option {
1789
1789
  margin-top: -3px;
1790
1790
  }
1791
1791
  }
1792
- .np-select-option {
1793
- border-radius: 10px;
1794
- border-radius: var(--radius-small);
1795
- padding: 16px;
1796
- padding: var(--size-16);
1797
- }
1798
- .np-select-option-placeholder {
1799
- background-color: rgba(134,167,189,0.10196);
1800
- background-color: var(--color-background-neutral);
1801
- }
1802
- .np-select-option-placeholder:not(.disabled):hover {
1803
- background-color: var(--color-background-neutral-hover);
1804
- }
1805
- .np-select-option-placeholder:not(.disabled):focus,
1806
- .np-select-option-placeholder:not(.disabled):active {
1807
- background-color: var(--color-background-neutral-active);
1808
- }
1809
- .np-select-option-selected {
1810
- border: 1px solid #c9cbce;
1811
- border: 1px solid var(--color-interactive-secondary);
1812
- }
1813
- .np-select-option-list {
1814
- max-height: 350px;
1815
- overflow-y: auto;
1816
- }
1817
- .np-select-option-list > .np-section {
1818
- margin-top: 0;
1819
- }
1820
- .has-error * .np-select-option {
1821
- --ring-outline-color: var(--color-sentiment-negative);
1822
- --ring-outline-width: 3px;
1823
- --ring-outline-offset: calc(-1 * var(--ring-outline-width));
1824
- outline: var(--ring-outline-color) solid 3px;
1825
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
1826
- outline-offset: calc(-1 * 3px);
1827
- outline-offset: var(--ring-outline-offset);
1828
- }
1829
- .has-error * .np-select-option:focus {
1830
- outline: none;
1831
- }
1832
- .has-error * .np-select-option:focus-visible {
1833
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
1834
- outline-offset: var(--ring-outline-offset);
1835
- }
1836
1792
  .np-panel__content {
1837
1793
  opacity: 0;
1838
1794
  visibility: hidden;
@@ -2662,218 +2618,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2662
2618
  border-radius: 9999px !important;
2663
2619
  border-radius: var(--radius-full) !important;
2664
2620
  }
2665
- .wds-list-item {
2666
- list-style: none;
2667
- width: 100%;
2668
- padding: 0;
2669
- border-radius: 16px;
2670
- border-radius: var(--radius-medium);
2671
- background-color: #ffffff;
2672
- background-color: var(--color-background-screen);
2673
- gap: 16px;
2674
- gap: var(--size-16);
2675
- }
2676
- .wds-list-item .partially-interactive {
2677
- padding: 16px;
2678
- padding: var(--size-16);
2679
- }
2680
- .wds-list-item label,
2681
- .wds-list-item a {
2682
- padding: 16px;
2683
- padding: var(--size-16);
2684
- }
2685
- .wds-list-item-interactive label {
2686
- cursor: pointer;
2687
- }
2688
- .wds-list-item-interactive:hover {
2689
- background-color: var(--color-background-screen-hover);
2690
- }
2691
- .wds-list-item-interactive:hover .wds-list-item-control .wds-Button {
2692
- background-color: var(--Button-background-hover);
2693
- color: var(--Button-color-hover);
2694
- transition: none;
2695
- }
2696
- .wds-list-item-interactive:active {
2697
- background-color: var(--color-background-screen-active);
2698
- }
2699
- .wds-list-item-interactive .wds-list-item-control .wds-Button {
2700
- transition: none;
2701
- }
2702
- .wds-list-item-media-image {
2703
- width: var(--item-media-image-size);
2704
- height: var(--item-media-image-size);
2705
- }
2706
- .wds-list-item-body {
2707
- width: 100%;
2708
- }
2709
- .wds-list-item-title {
2710
- color: #37517e;
2711
- color: var(--color-content-primary);
2712
- }
2713
- .wds-list-item-additional-info {
2714
- color: #768e9c;
2715
- color: var(--color-content-tertiary);
2716
- }
2717
- .wds-list-item-value {
2718
- flex: 0 0 auto;
2719
- }
2720
- .wds-list-item-control {
2721
- flex: 0 0 auto;
2722
- }
2723
- .wds-list-item-navigation,
2724
- .wds-list-item-navigation:hover,
2725
- .wds-list-item-navigation:focus {
2726
- -webkit-text-decoration: none;
2727
- text-decoration: none;
2728
- }
2729
- .wds-list-item-spotlight-active {
2730
- background-color: rgba(134,167,189,0.10196);
2731
- background-color: var(--color-background-neutral);
2732
- }
2733
- .wds-list-item-spotlight-active:not(.disabled):not(:disabled):hover {
2734
- background-color: var(--color-background-neutral-hover);
2735
- }
2736
- .wds-list-item-spotlight-active:not(.disabled):not(:disabled):active {
2737
- background-color: var(--color-background-neutral-active);
2738
- }
2739
- .wds-list-item-spotlight-inactive {
2740
- background-color: rgba(134, 167, 189, 0.025);
2741
- border: 1px dashed rgba(0,0,0,0.10196);
2742
- border: 1px dashed var(--color-border-neutral);
2743
- }
2744
- @supports (color: color-mix(in lch, red, blue)) {
2745
- .wds-list-item-spotlight-inactive {
2746
- background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2747
- }
2748
- }
2749
- .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):hover {
2750
- background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2751
- }
2752
- .wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):active {
2753
- background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2754
- }
2755
- .wds-list-item-prompt {
2756
- display: inline-flex;
2757
- padding-top: calc(8px / 2);
2758
- padding-top: calc(var(--padding-x-small) / 2);
2759
- padding-bottom: calc(8px / 2);
2760
- padding-bottom: calc(var(--padding-x-small) / 2);
2761
- padding-left: calc(8px - 1px);
2762
- padding-left: calc(var(--padding-x-small) - 1px);
2763
- padding-right: 8px;
2764
- padding-right: var(--padding-x-small);
2765
- border-radius: 10px;
2766
- border-radius: var(--radius-small);
2767
- word-break: break-word;
2768
- word-wrap: break-word;
2769
- }
2770
- .wds-list-item-prompt .np-prompt-icon {
2771
- padding-right: calc(12px / 2);
2772
- padding-right: calc(var(--size-12) / 2);
2773
- padding-top: calc(4px - 1px);
2774
- padding-top: calc(var(--size-4) - 1px);
2775
- padding-bottom: calc(4px - 1px);
2776
- padding-bottom: calc(var(--size-4) - 1px);
2777
- }
2778
- .wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
2779
- .wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
2780
- color: var(--color-sentiment-positive-primary);
2781
- }
2782
- .wds-list-item-prompt a {
2783
- text-underline-offset: calc(4px / 2);
2784
- text-underline-offset: calc(var(--size-4) / 2);
2785
- }
2786
- .wds-list-item-prompt.np-prompt-interactive {
2787
- -webkit-text-decoration: none;
2788
- text-decoration: none;
2789
- cursor: pointer;
2790
- border: none;
2791
- }
2792
- .wds-list-item-prompt.negative {
2793
- background-color: var(--color-sentiment-negative-secondary);
2794
- color: var(--color-sentiment-negative-primary);
2795
- }
2796
- .wds-list-item-prompt.negative a {
2797
- color: var(--color-sentiment-negative-primary);
2798
- }
2799
- .wds-list-item-prompt.negative a:hover {
2800
- color: var(--color-sentiment-negative-primary-hover);
2801
- }
2802
- .wds-list-item-prompt.negative a:active {
2803
- color: var(--color-sentiment-negative-primary-active);
2804
- }
2805
- .np-prompt-interactive.wds-list-item-prompt.negative:hover {
2806
- background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
2807
- }
2808
- .np-prompt-interactive.wds-list-item-prompt.negative:active {
2809
- background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
2810
- }
2811
- .wds-list-item-prompt.positive,
2812
- .wds-list-item-prompt.discount,
2813
- .wds-list-item-prompt.savings {
2814
- background-color: var(--color-sentiment-positive-secondary);
2815
- color: var(--color-sentiment-positive-primary);
2816
- }
2817
- .wds-list-item-prompt.positive a,
2818
- .wds-list-item-prompt.discount a,
2819
- .wds-list-item-prompt.savings a {
2820
- color: var(--color-sentiment-positive-primary);
2821
- }
2822
- .wds-list-item-prompt.positive a:hover,
2823
- .wds-list-item-prompt.discount a:hover,
2824
- .wds-list-item-prompt.savings a:hover {
2825
- color: var(--color-sentiment-positive-primary-hover);
2826
- }
2827
- .wds-list-item-prompt.positive a:active,
2828
- .wds-list-item-prompt.discount a:active,
2829
- .wds-list-item-prompt.savings a:active {
2830
- color: var(--color-sentiment-positive-primary-active);
2831
- }
2832
- .np-prompt-interactive.wds-list-item-prompt.positive:hover,
2833
- .np-prompt-interactive.wds-list-item-prompt.discount:hover,
2834
- .np-prompt-interactive.wds-list-item-prompt.savings:hover {
2835
- background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
2836
- }
2837
- .np-prompt-interactive.wds-list-item-prompt.positive:active,
2838
- .np-prompt-interactive.wds-list-item-prompt.discount:active,
2839
- .np-prompt-interactive.wds-list-item-prompt.savings:active {
2840
- background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
2841
- }
2842
- .wds-list-item-prompt.neutral {
2843
- background-color: rgba(134,167,189,0.10196);
2844
- background-color: var(--color-background-neutral);
2845
- color: #37517e;
2846
- color: var(--color-content-primary);
2847
- }
2848
- .wds-list-item-prompt.neutral a {
2849
- color: #37517e;
2850
- color: var(--color-content-primary);
2851
- }
2852
- .np-prompt-interactive.wds-list-item-prompt.neutral:hover {
2853
- background-color: var(--color-background-neutral-hover);
2854
- }
2855
- .np-prompt-interactive.wds-list-item-prompt.neutral:active {
2856
- background-color: var(--color-background-neutral-active);
2857
- }
2858
- .wds-list-item-prompt.warning {
2859
- background-color: var(--color-sentiment-warning-secondary);
2860
- color: var(--color-sentiment-warning-content);
2861
- }
2862
- .wds-list-item-prompt.warning a {
2863
- color: var(--color-sentiment-warning-content);
2864
- }
2865
- .wds-list-item-prompt.warning a:hover {
2866
- color: var(--color-sentiment-warning-content-hover);
2867
- }
2868
- .wds-list-item-prompt.warning a:active {
2869
- color: var(--color-sentiment-warning-content-active);
2870
- }
2871
- .np-prompt-interactive.wds-list-item-prompt.warning:hover {
2872
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
2873
- }
2874
- .np-prompt-interactive.wds-list-item-prompt.warning:active {
2875
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
2876
- }
2877
2621
  .np-field-control {
2878
2622
  margin-top: 4px;
2879
2623
  margin-top: var(--size-4);
package/src/main.less CHANGED
@@ -20,7 +20,6 @@
20
20
  @import "./common/card/Card.less";
21
21
  @import "./common/closeButton/CloseButton.less";
22
22
  @import "./common/Option/Option.less";
23
- @import "./selectOption/SelectOption.less";
24
23
  @import "./common/panel/Panel.less";
25
24
  @import "./common/RadioButton/RadioButton.less";
26
25
  @import "./dateInput/DateInput.less";
@@ -39,7 +38,6 @@
39
38
  @import "./image/Image.less";
40
39
  @import "./info/Info.less";
41
40
  @import "./inputs/Input.less";
42
- @import "./listItem/ListItem.less";
43
41
  @import "./field/Field.less";
44
42
  @import "./inputs/InputGroup.less";
45
43
  @import "./inputs/SelectInput.less";
package/src/ssr.spec.tsx CHANGED
@@ -228,7 +228,6 @@ describe('Server side rendering', () => {
228
228
  DateLookup: { value: new Date() },
229
229
  Link: { size: 16 },
230
230
  Tooltip: { children: <>yo</> },
231
- SelectOption: { placeholder: { media: <img alt="img" /> } },
232
231
  };
233
232
 
234
233
  const { Provider } = exposedLibraryItems;
@@ -1,131 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var clsx = require('clsx');
7
- var Option = require('../common/Option/Option.js');
8
- require('../common/theme.js');
9
- require('../common/direction.js');
10
- require('../common/propsValues/control.js');
11
- var breakpoint = require('../common/propsValues/breakpoint.js');
12
- require('../common/propsValues/size.js');
13
- require('../common/propsValues/typography.js');
14
- require('../common/propsValues/width.js');
15
- require('../common/propsValues/type.js');
16
- require('../common/propsValues/dateMode.js');
17
- require('../common/propsValues/monthFormat.js');
18
- var position = require('../common/propsValues/position.js');
19
- require('../common/propsValues/layouts.js');
20
- require('../common/propsValues/status.js');
21
- require('../common/propsValues/sentiment.js');
22
- require('../common/propsValues/profileType.js');
23
- require('../common/propsValues/variant.js');
24
- require('../common/propsValues/scroll.js');
25
- require('../common/propsValues/markdownNodeType.js');
26
- require('../common/fileType.js');
27
- var icons = require('@transferwise/icons');
28
- var reactIntl = require('react-intl');
29
- require('../common/closeButton/CloseButton.messages.js');
30
- var jsxRuntime = require('react/jsx-runtime');
31
- var Section = require('../section/Section.js');
32
- var Header = require('../header/Header.js');
33
- var NavigationOption = require('../navigationOption/NavigationOption.js');
34
- var NavigationOptionsList = require('../navigationOptionsList/NavigationOptionsList.js');
35
- var contexts = require('../inputs/contexts.js');
36
- var SelectOption_messages = require('./SelectOption.messages.js');
37
- var ResponsivePanel = require('../common/responsivePanel/ResponsivePanel.js');
38
- var useScreenSize = require('../common/hooks/useScreenSize.js');
39
-
40
- function SelectOption({
41
- selected = undefined,
42
- options,
43
- onChange,
44
- placeholder,
45
- disabled,
46
- ...props
47
- }) {
48
- const intl = reactIntl.useIntl();
49
- const rootRef = React.useRef(null);
50
- const [showOptions, setShowOptions] = React.useState(false);
51
- const hasSelected = selected !== undefined;
52
- const isLargeScreen = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
53
- const inputAttributes = contexts.useInputAttributes();
54
- const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];
55
- function handleOnClick(showOptionsStatus) {
56
- return () => {
57
- setShowOptions(showOptionsStatus);
58
- };
59
- }
60
- function handleOnChange(data) {
61
- return () => {
62
- setShowOptions(false);
63
- onChange(data);
64
- };
65
- }
66
- function getOptions(isLargeScreen = false) {
67
- return /*#__PURE__*/jsxRuntime.jsx("div", {
68
- className: clsx.clsx({
69
- 'np-select-option-list': isLargeScreen
70
- }),
71
- children: options.map((optionsSection, index) => /*#__PURE__*/jsxRuntime.jsxs(Section.default, {
72
- className: clsx.clsx({
73
- 'p-x-2 p-y-1': isLargeScreen
74
- }),
75
- children: [optionsSection.title && /*#__PURE__*/jsxRuntime.jsx(Header.Header, {
76
- title: optionsSection.title
77
- }), /*#__PURE__*/jsxRuntime.jsx(NavigationOptionsList.default, {
78
- children: optionsSection.options.map((option, index) => {
79
- return /*#__PURE__*/jsxRuntime.jsx(NavigationOption.default, {
80
- isContainerAligned: !isLargeScreen,
81
- showMediaCircle: true,
82
- showMediaAtAllSizes: true,
83
- onClick: handleOnChange(option),
84
- ...option
85
- }, index);
86
- })
87
- })]
88
- }, index))
89
- });
90
- }
91
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
92
- children: [/*#__PURE__*/jsxRuntime.jsx(Option.default, {
93
- ref: rootRef,
94
- as: "div",
95
- showMediaAtAllSizes: true,
96
- disabled: disabled,
97
- decision: false,
98
- media: hasSelected ? selected.media : placeholder.media ?? /*#__PURE__*/jsxRuntime.jsx(icons.Plus, {
99
- size: 24
100
- }),
101
- title: (hasSelected ? selected : placeholder).title,
102
- content: (hasSelected ? selected : placeholder).content,
103
- className: clsx.clsx('np-select-option', 'clickable', hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder', props.className),
104
- button: /*#__PURE__*/jsxRuntime.jsx("button", {
105
- ...inputAttributes,
106
- type: "button",
107
- disabled: disabled,
108
- "aria-labelledby": ariaLabelledBy,
109
- "aria-haspopup": "dialog",
110
- "aria-expanded": showOptions,
111
- className: hasSelected ? 'btn-unstyled' : 'np-action-btn',
112
- "aria-label": hasSelected ? undefined : props['aria-label'],
113
- onClick: handleOnClick(true),
114
- children: hasSelected ? /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
115
- title: intl.formatMessage(SelectOption_messages.default.selectedActionLabel)
116
- }) : placeholder.actionLabel || intl.formatMessage(SelectOption_messages.default.actionLabel)
117
- })
118
- }), /*#__PURE__*/jsxRuntime.jsx(ResponsivePanel.default, {
119
- anchorWidth: true,
120
- altAxis: true,
121
- anchorRef: rootRef,
122
- open: showOptions,
123
- position: position.Position.BOTTOM,
124
- onClose: handleOnClick(false),
125
- children: getOptions(isLargeScreen)
126
- })]
127
- });
128
- }
129
-
130
- exports.default = SelectOption;
131
- //# sourceMappingURL=SelectOption.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOption.js","sources":["../../src/selectOption/SelectOption.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { ActionButtonProps } from '../actionButton';\nimport { clsx } from 'clsx';\nimport Option from '../common/Option';\nimport type { OptionProps } from '../common/Option/Option';\nimport { Breakpoint, Position } from '../common';\nimport Section from '../section';\nimport Header from '../header';\nimport { HeaderProps } from '../header/Header';\nimport NavigationOption from '../navigationOption';\nimport NavigationOptionsList from '../navigationOptionsList';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './SelectOption.messages';\nimport { useIntl } from 'react-intl';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { ChevronDown, Plus } from '@transferwise/icons';\n\nexport type SelectOptiopsSection<T = unknown> = {\n title?: HeaderProps['title'];\n options: SelectOptionValue<T>[];\n};\n\nexport type SelectOptionValue<T = unknown> = Pick<\n OptionProps,\n 'media' | 'title' | 'content' | 'disabled'\n> & {\n value?: T;\n};\n\nexport type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {\n actionLabel?: ActionButtonProps['children'];\n};\n\nexport type SelectOptionProps<T = unknown> = {\n onChange: (selected: SelectOptionValue<T>) => void;\n selected?: SelectOptionValue<T>;\n options: SelectOptiopsSection<T>[];\n placeholder: SelectOptionPlaceholder;\n} & Omit<\n OptionProps,\n 'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'\n>;\n\nexport default function SelectOption<T>({\n selected = undefined,\n options,\n onChange,\n placeholder,\n disabled,\n ...props\n}: SelectOptionProps<T>) {\n const intl = useIntl();\n const rootRef = useRef(null);\n const [showOptions, setShowOptions] = useState(false);\n\n const hasSelected = selected !== undefined;\n const isLargeScreen = useScreenSize(Breakpoint.SMALL);\n\n const inputAttributes = useInputAttributes();\n const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];\n\n function handleOnClick(showOptionsStatus: boolean) {\n return () => {\n setShowOptions(showOptionsStatus);\n };\n }\n\n function handleOnChange(data: SelectOptionValue<T>) {\n return () => {\n setShowOptions(false);\n onChange(data);\n };\n }\n\n function getOptions(isLargeScreen = false) {\n return (\n <div className={clsx({ 'np-select-option-list': isLargeScreen })}>\n {options.map((optionsSection, index) => (\n <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>\n {optionsSection.title && <Header title={optionsSection.title} />}\n <NavigationOptionsList>\n {optionsSection.options.map((option, index) => {\n return (\n <NavigationOption\n key={index}\n isContainerAligned={!isLargeScreen}\n showMediaCircle\n showMediaAtAllSizes\n onClick={handleOnChange(option)}\n {...option}\n />\n );\n })}\n </NavigationOptionsList>\n </Section>\n ))}\n </div>\n );\n }\n\n return (\n <>\n <Option\n ref={rootRef}\n as=\"div\"\n showMediaAtAllSizes\n disabled={disabled}\n decision={false}\n media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}\n title={(hasSelected ? selected : placeholder).title}\n content={(hasSelected ? selected : placeholder).content}\n className={clsx(\n 'np-select-option',\n 'clickable',\n hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',\n props.className,\n )}\n button={\n <button\n {...inputAttributes}\n type=\"button\"\n disabled={disabled}\n aria-labelledby={ariaLabelledBy}\n aria-haspopup=\"dialog\"\n aria-expanded={showOptions}\n className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}\n aria-label={hasSelected ? undefined : props['aria-label']}\n onClick={handleOnClick(true)}\n >\n {hasSelected ? (\n <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />\n ) : (\n placeholder.actionLabel || intl.formatMessage(messages.actionLabel)\n )}\n </button>\n }\n />\n <ResponsivePanel\n anchorWidth\n altAxis\n anchorRef={rootRef}\n open={showOptions}\n position={Position.BOTTOM}\n onClose={handleOnClick(false)}\n >\n {getOptions(isLargeScreen)}\n </ResponsivePanel>\n </>\n );\n}\n"],"names":["SelectOption","selected","undefined","options","onChange","placeholder","disabled","props","intl","useIntl","rootRef","useRef","showOptions","setShowOptions","useState","hasSelected","isLargeScreen","useScreenSize","Breakpoint","SMALL","inputAttributes","useInputAttributes","ariaLabelledBy","handleOnClick","showOptionsStatus","handleOnChange","data","getOptions","_jsx","className","clsx","children","map","optionsSection","index","_jsxs","Section","title","Header","NavigationOptionsList","option","NavigationOption","isContainerAligned","showMediaCircle","showMediaAtAllSizes","onClick","_Fragment","Option","ref","as","decision","media","Plus","size","content","button","type","ChevronDown","formatMessage","messages","selectedActionLabel","actionLabel","ResponsivePanel","anchorWidth","altAxis","anchorRef","open","position","Position","BOTTOM","onClose"],"mappings":"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"}
@@ -1,17 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var reactIntl = require('react-intl');
6
-
7
- var messages = reactIntl.defineMessages({
8
- actionLabel: {
9
- id: "neptune.SelectOption.action.label"
10
- },
11
- selectedActionLabel: {
12
- id: "neptune.SelectOption.selected.action.label"
13
- }
14
- });
15
-
16
- exports.default = messages;
17
- //# sourceMappingURL=SelectOption.messages.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOption.messages.js","sources":["../../src/selectOption/SelectOption.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n actionLabel: {\n id: 'neptune.SelectOption.action.label',\n defaultMessage: 'Choose',\n },\n selectedActionLabel: {\n id: 'neptune.SelectOption.selected.action.label',\n defaultMessage: 'Change chosen option',\n },\n});\n"],"names":["defineMessages","actionLabel","id","selectedActionLabel"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,WAAW,EAAE;IACXC,EAAE,EAAA;GAEH;AACDC,EAAAA,mBAAmB,EAAE;IACnBD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
@@ -1,13 +0,0 @@
1
- import { defineMessages } from 'react-intl';
2
-
3
- var messages = defineMessages({
4
- actionLabel: {
5
- id: "neptune.SelectOption.action.label"
6
- },
7
- selectedActionLabel: {
8
- id: "neptune.SelectOption.selected.action.label"
9
- }
10
- });
11
-
12
- export { messages as default };
13
- //# sourceMappingURL=SelectOption.messages.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOption.messages.mjs","sources":["../../src/selectOption/SelectOption.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n actionLabel: {\n id: 'neptune.SelectOption.action.label',\n defaultMessage: 'Choose',\n },\n selectedActionLabel: {\n id: 'neptune.SelectOption.selected.action.label',\n defaultMessage: 'Change chosen option',\n },\n});\n"],"names":["defineMessages","actionLabel","id","selectedActionLabel"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,WAAW,EAAE;IACXC,EAAE,EAAA;GAEH;AACDC,EAAAA,mBAAmB,EAAE;IACnBD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
@@ -1,127 +0,0 @@
1
- import { useRef, useState } from 'react';
2
- import { clsx } from 'clsx';
3
- import Option from '../common/Option/Option.mjs';
4
- import '../common/theme.mjs';
5
- import '../common/direction.mjs';
6
- import '../common/propsValues/control.mjs';
7
- import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
8
- import '../common/propsValues/size.mjs';
9
- import '../common/propsValues/typography.mjs';
10
- import '../common/propsValues/width.mjs';
11
- import '../common/propsValues/type.mjs';
12
- import '../common/propsValues/dateMode.mjs';
13
- import '../common/propsValues/monthFormat.mjs';
14
- import { Position } from '../common/propsValues/position.mjs';
15
- import '../common/propsValues/layouts.mjs';
16
- import '../common/propsValues/status.mjs';
17
- import '../common/propsValues/sentiment.mjs';
18
- import '../common/propsValues/profileType.mjs';
19
- import '../common/propsValues/variant.mjs';
20
- import '../common/propsValues/scroll.mjs';
21
- import '../common/propsValues/markdownNodeType.mjs';
22
- import '../common/fileType.mjs';
23
- import { ChevronDown, Plus } from '@transferwise/icons';
24
- import { useIntl } from 'react-intl';
25
- import '../common/closeButton/CloseButton.messages.mjs';
26
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
27
- import Section from '../section/Section.mjs';
28
- import { Header } from '../header/Header.mjs';
29
- import NavigationOption from '../navigationOption/NavigationOption.mjs';
30
- import NavigationOptionList from '../navigationOptionsList/NavigationOptionsList.mjs';
31
- import { useInputAttributes } from '../inputs/contexts.mjs';
32
- import messages from './SelectOption.messages.mjs';
33
- import ResponsivePanel from '../common/responsivePanel/ResponsivePanel.mjs';
34
- import { useScreenSize } from '../common/hooks/useScreenSize.mjs';
35
-
36
- function SelectOption({
37
- selected = undefined,
38
- options,
39
- onChange,
40
- placeholder,
41
- disabled,
42
- ...props
43
- }) {
44
- const intl = useIntl();
45
- const rootRef = useRef(null);
46
- const [showOptions, setShowOptions] = useState(false);
47
- const hasSelected = selected !== undefined;
48
- const isLargeScreen = useScreenSize(Breakpoint.SMALL);
49
- const inputAttributes = useInputAttributes();
50
- const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];
51
- function handleOnClick(showOptionsStatus) {
52
- return () => {
53
- setShowOptions(showOptionsStatus);
54
- };
55
- }
56
- function handleOnChange(data) {
57
- return () => {
58
- setShowOptions(false);
59
- onChange(data);
60
- };
61
- }
62
- function getOptions(isLargeScreen = false) {
63
- return /*#__PURE__*/jsx("div", {
64
- className: clsx({
65
- 'np-select-option-list': isLargeScreen
66
- }),
67
- children: options.map((optionsSection, index) => /*#__PURE__*/jsxs(Section, {
68
- className: clsx({
69
- 'p-x-2 p-y-1': isLargeScreen
70
- }),
71
- children: [optionsSection.title && /*#__PURE__*/jsx(Header, {
72
- title: optionsSection.title
73
- }), /*#__PURE__*/jsx(NavigationOptionList, {
74
- children: optionsSection.options.map((option, index) => {
75
- return /*#__PURE__*/jsx(NavigationOption, {
76
- isContainerAligned: !isLargeScreen,
77
- showMediaCircle: true,
78
- showMediaAtAllSizes: true,
79
- onClick: handleOnChange(option),
80
- ...option
81
- }, index);
82
- })
83
- })]
84
- }, index))
85
- });
86
- }
87
- return /*#__PURE__*/jsxs(Fragment, {
88
- children: [/*#__PURE__*/jsx(Option, {
89
- ref: rootRef,
90
- as: "div",
91
- showMediaAtAllSizes: true,
92
- disabled: disabled,
93
- decision: false,
94
- media: hasSelected ? selected.media : placeholder.media ?? /*#__PURE__*/jsx(Plus, {
95
- size: 24
96
- }),
97
- title: (hasSelected ? selected : placeholder).title,
98
- content: (hasSelected ? selected : placeholder).content,
99
- className: clsx('np-select-option', 'clickable', hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder', props.className),
100
- button: /*#__PURE__*/jsx("button", {
101
- ...inputAttributes,
102
- type: "button",
103
- disabled: disabled,
104
- "aria-labelledby": ariaLabelledBy,
105
- "aria-haspopup": "dialog",
106
- "aria-expanded": showOptions,
107
- className: hasSelected ? 'btn-unstyled' : 'np-action-btn',
108
- "aria-label": hasSelected ? undefined : props['aria-label'],
109
- onClick: handleOnClick(true),
110
- children: hasSelected ? /*#__PURE__*/jsx(ChevronDown, {
111
- title: intl.formatMessage(messages.selectedActionLabel)
112
- }) : placeholder.actionLabel || intl.formatMessage(messages.actionLabel)
113
- })
114
- }), /*#__PURE__*/jsx(ResponsivePanel, {
115
- anchorWidth: true,
116
- altAxis: true,
117
- anchorRef: rootRef,
118
- open: showOptions,
119
- position: Position.BOTTOM,
120
- onClose: handleOnClick(false),
121
- children: getOptions(isLargeScreen)
122
- })]
123
- });
124
- }
125
-
126
- export { SelectOption as default };
127
- //# sourceMappingURL=SelectOption.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOption.mjs","sources":["../../src/selectOption/SelectOption.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { ActionButtonProps } from '../actionButton';\nimport { clsx } from 'clsx';\nimport Option from '../common/Option';\nimport type { OptionProps } from '../common/Option/Option';\nimport { Breakpoint, Position } from '../common';\nimport Section from '../section';\nimport Header from '../header';\nimport { HeaderProps } from '../header/Header';\nimport NavigationOption from '../navigationOption';\nimport NavigationOptionsList from '../navigationOptionsList';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './SelectOption.messages';\nimport { useIntl } from 'react-intl';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { ChevronDown, Plus } from '@transferwise/icons';\n\nexport type SelectOptiopsSection<T = unknown> = {\n title?: HeaderProps['title'];\n options: SelectOptionValue<T>[];\n};\n\nexport type SelectOptionValue<T = unknown> = Pick<\n OptionProps,\n 'media' | 'title' | 'content' | 'disabled'\n> & {\n value?: T;\n};\n\nexport type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {\n actionLabel?: ActionButtonProps['children'];\n};\n\nexport type SelectOptionProps<T = unknown> = {\n onChange: (selected: SelectOptionValue<T>) => void;\n selected?: SelectOptionValue<T>;\n options: SelectOptiopsSection<T>[];\n placeholder: SelectOptionPlaceholder;\n} & Omit<\n OptionProps,\n 'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'\n>;\n\nexport default function SelectOption<T>({\n selected = undefined,\n options,\n onChange,\n placeholder,\n disabled,\n ...props\n}: SelectOptionProps<T>) {\n const intl = useIntl();\n const rootRef = useRef(null);\n const [showOptions, setShowOptions] = useState(false);\n\n const hasSelected = selected !== undefined;\n const isLargeScreen = useScreenSize(Breakpoint.SMALL);\n\n const inputAttributes = useInputAttributes();\n const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];\n\n function handleOnClick(showOptionsStatus: boolean) {\n return () => {\n setShowOptions(showOptionsStatus);\n };\n }\n\n function handleOnChange(data: SelectOptionValue<T>) {\n return () => {\n setShowOptions(false);\n onChange(data);\n };\n }\n\n function getOptions(isLargeScreen = false) {\n return (\n <div className={clsx({ 'np-select-option-list': isLargeScreen })}>\n {options.map((optionsSection, index) => (\n <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>\n {optionsSection.title && <Header title={optionsSection.title} />}\n <NavigationOptionsList>\n {optionsSection.options.map((option, index) => {\n return (\n <NavigationOption\n key={index}\n isContainerAligned={!isLargeScreen}\n showMediaCircle\n showMediaAtAllSizes\n onClick={handleOnChange(option)}\n {...option}\n />\n );\n })}\n </NavigationOptionsList>\n </Section>\n ))}\n </div>\n );\n }\n\n return (\n <>\n <Option\n ref={rootRef}\n as=\"div\"\n showMediaAtAllSizes\n disabled={disabled}\n decision={false}\n media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}\n title={(hasSelected ? selected : placeholder).title}\n content={(hasSelected ? selected : placeholder).content}\n className={clsx(\n 'np-select-option',\n 'clickable',\n hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',\n props.className,\n )}\n button={\n <button\n {...inputAttributes}\n type=\"button\"\n disabled={disabled}\n aria-labelledby={ariaLabelledBy}\n aria-haspopup=\"dialog\"\n aria-expanded={showOptions}\n className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}\n aria-label={hasSelected ? undefined : props['aria-label']}\n onClick={handleOnClick(true)}\n >\n {hasSelected ? (\n <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />\n ) : (\n placeholder.actionLabel || intl.formatMessage(messages.actionLabel)\n )}\n </button>\n }\n />\n <ResponsivePanel\n anchorWidth\n altAxis\n anchorRef={rootRef}\n open={showOptions}\n position={Position.BOTTOM}\n onClose={handleOnClick(false)}\n >\n {getOptions(isLargeScreen)}\n </ResponsivePanel>\n </>\n );\n}\n"],"names":["SelectOption","selected","undefined","options","onChange","placeholder","disabled","props","intl","useIntl","rootRef","useRef","showOptions","setShowOptions","useState","hasSelected","isLargeScreen","useScreenSize","Breakpoint","SMALL","inputAttributes","useInputAttributes","ariaLabelledBy","handleOnClick","showOptionsStatus","handleOnChange","data","getOptions","_jsx","className","clsx","children","map","optionsSection","index","_jsxs","Section","title","Header","NavigationOptionsList","option","NavigationOption","isContainerAligned","showMediaCircle","showMediaAtAllSizes","onClick","_Fragment","Option","ref","as","decision","media","Plus","size","content","button","type","ChevronDown","formatMessage","messages","selectedActionLabel","actionLabel","ResponsivePanel","anchorWidth","altAxis","anchorRef","open","position","Position","BOTTOM","onClose"],"mappings":"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"}