@cambly/syntax-core 10.18.0 → 10.20.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 (164) hide show
  1. package/dist/Avatar/Avatar.d.ts +1 -1
  2. package/dist/Badge/Badge.cjs +3 -3
  3. package/dist/Badge/Badge.css +49 -49
  4. package/dist/Badge/Badge.css.map +1 -1
  5. package/dist/Badge/Badge.d.ts +1 -1
  6. package/dist/Badge/Badge.js +2 -2
  7. package/dist/Button/Button.cjs +3 -3
  8. package/dist/Button/Button.css +49 -49
  9. package/dist/Button/Button.css.map +1 -1
  10. package/dist/Button/Button.js +2 -2
  11. package/dist/ButtonGroup/ButtonGroup.d.ts +1 -1
  12. package/dist/Checkbox/Checkbox.cjs +3 -3
  13. package/dist/Checkbox/Checkbox.css +49 -49
  14. package/dist/Checkbox/Checkbox.css.map +1 -1
  15. package/dist/Checkbox/Checkbox.d.ts +1 -1
  16. package/dist/Checkbox/Checkbox.js +2 -2
  17. package/dist/Chip/Chip.cjs +3 -3
  18. package/dist/Chip/Chip.css +49 -49
  19. package/dist/Chip/Chip.css.map +1 -1
  20. package/dist/Chip/Chip.js +2 -2
  21. package/dist/Heading/Heading.cjs +3 -3
  22. package/dist/Heading/Heading.css +49 -49
  23. package/dist/Heading/Heading.css.map +1 -1
  24. package/dist/Heading/Heading.d.ts +2 -2
  25. package/dist/Heading/Heading.js +2 -2
  26. package/dist/LinkButton/LinkButton.cjs +3 -3
  27. package/dist/LinkButton/LinkButton.css +49 -49
  28. package/dist/LinkButton/LinkButton.css.map +1 -1
  29. package/dist/LinkButton/LinkButton.js +2 -2
  30. package/dist/Modal/Modal.cjs +4 -4
  31. package/dist/Modal/Modal.css +49 -49
  32. package/dist/Modal/Modal.css.map +1 -1
  33. package/dist/Modal/Modal.js +3 -3
  34. package/dist/RadioButton/RadioButton.cjs +3 -3
  35. package/dist/RadioButton/RadioButton.css +49 -49
  36. package/dist/RadioButton/RadioButton.css.map +1 -1
  37. package/dist/RadioButton/RadioButton.d.ts +1 -1
  38. package/dist/RadioButton/RadioButton.js +2 -2
  39. package/dist/RichSelect/RichSelectBox.cjs +9 -9
  40. package/dist/RichSelect/RichSelectBox.css +49 -49
  41. package/dist/RichSelect/RichSelectBox.css.map +1 -1
  42. package/dist/RichSelect/RichSelectBox.d.ts +1 -1
  43. package/dist/RichSelect/RichSelectBox.js +8 -8
  44. package/dist/RichSelect/RichSelectChip.cjs +4 -4
  45. package/dist/RichSelect/RichSelectChip.css +49 -49
  46. package/dist/RichSelect/RichSelectChip.css.map +1 -1
  47. package/dist/RichSelect/RichSelectChip.js +3 -3
  48. package/dist/RichSelect/RichSelectList.cjs +11 -11
  49. package/dist/RichSelect/RichSelectList.css +67 -67
  50. package/dist/RichSelect/RichSelectList.css.map +1 -1
  51. package/dist/RichSelect/RichSelectList.d.ts +1 -1
  52. package/dist/RichSelect/RichSelectList.js +10 -10
  53. package/dist/RichSelect/RichSelectRadioButton.cjs +4 -4
  54. package/dist/RichSelect/RichSelectRadioButton.css +49 -49
  55. package/dist/RichSelect/RichSelectRadioButton.css.map +1 -1
  56. package/dist/RichSelect/RichSelectRadioButton.d.ts +1 -1
  57. package/dist/RichSelect/RichSelectRadioButton.js +3 -3
  58. package/dist/RichSelect/RichSelectSection.cjs +3 -3
  59. package/dist/RichSelect/RichSelectSection.css +49 -49
  60. package/dist/RichSelect/RichSelectSection.css.map +1 -1
  61. package/dist/RichSelect/RichSelectSection.js +2 -2
  62. package/dist/SelectList/SelectList.cjs +4 -4
  63. package/dist/SelectList/SelectList.css +67 -67
  64. package/dist/SelectList/SelectList.css.map +1 -1
  65. package/dist/SelectList/SelectList.js +3 -3
  66. package/dist/TapArea/TapArea.d.ts +1 -1
  67. package/dist/TextArea/TextArea.cjs +3 -3
  68. package/dist/TextArea/TextArea.css +49 -49
  69. package/dist/TextArea/TextArea.css.map +1 -1
  70. package/dist/TextArea/TextArea.js +2 -2
  71. package/dist/TextField/TextField.cjs +3 -3
  72. package/dist/TextField/TextField.css +49 -49
  73. package/dist/TextField/TextField.css.map +1 -1
  74. package/dist/TextField/TextField.js +2 -2
  75. package/dist/Tooltip/Tooltip.cjs +3 -3
  76. package/dist/Tooltip/Tooltip.css +49 -49
  77. package/dist/Tooltip/Tooltip.css.map +1 -1
  78. package/dist/Tooltip/Tooltip.js +2 -2
  79. package/dist/Typography/Typography.cjs +2 -2
  80. package/dist/Typography/Typography.css +49 -49
  81. package/dist/Typography/Typography.css.map +1 -1
  82. package/dist/Typography/Typography.d.ts +5 -5
  83. package/dist/Typography/Typography.js +1 -1
  84. package/dist/__chunks/{QTGWI2GM.cjs → 3QV4LYGN.cjs} +3 -3
  85. package/dist/__chunks/{BA5NNKNL.js → 3RPDJFR4.js} +2 -2
  86. package/dist/__chunks/{HA4KAF7N.js → 44DDUZLN.js} +2 -2
  87. package/dist/__chunks/{OWLMHTW5.cjs → 46QLII42.cjs} +2 -2
  88. package/dist/__chunks/{OWLMHTW5.cjs.map → 46QLII42.cjs.map} +1 -1
  89. package/dist/__chunks/{S2VZE6RS.js → 5YXVVFJ3.js} +2 -2
  90. package/dist/__chunks/{ESGW3XTV.cjs → 6KTCQQ7E.cjs} +4 -4
  91. package/dist/__chunks/{4U2YGWTW.cjs → 6UFO6JEO.cjs} +3 -3
  92. package/dist/__chunks/{364LH7BQ.cjs → AI3HSJ4Z.cjs} +3 -3
  93. package/dist/__chunks/{AL4ECXRL.cjs → CI5BYRSX.cjs} +3 -3
  94. package/dist/__chunks/{DUANKQDU.js → CJLPH2FJ.js} +2 -2
  95. package/dist/__chunks/{EIR3V4AH.cjs → CXCRGFIV.cjs} +4 -4
  96. package/dist/__chunks/{Q3I37NS7.cjs → DTEKITMF.cjs} +3 -3
  97. package/dist/__chunks/{2RIIE7CU.js → DZRB2DSH.js} +2 -2
  98. package/dist/__chunks/{2RIIE7CU.js.map → DZRB2DSH.js.map} +1 -1
  99. package/dist/__chunks/{VW7HLULP.cjs → EILCQTJ3.cjs} +3 -3
  100. package/dist/__chunks/{DV73RCNK.cjs → EUUNDEAV.cjs} +5 -5
  101. package/dist/__chunks/{7VMMLAGL.js → F7RVH3EY.js} +8 -8
  102. package/dist/__chunks/{7VMMLAGL.js.map → F7RVH3EY.js.map} +1 -1
  103. package/dist/__chunks/{DC7G3PCP.cjs → FCNPD5TI.cjs} +3 -3
  104. package/dist/__chunks/{ZOWJFE7W.js → HS7E5SFN.js} +5 -5
  105. package/dist/__chunks/{LKLPRA6D.cjs → JTDA7BDZ.cjs} +7 -7
  106. package/dist/__chunks/{LKLPRA6D.cjs.map → JTDA7BDZ.cjs.map} +1 -1
  107. package/dist/__chunks/{LZ4LFK7N.js → K6HYPHZI.js} +1 -1
  108. package/dist/__chunks/{LZ4LFK7N.js.map → K6HYPHZI.js.map} +1 -1
  109. package/dist/__chunks/{ULHGK75R.cjs → LAT2IHTZ.cjs} +3 -3
  110. package/dist/__chunks/{22W7JX3C.js → LPWENXKW.js} +2 -2
  111. package/dist/__chunks/{SXABWYV4.cjs → MAABAXPP.cjs} +3 -3
  112. package/dist/__chunks/{IJNZIOML.js → MLJKPE76.js} +2 -2
  113. package/dist/__chunks/{TLVOHYPL.js → O27UNR7R.js} +2 -2
  114. package/dist/__chunks/{5ODCKBUB.js → Q5EIO3ZT.js} +2 -2
  115. package/dist/__chunks/{Q5GSB3Y5.js → Q6MTOVYN.js} +2 -2
  116. package/dist/__chunks/{IAOEIH7U.cjs → RABZMRSJ.cjs} +3 -3
  117. package/dist/__chunks/{SDTI2RBA.cjs → TY53S7AI.cjs} +3 -3
  118. package/dist/__chunks/{4K4SF7RI.js → TZ3U2EZP.js} +2 -2
  119. package/dist/__chunks/{ZFZJ56ZA.cjs → ULH3WUVW.cjs} +18 -18
  120. package/dist/__chunks/{ZFZJ56ZA.cjs.map → ULH3WUVW.cjs.map} +1 -1
  121. package/dist/__chunks/{YAL24M7H.js → VFNNZZPM.js} +2 -2
  122. package/dist/__chunks/{T75E3KPP.cjs → VICE5H6S.cjs} +10 -10
  123. package/dist/__chunks/{AOKSJPV6.cjs → W4JR43JJ.cjs} +1 -1
  124. package/dist/__chunks/{AOKSJPV6.cjs.map → W4JR43JJ.cjs.map} +1 -1
  125. package/dist/__chunks/{YHHU5RSR.js → WEI25NBB.js} +2 -2
  126. package/dist/__chunks/{SEFHKYBL.js → XUVWR3MT.js} +2 -2
  127. package/dist/__chunks/{P234RPXN.js → YMFS4GTJ.js} +2 -2
  128. package/dist/__chunks/{WILWV75P.js → YSHX52WN.js} +4 -4
  129. package/dist/__chunks/{WILWV75P.js.map → YSHX52WN.js.map} +1 -1
  130. package/dist/index.cjs +20 -20
  131. package/dist/index.css +67 -67
  132. package/dist/index.css.map +1 -1
  133. package/dist/index.js +19 -19
  134. package/package.json +1 -1
  135. /package/dist/__chunks/{QTGWI2GM.cjs.map → 3QV4LYGN.cjs.map} +0 -0
  136. /package/dist/__chunks/{BA5NNKNL.js.map → 3RPDJFR4.js.map} +0 -0
  137. /package/dist/__chunks/{HA4KAF7N.js.map → 44DDUZLN.js.map} +0 -0
  138. /package/dist/__chunks/{S2VZE6RS.js.map → 5YXVVFJ3.js.map} +0 -0
  139. /package/dist/__chunks/{ESGW3XTV.cjs.map → 6KTCQQ7E.cjs.map} +0 -0
  140. /package/dist/__chunks/{4U2YGWTW.cjs.map → 6UFO6JEO.cjs.map} +0 -0
  141. /package/dist/__chunks/{364LH7BQ.cjs.map → AI3HSJ4Z.cjs.map} +0 -0
  142. /package/dist/__chunks/{AL4ECXRL.cjs.map → CI5BYRSX.cjs.map} +0 -0
  143. /package/dist/__chunks/{DUANKQDU.js.map → CJLPH2FJ.js.map} +0 -0
  144. /package/dist/__chunks/{EIR3V4AH.cjs.map → CXCRGFIV.cjs.map} +0 -0
  145. /package/dist/__chunks/{Q3I37NS7.cjs.map → DTEKITMF.cjs.map} +0 -0
  146. /package/dist/__chunks/{VW7HLULP.cjs.map → EILCQTJ3.cjs.map} +0 -0
  147. /package/dist/__chunks/{DV73RCNK.cjs.map → EUUNDEAV.cjs.map} +0 -0
  148. /package/dist/__chunks/{DC7G3PCP.cjs.map → FCNPD5TI.cjs.map} +0 -0
  149. /package/dist/__chunks/{ZOWJFE7W.js.map → HS7E5SFN.js.map} +0 -0
  150. /package/dist/__chunks/{ULHGK75R.cjs.map → LAT2IHTZ.cjs.map} +0 -0
  151. /package/dist/__chunks/{22W7JX3C.js.map → LPWENXKW.js.map} +0 -0
  152. /package/dist/__chunks/{SXABWYV4.cjs.map → MAABAXPP.cjs.map} +0 -0
  153. /package/dist/__chunks/{IJNZIOML.js.map → MLJKPE76.js.map} +0 -0
  154. /package/dist/__chunks/{TLVOHYPL.js.map → O27UNR7R.js.map} +0 -0
  155. /package/dist/__chunks/{5ODCKBUB.js.map → Q5EIO3ZT.js.map} +0 -0
  156. /package/dist/__chunks/{Q5GSB3Y5.js.map → Q6MTOVYN.js.map} +0 -0
  157. /package/dist/__chunks/{IAOEIH7U.cjs.map → RABZMRSJ.cjs.map} +0 -0
  158. /package/dist/__chunks/{SDTI2RBA.cjs.map → TY53S7AI.cjs.map} +0 -0
  159. /package/dist/__chunks/{4K4SF7RI.js.map → TZ3U2EZP.js.map} +0 -0
  160. /package/dist/__chunks/{YAL24M7H.js.map → VFNNZZPM.js.map} +0 -0
  161. /package/dist/__chunks/{T75E3KPP.cjs.map → VICE5H6S.cjs.map} +0 -0
  162. /package/dist/__chunks/{YHHU5RSR.js.map → WEI25NBB.js.map} +0 -0
  163. /package/dist/__chunks/{SEFHKYBL.js.map → XUVWR3MT.js.map} +0 -0
  164. /package/dist/__chunks/{P234RPXN.js.map → YMFS4GTJ.js.map} +0 -0
@@ -3,10 +3,10 @@
3
3
 
4
4
 
5
5
 
6
- var _T75E3KPPcjs = require('./T75E3KPP.cjs');
6
+ var _VICE5H6Scjs = require('./VICE5H6S.cjs');
7
7
 
8
8
 
9
- var _QTGWI2GMcjs = require('./QTGWI2GM.cjs');
9
+ var _3QV4LYGNcjs = require('./3QV4LYGN.cjs');
10
10
 
11
11
 
12
12
  var _CYMLBKRUcjs = require('./CYMLBKRU.cjs');
@@ -19,19 +19,19 @@ var _UKLQ64N7cjs = require('./UKLQ64N7.cjs');
19
19
 
20
20
 
21
21
 
22
- var _AOKSJPV6cjs = require('./AOKSJPV6.cjs');
22
+ var _W4JR43JJcjs = require('./W4JR43JJ.cjs');
23
23
 
24
24
 
25
- var _Q3I37NS7cjs = require('./Q3I37NS7.cjs');
25
+ var _DTEKITMFcjs = require('./DTEKITMF.cjs');
26
26
 
27
27
 
28
- var _VW7HLULPcjs = require('./VW7HLULP.cjs');
28
+ var _EILCQTJ3cjs = require('./EILCQTJ3.cjs');
29
29
 
30
30
 
31
31
  var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
32
32
 
33
33
 
34
- var _OWLMHTW5cjs = require('./OWLMHTW5.cjs');
34
+ var _46QLII42cjs = require('./46QLII42.cjs');
35
35
 
36
36
 
37
37
  var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
@@ -59,7 +59,7 @@ var _utils = require('@react-stately/utils');
59
59
  var _interactions = require('@react-aria/interactions');
60
60
 
61
61
  // css-module:../SelectList/SelectList.module.css#css-module
62
- var SelectList_module_default = { "selectContainer": "_selectContainer_itxk7_1", "selectContainerCambio": "_selectContainerCambio_itxk7_7", "opacityOverlay": "_opacityOverlay_itxk7_11", "selectWrapper": "_selectWrapper_itxk7_15", "selectBox": "_selectBox_itxk7_20", "selectBoxClassic": "_selectBoxClassic_itxk7_36", "selectBoxCambio": "_selectBoxCambio_itxk7_41", "selectMouseFocusStyling": "_selectMouseFocusStyling_itxk7_50", "unselected": "_unselected_itxk7_55", "selected": "_selected_itxk7_59", "arrowIcon": "_arrowIcon_itxk7_63", "sm": "_sm_itxk7_77", "md": "_md_itxk7_83", "lg": "_lg_itxk7_89", "selectError": "_selectError_itxk7_95", "selectErrorCambio": "_selectErrorCambio_itxk7_101" };
62
+ var SelectList_module_default = { "selectContainer": "_selectContainer_1cum9_1", "selectContainerCambio": "_selectContainerCambio_1cum9_7", "opacityOverlay": "_opacityOverlay_1cum9_11", "selectWrapper": "_selectWrapper_1cum9_15", "selectBox": "_selectBox_1cum9_20", "selectBoxClassic": "_selectBoxClassic_1cum9_36", "selectBoxCambio": "_selectBoxCambio_1cum9_41", "selectMouseFocusStyling": "_selectMouseFocusStyling_1cum9_50", "unselected": "_unselected_1cum9_55", "selected": "_selected_1cum9_59", "arrowIcon": "_arrowIcon_1cum9_63", "sm": "_sm_1cum9_77", "md": "_md_1cum9_83", "lg": "_lg_1cum9_89", "selectError": "_selectError_1cum9_95", "selectErrorCambio": "_selectErrorCambio_1cum9_101" };
63
63
 
64
64
  // src/RichSelect/RichSelectList.tsx
65
65
  var _reactaria = require('react-aria');
@@ -111,11 +111,11 @@ function RichSelectList(props) {
111
111
  const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
112
112
  const overlayHandlerRef = _react.useRef.call(void 0, {});
113
113
  const selectedKeysProp = _react.useMemo.call(void 0,
114
- () => _T75E3KPPcjs.convertSelection.call(void 0, selectedValuesProp),
114
+ () => _VICE5H6Scjs.convertSelection.call(void 0, selectedValuesProp),
115
115
  [selectedValuesProp]
116
116
  );
117
117
  const defaultSelectedKeys = _react.useMemo.call(void 0,
118
- () => _T75E3KPPcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
118
+ () => _VICE5H6Scjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
119
119
  [defaultSelectedValuesProp]
120
120
  );
121
121
  const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0,
@@ -153,7 +153,7 @@ function RichSelectList(props) {
153
153
  _reactariacomponents.Provider,
154
154
  {
155
155
  values: [
156
- [_T75E3KPPcjs.RichSelectBoxContext, { autoFocus: true }],
156
+ [_VICE5H6Scjs.RichSelectBoxContext, { autoFocus: true }],
157
157
  [_577X7X3Jcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
158
158
  // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
159
159
  ],
@@ -180,7 +180,7 @@ function RichSelectList(props) {
180
180
  (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
181
181
  _interactions.setInteractionModality.call(void 0, "keyboard");
182
182
  },
183
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 3, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OWLMHTW5cjs.Typography_default, { size: 100, color: "gray700", children: label }) })
183
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 3, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _46QLII42cjs.Typography_default, { size: 100, color: "gray700", children: label }) })
184
184
  })
185
185
  ) }),
186
186
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
@@ -196,7 +196,7 @@ function RichSelectList(props) {
196
196
  padding: autosave ? void 0 : 5,
197
197
  dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
198
198
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
199
- _T75E3KPPcjs.RichSelectBox_default,
199
+ _VICE5H6Scjs.RichSelectBox_default,
200
200
  _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
201
201
  autosave,
202
202
  selectedValues: selectedKeys,
@@ -246,7 +246,7 @@ function RichSelectList(props) {
246
246
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
247
247
  "path",
248
248
  {
249
- fill: errorText ? _AOKSJPV6cjs.ColorBaseDestructive700 : _AOKSJPV6cjs.ColorBaseGray800,
249
+ fill: errorText ? _W4JR43JJcjs.ColorBaseDestructive700 : _W4JR43JJcjs.ColorBaseGray800,
250
250
  d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
251
251
  }
252
252
  )
@@ -258,7 +258,7 @@ function RichSelectList(props) {
258
258
  }
259
259
  ),
260
260
  (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: themeName === "classic" ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
261
- _OWLMHTW5cjs.Typography_default,
261
+ _46QLII42cjs.Typography_default,
262
262
  _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
263
263
  size: 100,
264
264
  color: errorText ? "destructive-primary" : "gray700"
@@ -273,12 +273,12 @@ function RichSelectList(props) {
273
273
  );
274
274
  }
275
275
  var RichSelectList_default = Object.assign(RichSelectList, {
276
- Section: _Q3I37NS7cjs.RichSelectSection_default,
277
- Chip: _QTGWI2GMcjs.RichSelectChip_default,
278
- RadioButton: _VW7HLULPcjs.RichSelectRadioButton_default
276
+ Section: _DTEKITMFcjs.RichSelectSection_default,
277
+ Chip: _3QV4LYGNcjs.RichSelectChip_default,
278
+ RadioButton: _EILCQTJ3cjs.RichSelectRadioButton_default
279
279
  });
280
280
 
281
281
 
282
282
 
283
283
  exports.RichSelectList_default = RichSelectList_default;
284
- //# sourceMappingURL=ZFZJ56ZA.cjs.map
284
+ //# sourceMappingURL=ULH3WUVW.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"names":["_a"],"mappings":"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","sourcesContent":["import React, {\n type ReactElement,\n useMemo,\n type SyntheticEvent,\n useRef,\n useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n ColorBaseDestructive700,\n ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n Label as ReactAriaLabel,\n Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n RichSelectBoxContext,\n convertSelection,\n type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst NOOP = () => undefined;\n\nconst iconSize = {\n sm: 20,\n md: 24,\n lg: 24,\n} as const;\n\nexport type RichSelectListProps = RichSelectBoxProps & {\n /** Test id for the select element */\n \"data-testid\"?: string;\n /**\n * Disables the select dropdown entirely\n * @defaultValue false\n */\n disabled?: boolean;\n /** Callback to be called when select is clicked */\n onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n /** Text shown below select box if there is an input error. */\n errorText?: string;\n /** Text shown below select box */\n helperText?: string;\n /**\n * RichSelectList id, if not provided, a unique id will be generated\n */\n id?: string;\n /** Text shown above select box */\n label: string;\n /**\n * Text showing in select box if no option has been chosen.\n * There should always have a placeholder unless there is a default option selected\n */\n placeholderText?: string;\n /** Use to render (override) text shown in the select box */\n selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n /**\n * Size of the select box\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n <RichSelectList\n label=\"My Label\"\n multiple\n onChange={() => { ... }}\n primaryButtonText=\"Save\"\n primaryButtonAccessibilityLabel=\"Save\"\n secondaryButtonText=\"Clear\"\n secondaryButtonAccessibilityLabel=\"Clear\"\n >\n <RichSelectList.Section label=\"Cities\">\n <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n </RichSelectList.Section>\n </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n const {\n autosave,\n children,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n errorText,\n helperText,\n label,\n id,\n onChange,\n onClick = NOOP,\n placeholderText,\n selectTextValue,\n selectedValues: selectedValuesProp,\n defaultSelectedValues: defaultSelectedValuesProp,\n size = \"md\",\n ...richSelectBoxProps\n } = props;\n\n const reactId = useId();\n const inputId = id ?? reactId;\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const { themeName } = useTheme();\n\n // passed to popover, which attached open/close methods\n const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n const selectedKeysProp = useMemo(\n () => convertSelection(selectedValuesProp),\n [selectedValuesProp],\n );\n const defaultSelectedKeys = useMemo(\n () => convertSelection(defaultSelectedValuesProp, new Set()),\n [defaultSelectedValuesProp],\n );\n const [selectedKeys, setSelectedKeys] = useControlledState(\n selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately. Internally they rely on value (first arg) able to be undefined\n defaultSelectedKeys,\n (value) => {\n const _value = value === \"all\" ? \"all\" : [...value].map(String);\n onChange(_value);\n if (!autosave) overlayHandlerRef.current.close?.();\n },\n );\n\n const selectedTextValue = useMemo(() => {\n if (selectTextValue)\n return (\n selectTextValue(\n selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n ) ?? placeholderText\n );\n if (selectedKeys === \"all\") return \"All selected\";\n if (selectedKeys.size) return `${selectedKeys.size} selected`;\n return placeholderText;\n }, [selectTextValue, selectedKeys, placeholderText]);\n\n const fieldRef = useRef<HTMLDivElement>(null);\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n useField({\n label, // this is the label for the select box\n description: helperText,\n errorMessage: errorText,\n });\n\n return (\n <ReactAriaProvider\n values={[\n [RichSelectBoxContext, { autoFocus: true }],\n [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n ]}\n >\n <div\n className={classNames(styles.selectContainer, {\n [styles.opacityOverlay]: disabled,\n [styles.selectContainerCambio]: themeName === \"cambio\",\n })}\n >\n {label && (\n <>\n <ReactAriaLabel\n data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n className={classNames(\n themeName === \"cambio\" && styles.labelCambio,\n )}\n {...labelProps}\n onClick={() => {\n if (disabled) return;\n fieldRef.current?.focus();\n setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n }}\n >\n <Box paddingX={themeName === \"classic\" ? 1 : 3}>\n <Typography size={100} color=\"gray700\">\n {label}\n </Typography>\n </Box>\n </ReactAriaLabel>\n </>\n )}\n <Popover\n ref={overlayHandlerRef}\n disabled={disabled}\n content={\n // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n <Box\n padding={autosave ? undefined : 5}\n dangerouslySetInlineStyle={\n autosave ? undefined : { __style: { paddingBottom: 0 } }\n }\n >\n <RichSelectBox\n autosave={autosave}\n selectedValues={selectedKeys}\n defaultSelectedValues={defaultSelectedKeys}\n onChange={(selected) => setSelectedKeys(new Set(selected))}\n {...richSelectBoxProps}\n accessibilityLabel={inputId}\n >\n {children}\n </RichSelectBox>\n </Box>\n }\n >\n <TapArea\n data-testid={dataTestId}\n disabled={disabled}\n onClick={onClick}\n rounding={size === \"lg\" ? \"lg\" : \"md\"}\n {...fieldProps}\n ref={fieldRef}\n >\n <div className={styles.selectWrapper}>\n <div\n className={classNames(\n styles.selectBox,\n themeName === \"classic\"\n ? styles.selectBoxClassic\n : styles.selectBoxCambio,\n themeName === \"classic\" && styles[size],\n {\n [styles.unselected]:\n !errorText &&\n selectedKeys !== \"all\" &&\n !selectedKeys.size,\n [styles.selected]:\n !errorText &&\n (selectedKeys === \"all\" || selectedKeys.size),\n [themeName === \"classic\"\n ? styles.selectError\n : styles.selectErrorCambio]: errorText,\n },\n )}\n >\n {selectedTextValue}\n </div>\n <div className={styles.arrowIcon}>\n <svg\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width={iconSize[size]}\n >\n <path\n fill={\n errorText ? ColorBaseDestructive700 : ColorBaseGray800\n }\n d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n />\n </svg>\n </div>\n </div>\n </TapArea>\n </Popover>\n {(helperText || errorText) && (\n <Box paddingX={themeName === \"classic\" ? 1 : 0}>\n <Typography\n size={100}\n color={errorText ? \"destructive-primary\" : \"gray700\"}\n {...(errorText ? errorMessageProps : descriptionProps)}\n >\n {errorText ? errorText : helperText}\n </Typography>\n </Box>\n )}\n </div>\n </ReactAriaProvider>\n );\n}\n\nexport default Object.assign(RichSelectList, {\n Section: RichSelectSection,\n Chip: RichSelectChip,\n RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_itxk7_1\",\"selectContainerCambio\":\"_selectContainerCambio_itxk7_7\",\"opacityOverlay\":\"_opacityOverlay_itxk7_11\",\"selectWrapper\":\"_selectWrapper_itxk7_15\",\"selectBox\":\"_selectBox_itxk7_20\",\"selectBoxClassic\":\"_selectBoxClassic_itxk7_36\",\"selectBoxCambio\":\"_selectBoxCambio_itxk7_41\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_itxk7_50\",\"unselected\":\"_unselected_itxk7_55\",\"selected\":\"_selected_itxk7_59\",\"arrowIcon\":\"_arrowIcon_itxk7_63\",\"sm\":\"_sm_itxk7_77\",\"md\":\"_md_itxk7_83\",\"lg\":\"_lg_itxk7_89\",\"selectError\":\"_selectError_itxk7_95\",\"selectErrorCambio\":\"_selectErrorCambio_itxk7_101\"}"]}
1
+ {"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"names":["_a"],"mappings":"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","sourcesContent":["import React, {\n type ReactElement,\n useMemo,\n type SyntheticEvent,\n useRef,\n useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n ColorBaseDestructive700,\n ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n Label as ReactAriaLabel,\n Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n RichSelectBoxContext,\n convertSelection,\n type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst NOOP = () => undefined;\n\nconst iconSize = {\n sm: 20,\n md: 24,\n lg: 24,\n} as const;\n\nexport type RichSelectListProps = RichSelectBoxProps & {\n /** Test id for the select element */\n \"data-testid\"?: string;\n /**\n * Disables the select dropdown entirely\n * @defaultValue false\n */\n disabled?: boolean;\n /** Callback to be called when select is clicked */\n onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n /** Text shown below select box if there is an input error. */\n errorText?: string;\n /** Text shown below select box */\n helperText?: string;\n /**\n * RichSelectList id, if not provided, a unique id will be generated\n */\n id?: string;\n /** Text shown above select box */\n label: string;\n /**\n * Text showing in select box if no option has been chosen.\n * There should always have a placeholder unless there is a default option selected\n */\n placeholderText?: string;\n /** Use to render (override) text shown in the select box */\n selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n /**\n * Size of the select box\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n <RichSelectList\n label=\"My Label\"\n multiple\n onChange={() => { ... }}\n primaryButtonText=\"Save\"\n primaryButtonAccessibilityLabel=\"Save\"\n secondaryButtonText=\"Clear\"\n secondaryButtonAccessibilityLabel=\"Clear\"\n >\n <RichSelectList.Section label=\"Cities\">\n <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n </RichSelectList.Section>\n </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n const {\n autosave,\n children,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n errorText,\n helperText,\n label,\n id,\n onChange,\n onClick = NOOP,\n placeholderText,\n selectTextValue,\n selectedValues: selectedValuesProp,\n defaultSelectedValues: defaultSelectedValuesProp,\n size = \"md\",\n ...richSelectBoxProps\n } = props;\n\n const reactId = useId();\n const inputId = id ?? reactId;\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const { themeName } = useTheme();\n\n // passed to popover, which attached open/close methods\n const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n const selectedKeysProp = useMemo(\n () => convertSelection(selectedValuesProp),\n [selectedValuesProp],\n );\n const defaultSelectedKeys = useMemo(\n () => convertSelection(defaultSelectedValuesProp, new Set()),\n [defaultSelectedValuesProp],\n );\n const [selectedKeys, setSelectedKeys] = useControlledState(\n selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately. Internally they rely on value (first arg) able to be undefined\n defaultSelectedKeys,\n (value) => {\n const _value = value === \"all\" ? \"all\" : [...value].map(String);\n onChange(_value);\n if (!autosave) overlayHandlerRef.current.close?.();\n },\n );\n\n const selectedTextValue = useMemo(() => {\n if (selectTextValue)\n return (\n selectTextValue(\n selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n ) ?? placeholderText\n );\n if (selectedKeys === \"all\") return \"All selected\";\n if (selectedKeys.size) return `${selectedKeys.size} selected`;\n return placeholderText;\n }, [selectTextValue, selectedKeys, placeholderText]);\n\n const fieldRef = useRef<HTMLDivElement>(null);\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n useField({\n label, // this is the label for the select box\n description: helperText,\n errorMessage: errorText,\n });\n\n return (\n <ReactAriaProvider\n values={[\n [RichSelectBoxContext, { autoFocus: true }],\n [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n ]}\n >\n <div\n className={classNames(styles.selectContainer, {\n [styles.opacityOverlay]: disabled,\n [styles.selectContainerCambio]: themeName === \"cambio\",\n })}\n >\n {label && (\n <>\n <ReactAriaLabel\n data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n className={classNames(\n themeName === \"cambio\" && styles.labelCambio,\n )}\n {...labelProps}\n onClick={() => {\n if (disabled) return;\n fieldRef.current?.focus();\n setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n }}\n >\n <Box paddingX={themeName === \"classic\" ? 1 : 3}>\n <Typography size={100} color=\"gray700\">\n {label}\n </Typography>\n </Box>\n </ReactAriaLabel>\n </>\n )}\n <Popover\n ref={overlayHandlerRef}\n disabled={disabled}\n content={\n // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n <Box\n padding={autosave ? undefined : 5}\n dangerouslySetInlineStyle={\n autosave ? undefined : { __style: { paddingBottom: 0 } }\n }\n >\n <RichSelectBox\n autosave={autosave}\n selectedValues={selectedKeys}\n defaultSelectedValues={defaultSelectedKeys}\n onChange={(selected) => setSelectedKeys(new Set(selected))}\n {...richSelectBoxProps}\n accessibilityLabel={inputId}\n >\n {children}\n </RichSelectBox>\n </Box>\n }\n >\n <TapArea\n data-testid={dataTestId}\n disabled={disabled}\n onClick={onClick}\n rounding={size === \"lg\" ? \"lg\" : \"md\"}\n {...fieldProps}\n ref={fieldRef}\n >\n <div className={styles.selectWrapper}>\n <div\n className={classNames(\n styles.selectBox,\n themeName === \"classic\"\n ? styles.selectBoxClassic\n : styles.selectBoxCambio,\n themeName === \"classic\" && styles[size],\n {\n [styles.unselected]:\n !errorText &&\n selectedKeys !== \"all\" &&\n !selectedKeys.size,\n [styles.selected]:\n !errorText &&\n (selectedKeys === \"all\" || selectedKeys.size),\n [themeName === \"classic\"\n ? styles.selectError\n : styles.selectErrorCambio]: errorText,\n },\n )}\n >\n {selectedTextValue}\n </div>\n <div className={styles.arrowIcon}>\n <svg\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width={iconSize[size]}\n >\n <path\n fill={\n errorText ? ColorBaseDestructive700 : ColorBaseGray800\n }\n d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n />\n </svg>\n </div>\n </div>\n </TapArea>\n </Popover>\n {(helperText || errorText) && (\n <Box paddingX={themeName === \"classic\" ? 1 : 0}>\n <Typography\n size={100}\n color={errorText ? \"destructive-primary\" : \"gray700\"}\n {...(errorText ? errorMessageProps : descriptionProps)}\n >\n {errorText ? errorText : helperText}\n </Typography>\n </Box>\n )}\n </div>\n </ReactAriaProvider>\n );\n}\n\nexport default Object.assign(RichSelectList, {\n Section: RichSelectSection,\n Chip: RichSelectChip,\n RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_1cum9_1\",\"selectContainerCambio\":\"_selectContainerCambio_1cum9_7\",\"opacityOverlay\":\"_opacityOverlay_1cum9_11\",\"selectWrapper\":\"_selectWrapper_1cum9_15\",\"selectBox\":\"_selectBox_1cum9_20\",\"selectBoxClassic\":\"_selectBoxClassic_1cum9_36\",\"selectBoxCambio\":\"_selectBoxCambio_1cum9_41\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1cum9_50\",\"unselected\":\"_unselected_1cum9_55\",\"selected\":\"_selected_1cum9_59\",\"arrowIcon\":\"_arrowIcon_1cum9_63\",\"sm\":\"_sm_1cum9_77\",\"md\":\"_md_1cum9_83\",\"lg\":\"_lg_1cum9_89\",\"selectError\":\"_selectError_1cum9_95\",\"selectErrorCambio\":\"_selectErrorCambio_1cum9_101\"}"]}
@@ -25,7 +25,7 @@ import {
25
25
  } from "./KU5UT5RY.js";
26
26
  import {
27
27
  Typography_default
28
- } from "./2RIIE7CU.js";
28
+ } from "./DZRB2DSH.js";
29
29
  import {
30
30
  useTheme
31
31
  } from "./ZSHAHV4F.js";
@@ -134,4 +134,4 @@ var Button_default = Button;
134
134
  export {
135
135
  Button_default
136
136
  };
137
- //# sourceMappingURL=YAL24M7H.js.map
137
+ //# sourceMappingURL=VFNNZZPM.js.map
@@ -4,19 +4,19 @@
4
4
  var _VBQTLO2Pcjs = require('./VBQTLO2P.cjs');
5
5
 
6
6
 
7
- var _4U2YGWTWcjs = require('./4U2YGWTW.cjs');
7
+ var _6UFO6JEOcjs = require('./6UFO6JEO.cjs');
8
8
 
9
9
 
10
10
  var _UD4IRT6Ucjs = require('./UD4IRT6U.cjs');
11
11
 
12
12
 
13
- var _QTGWI2GMcjs = require('./QTGWI2GM.cjs');
13
+ var _3QV4LYGNcjs = require('./3QV4LYGN.cjs');
14
14
 
15
15
 
16
- var _Q3I37NS7cjs = require('./Q3I37NS7.cjs');
16
+ var _DTEKITMFcjs = require('./DTEKITMF.cjs');
17
17
 
18
18
 
19
- var _VW7HLULPcjs = require('./VW7HLULP.cjs');
19
+ var _EILCQTJ3cjs = require('./EILCQTJ3.cjs');
20
20
 
21
21
 
22
22
 
@@ -169,7 +169,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
169
169
  justifyContent: "end",
170
170
  children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _VBQTLO2Pcjs.ButtonGroup_default, { orientation: "horizontal", children: [
171
171
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
172
- _4U2YGWTWcjs.Button_default,
172
+ _6UFO6JEOcjs.Button_default,
173
173
  {
174
174
  onClick: clearChanges,
175
175
  color: "secondary",
@@ -179,7 +179,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
179
179
  }
180
180
  ),
181
181
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
182
- _4U2YGWTWcjs.Button_default,
182
+ _6UFO6JEOcjs.Button_default,
183
183
  {
184
184
  onClick: saveChanges,
185
185
  text: primaryButtonText,
@@ -198,9 +198,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
198
198
  }
199
199
  );
200
200
  var RichSelectBox_default = Object.assign(RichSelectBox, {
201
- Section: _Q3I37NS7cjs.RichSelectSection_default,
202
- Chip: _QTGWI2GMcjs.RichSelectChip_default,
203
- RadioButton: _VW7HLULPcjs.RichSelectRadioButton_default
201
+ Section: _DTEKITMFcjs.RichSelectSection_default,
202
+ Chip: _3QV4LYGNcjs.RichSelectChip_default,
203
+ RadioButton: _EILCQTJ3cjs.RichSelectRadioButton_default
204
204
  });
205
205
 
206
206
 
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
208
208
 
209
209
 
210
210
  exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
211
- //# sourceMappingURL=T75E3KPP.cjs.map
211
+ //# sourceMappingURL=VICE5H6S.cjs.map
@@ -8,4 +8,4 @@ var ColorBaseGray800 = "#353535";
8
8
 
9
9
 
10
10
  exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray800 = ColorBaseGray800;
11
- //# sourceMappingURL=AOKSJPV6.cjs.map
11
+ //# sourceMappingURL=W4JR43JJ.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 19 Mar 2024 21:57:31 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"]}
1
+ {"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 19 Mar 2024 22:48:59 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"]}
@@ -10,7 +10,7 @@ import {
10
10
  } from "./SHHN3SRR.js";
11
11
  import {
12
12
  Typography_default
13
- } from "./2RIIE7CU.js";
13
+ } from "./DZRB2DSH.js";
14
14
  import {
15
15
  colors_module_default
16
16
  } from "./JHJZ5COD.js";
@@ -166,4 +166,4 @@ export {
166
166
  AriaTooltip,
167
167
  Tooltip_default
168
168
  };
169
- //# sourceMappingURL=YHHU5RSR.js.map
169
+ //# sourceMappingURL=WEI25NBB.js.map
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Heading_default
4
- } from "./S2VZE6RS.js";
4
+ } from "./5YXVVFJ3.js";
5
5
  import {
6
6
  StopScroll
7
7
  } from "./QQT35OLE.js";
@@ -173,4 +173,4 @@ Modal.displayName = "Modal";
173
173
  export {
174
174
  Modal
175
175
  };
176
- //# sourceMappingURL=SEFHKYBL.js.map
176
+ //# sourceMappingURL=XUVWR3MT.js.map
@@ -4,7 +4,7 @@ import {
4
4
  } from "./KU5UT5RY.js";
5
5
  import {
6
6
  Typography_default
7
- } from "./2RIIE7CU.js";
7
+ } from "./DZRB2DSH.js";
8
8
  import {
9
9
  useTheme
10
10
  } from "./ZSHAHV4F.js";
@@ -60,4 +60,4 @@ var Badge_default = Badge;
60
60
  export {
61
61
  Badge_default
62
62
  };
63
- //# sourceMappingURL=P234RPXN.js.map
63
+ //# sourceMappingURL=YMFS4GTJ.js.map
@@ -5,7 +5,7 @@ import {
5
5
  import {
6
6
  ColorBaseDestructive700,
7
7
  ColorBaseGray800
8
- } from "./LZ4LFK7N.js";
8
+ } from "./K6HYPHZI.js";
9
9
  import {
10
10
  Focus_module_default
11
11
  } from "./KKADUD65.js";
@@ -14,7 +14,7 @@ import {
14
14
  } from "./KU5UT5RY.js";
15
15
  import {
16
16
  Typography_default
17
- } from "./2RIIE7CU.js";
17
+ } from "./DZRB2DSH.js";
18
18
  import {
19
19
  useTheme
20
20
  } from "./ZSHAHV4F.js";
@@ -33,7 +33,7 @@ import {
33
33
  import classNames from "classnames";
34
34
 
35
35
  // css-module:./SelectList.module.css#css-module
36
- var SelectList_module_default = { "selectContainer": "_selectContainer_itxk7_1", "selectContainerCambio": "_selectContainerCambio_itxk7_7", "opacityOverlay": "_opacityOverlay_itxk7_11", "selectWrapper": "_selectWrapper_itxk7_15", "selectBox": "_selectBox_itxk7_20", "selectBoxClassic": "_selectBoxClassic_itxk7_36", "selectBoxCambio": "_selectBoxCambio_itxk7_41", "selectMouseFocusStyling": "_selectMouseFocusStyling_itxk7_50", "unselected": "_unselected_itxk7_55", "selected": "_selected_itxk7_59", "arrowIcon": "_arrowIcon_itxk7_63", "sm": "_sm_itxk7_77", "md": "_md_itxk7_83", "lg": "_lg_itxk7_89", "selectError": "_selectError_itxk7_95", "selectErrorCambio": "_selectErrorCambio_itxk7_101" };
36
+ var SelectList_module_default = { "selectContainer": "_selectContainer_1cum9_1", "selectContainerCambio": "_selectContainerCambio_1cum9_7", "opacityOverlay": "_opacityOverlay_1cum9_11", "selectWrapper": "_selectWrapper_1cum9_15", "selectBox": "_selectBox_1cum9_20", "selectBoxClassic": "_selectBoxClassic_1cum9_36", "selectBoxCambio": "_selectBoxCambio_1cum9_41", "selectMouseFocusStyling": "_selectMouseFocusStyling_1cum9_50", "unselected": "_unselected_1cum9_55", "selected": "_selected_1cum9_59", "arrowIcon": "_arrowIcon_1cum9_63", "sm": "_sm_1cum9_77", "md": "_md_1cum9_83", "lg": "_lg_1cum9_89", "selectError": "_selectError_1cum9_95", "selectErrorCambio": "_selectErrorCambio_1cum9_101" };
37
37
 
38
38
  // src/SelectList/SelectList.tsx
39
39
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -138,4 +138,4 @@ SelectList.Option = SelectOption_default;
138
138
  export {
139
139
  SelectList
140
140
  };
141
- //# sourceMappingURL=WILWV75P.js.map
141
+ //# sourceMappingURL=YSHX52WN.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"sourcesContent":["import React, {\n type ReactElement,\n type ReactNode,\n useId,\n useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n ColorBaseDestructive700,\n ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n sm: 20,\n md: 24,\n lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n children,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n errorText,\n helperText,\n id,\n label,\n onChange,\n onClick,\n placeholderText,\n selectedValue = \"\",\n size = \"md\",\n}: {\n /**\n * One or more SelectList.Option components.\n */\n children: ReactNode;\n /**\n * Test id for the select element\n */\n \"data-testid\"?: string;\n /**\n * true if the select dropdown is disabled\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Callback to be called when select is clicked\n */\n onClick?: React.MouseEventHandler<HTMLSelectElement>;\n /**\n * Text shown below select box if there is an input error.\n */\n errorText?: string;\n /**\n * Text shown below select box\n */\n helperText?: string;\n /**\n * Id of the select element\n */\n id?: string;\n /**\n * Text shown above select box\n */\n label: string;\n /**\n * The callback to be called when an option is selected\n */\n onChange: React.ChangeEventHandler<HTMLSelectElement>;\n /**\n * Text showing in select box if no option has been chosen.\n * We should always have a placeholder unless there is a default option selected\n */\n placeholderText?: string;\n /**\n * Value of the currently selected option\n */\n selectedValue?: string;\n /**\n * Size of the select box\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n const reactId = useId();\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const { themeName } = useTheme();\n const selectId = id ?? reactId;\n const { isFocusVisible } = useFocusVisible();\n const [isFocused, setIsFocused] = useState(false);\n\n return (\n <div\n className={classNames(styles.selectContainer, {\n [styles.opacityOverlay]: disabled,\n [styles.selectContainerCambio]: themeName === \"cambio\",\n })}\n >\n {label && (\n <label htmlFor={selectId}>\n <Box paddingX={1}>\n <Typography size={100} color=\"gray700\">\n {label}\n </Typography>\n </Box>\n </label>\n )}\n <div className={styles.selectWrapper}>\n <select\n id={selectId}\n data-testid={dataTestId}\n disabled={disabled}\n className={classNames(\n styles.selectBox,\n themeName === \"classic\"\n ? styles.selectBoxClassic\n : styles.selectBoxCambio,\n themeName === \"classic\" && styles[size],\n {\n [styles.unselected]: !selectedValue && !errorText,\n [styles.selected]: selectedValue && !errorText,\n [themeName === \"classic\"\n ? styles.selectError\n : styles.selectErrorCambio]: errorText,\n [focusStyles.accessibilityOutlineFocus]:\n isFocused && isFocusVisible, // for focus keyboard\n [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n },\n )}\n onChange={onChange}\n onClick={onClick}\n value={\n placeholderText && !selectedValue ? placeholderText : selectedValue\n }\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n >\n {placeholderText && (\n <option disabled value={placeholderText}>\n {placeholderText}\n </option>\n )}\n {children}\n </select>\n <div className={styles.arrowIcon}>\n <svg\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width={themeName === \"classic\" ? iconSize[size] : 24}\n >\n <path\n fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n />\n </svg>\n </div>\n </div>\n {(helperText || errorText) && (\n <Box paddingX={1}>\n <Typography\n size={100}\n color={errorText ? \"destructive-primary\" : \"gray700\"}\n >\n {errorText ? errorText : helperText}\n </Typography>\n </Box>\n )}\n </div>\n );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_itxk7_1\",\"selectContainerCambio\":\"_selectContainerCambio_itxk7_7\",\"opacityOverlay\":\"_opacityOverlay_itxk7_11\",\"selectWrapper\":\"_selectWrapper_itxk7_15\",\"selectBox\":\"_selectBox_itxk7_20\",\"selectBoxClassic\":\"_selectBoxClassic_itxk7_36\",\"selectBoxCambio\":\"_selectBoxCambio_itxk7_41\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_itxk7_50\",\"unselected\":\"_unselected_itxk7_55\",\"selected\":\"_selected_itxk7_59\",\"arrowIcon\":\"_arrowIcon_itxk7_63\",\"sm\":\"_sm_itxk7_77\",\"md\":\"_md_itxk7_83\",\"lg\":\"_lg_itxk7_89\",\"selectError\":\"_selectError_itxk7_95\",\"selectErrorCambio\":\"_selectErrorCambio_itxk7_101\"}"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"sourcesContent":["import React, {\n type ReactElement,\n type ReactNode,\n useId,\n useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n ColorBaseDestructive700,\n ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n sm: 20,\n md: 24,\n lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n children,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n errorText,\n helperText,\n id,\n label,\n onChange,\n onClick,\n placeholderText,\n selectedValue = \"\",\n size = \"md\",\n}: {\n /**\n * One or more SelectList.Option components.\n */\n children: ReactNode;\n /**\n * Test id for the select element\n */\n \"data-testid\"?: string;\n /**\n * true if the select dropdown is disabled\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Callback to be called when select is clicked\n */\n onClick?: React.MouseEventHandler<HTMLSelectElement>;\n /**\n * Text shown below select box if there is an input error.\n */\n errorText?: string;\n /**\n * Text shown below select box\n */\n helperText?: string;\n /**\n * Id of the select element\n */\n id?: string;\n /**\n * Text shown above select box\n */\n label: string;\n /**\n * The callback to be called when an option is selected\n */\n onChange: React.ChangeEventHandler<HTMLSelectElement>;\n /**\n * Text showing in select box if no option has been chosen.\n * We should always have a placeholder unless there is a default option selected\n */\n placeholderText?: string;\n /**\n * Value of the currently selected option\n */\n selectedValue?: string;\n /**\n * Size of the select box\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n const reactId = useId();\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const { themeName } = useTheme();\n const selectId = id ?? reactId;\n const { isFocusVisible } = useFocusVisible();\n const [isFocused, setIsFocused] = useState(false);\n\n return (\n <div\n className={classNames(styles.selectContainer, {\n [styles.opacityOverlay]: disabled,\n [styles.selectContainerCambio]: themeName === \"cambio\",\n })}\n >\n {label && (\n <label htmlFor={selectId}>\n <Box paddingX={1}>\n <Typography size={100} color=\"gray700\">\n {label}\n </Typography>\n </Box>\n </label>\n )}\n <div className={styles.selectWrapper}>\n <select\n id={selectId}\n data-testid={dataTestId}\n disabled={disabled}\n className={classNames(\n styles.selectBox,\n themeName === \"classic\"\n ? styles.selectBoxClassic\n : styles.selectBoxCambio,\n themeName === \"classic\" && styles[size],\n {\n [styles.unselected]: !selectedValue && !errorText,\n [styles.selected]: selectedValue && !errorText,\n [themeName === \"classic\"\n ? styles.selectError\n : styles.selectErrorCambio]: errorText,\n [focusStyles.accessibilityOutlineFocus]:\n isFocused && isFocusVisible, // for focus keyboard\n [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n },\n )}\n onChange={onChange}\n onClick={onClick}\n value={\n placeholderText && !selectedValue ? placeholderText : selectedValue\n }\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n >\n {placeholderText && (\n <option disabled value={placeholderText}>\n {placeholderText}\n </option>\n )}\n {children}\n </select>\n <div className={styles.arrowIcon}>\n <svg\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width={themeName === \"classic\" ? iconSize[size] : 24}\n >\n <path\n fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n />\n </svg>\n </div>\n </div>\n {(helperText || errorText) && (\n <Box paddingX={1}>\n <Typography\n size={100}\n color={errorText ? \"destructive-primary\" : \"gray700\"}\n >\n {errorText ? errorText : helperText}\n </Typography>\n </Box>\n )}\n </div>\n );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_1cum9_1\",\"selectContainerCambio\":\"_selectContainerCambio_1cum9_7\",\"opacityOverlay\":\"_opacityOverlay_1cum9_11\",\"selectWrapper\":\"_selectWrapper_1cum9_15\",\"selectBox\":\"_selectBox_1cum9_20\",\"selectBoxClassic\":\"_selectBoxClassic_1cum9_36\",\"selectBoxCambio\":\"_selectBoxCambio_1cum9_41\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1cum9_50\",\"unselected\":\"_unselected_1cum9_55\",\"selected\":\"_selected_1cum9_59\",\"arrowIcon\":\"_arrowIcon_1cum9_63\",\"sm\":\"_sm_1cum9_77\",\"md\":\"_md_1cum9_83\",\"lg\":\"_lg_1cum9_89\",\"selectError\":\"_selectError_1cum9_95\",\"selectErrorCambio\":\"_selectErrorCambio_1cum9_101\"}"],"mappings":"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","names":[]}
package/dist/index.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
2
2
 
3
3
 
4
- var _ESGW3XTVcjs = require('./__chunks/ESGW3XTV.cjs');
4
+ var _6KTCQQ7Ecjs = require('./__chunks/6KTCQQ7E.cjs');
5
5
 
6
6
 
7
7
  var _635VMAFBcjs = require('./__chunks/635VMAFB.cjs');
@@ -13,46 +13,46 @@ var _ZIBKOWAKcjs = require('./__chunks/ZIBKOWAK.cjs');
13
13
  var _2RKCTJBIcjs = require('./__chunks/2RKCTJBI.cjs');
14
14
 
15
15
 
16
- var _SXABWYV4cjs = require('./__chunks/SXABWYV4.cjs');
16
+ var _MAABAXPPcjs = require('./__chunks/MAABAXPP.cjs');
17
17
 
18
18
 
19
- var _DC7G3PCPcjs = require('./__chunks/DC7G3PCP.cjs');
19
+ var _FCNPD5TIcjs = require('./__chunks/FCNPD5TI.cjs');
20
20
 
21
21
 
22
- var _364LH7BQcjs = require('./__chunks/364LH7BQ.cjs');
22
+ var _AI3HSJ4Zcjs = require('./__chunks/AI3HSJ4Z.cjs');
23
23
 
24
24
 
25
- var _ULHGK75Rcjs = require('./__chunks/ULHGK75R.cjs');
25
+ var _LAT2IHTZcjs = require('./__chunks/LAT2IHTZ.cjs');
26
26
  require('./__chunks/HUIHS6RN.cjs');
27
27
  require('./__chunks/5V4GT2NJ.cjs');
28
28
  require('./__chunks/BA4JPX36.cjs');
29
29
 
30
30
 
31
- var _DV73RCNKcjs = require('./__chunks/DV73RCNK.cjs');
31
+ var _EUUNDEAVcjs = require('./__chunks/EUUNDEAV.cjs');
32
32
 
33
33
 
34
- var _LKLPRA6Dcjs = require('./__chunks/LKLPRA6D.cjs');
34
+ var _JTDA7BDZcjs = require('./__chunks/JTDA7BDZ.cjs');
35
35
  require('./__chunks/4UJE5GMH.cjs');
36
36
 
37
37
 
38
- var _ZFZJ56ZAcjs = require('./__chunks/ZFZJ56ZA.cjs');
39
- require('./__chunks/T75E3KPP.cjs');
38
+ var _ULH3WUVWcjs = require('./__chunks/ULH3WUVW.cjs');
39
+ require('./__chunks/VICE5H6S.cjs');
40
40
 
41
41
 
42
42
  var _VBQTLO2Pcjs = require('./__chunks/VBQTLO2P.cjs');
43
43
 
44
44
 
45
- var _4U2YGWTWcjs = require('./__chunks/4U2YGWTW.cjs');
45
+ var _6UFO6JEOcjs = require('./__chunks/6UFO6JEO.cjs');
46
46
  require('./__chunks/3P2PWHOU.cjs');
47
47
  require('./__chunks/5JUNB754.cjs');
48
48
  require('./__chunks/54PSDUCD.cjs');
49
49
 
50
50
 
51
51
  var _UD4IRT6Ucjs = require('./__chunks/UD4IRT6U.cjs');
52
- require('./__chunks/QTGWI2GM.cjs');
52
+ require('./__chunks/3QV4LYGN.cjs');
53
53
 
54
54
 
55
- var _SDTI2RBAcjs = require('./__chunks/SDTI2RBA.cjs');
55
+ var _TY53S7AIcjs = require('./__chunks/TY53S7AI.cjs');
56
56
 
57
57
 
58
58
  var _CYMLBKRUcjs = require('./__chunks/CYMLBKRU.cjs');
@@ -67,13 +67,13 @@ require('./__chunks/HWQUS53M.cjs');
67
67
 
68
68
 
69
69
  var _UKLQ64N7cjs = require('./__chunks/UKLQ64N7.cjs');
70
- require('./__chunks/AOKSJPV6.cjs');
71
- require('./__chunks/Q3I37NS7.cjs');
70
+ require('./__chunks/W4JR43JJ.cjs');
71
+ require('./__chunks/DTEKITMF.cjs');
72
72
  require('./__chunks/MF7LLV7V.cjs');
73
- require('./__chunks/VW7HLULP.cjs');
73
+ require('./__chunks/EILCQTJ3.cjs');
74
74
 
75
75
 
76
- var _IAOEIH7Ucjs = require('./__chunks/IAOEIH7U.cjs');
76
+ var _RABZMRSJcjs = require('./__chunks/RABZMRSJ.cjs');
77
77
  require('./__chunks/XLUVINJW.cjs');
78
78
  require('./__chunks/RYUXG4AS.cjs');
79
79
  require('./__chunks/HCM63U3J.cjs');
@@ -81,12 +81,12 @@ require('./__chunks/QWMAWIWI.cjs');
81
81
  require('./__chunks/VKB7KOAH.cjs');
82
82
 
83
83
 
84
- var _AL4ECXRLcjs = require('./__chunks/AL4ECXRL.cjs');
84
+ var _CI5BYRSXcjs = require('./__chunks/CI5BYRSX.cjs');
85
85
  require('./__chunks/PLUVW6AM.cjs');
86
86
  require('./__chunks/IL22HCBF.cjs');
87
87
 
88
88
 
89
- var _EIR3V4AHcjs = require('./__chunks/EIR3V4AH.cjs');
89
+ var _CXCRGFIVcjs = require('./__chunks/CXCRGFIV.cjs');
90
90
 
91
91
 
92
92
 
@@ -96,7 +96,7 @@ require('./__chunks/S5QHTHST.cjs');
96
96
 
97
97
 
98
98
 
99
- var _OWLMHTW5cjs = require('./__chunks/OWLMHTW5.cjs');
99
+ var _46QLII42cjs = require('./__chunks/46QLII42.cjs');
100
100
  require('./__chunks/X2LNODY7.cjs');
101
101
 
102
102
 
@@ -136,5 +136,5 @@ require('./__chunks/X2SDR4SD.cjs');
136
136
 
137
137
 
138
138
 
139
- exports.Avatar = _635VMAFBcjs.Avatar_default; exports.AvatarGroup = _ZIBKOWAKcjs.AvatarGroup; exports.Badge = _ESGW3XTVcjs.Badge_default; exports.Box = _SNYEHXDAcjs.Box_default; exports.Button = _4U2YGWTWcjs.Button_default; exports.ButtonGroup = _VBQTLO2Pcjs.ButtonGroup_default; exports.Card = _2RKCTJBIcjs.Card; exports.Checkbox = _DC7G3PCPcjs.Checkbox_default; exports.Chip = _SDTI2RBAcjs.Chip_default; exports.Divider = _UD4IRT6Ucjs.Divider; exports.Heading = _ULHGK75Rcjs.Heading_default; exports.IconButton = _OG4RH3QZcjs.IconButton_default; exports.LinkButton = _SXABWYV4cjs.LinkButton_default; exports.Modal = _364LH7BQcjs.Modal; exports.Popover = _CYMLBKRUcjs.Popover_default; exports.RadioButton = _IAOEIH7Ucjs.RadioButton_default; exports.RichSelectList = _ZFZJ56ZAcjs.RichSelectList_default; exports.SelectList = _LKLPRA6Dcjs.SelectList; exports.TapArea = _UKLQ64N7cjs.TapArea_default; exports.TextArea = _DV73RCNKcjs.TextArea_default; exports.TextField = _EIR3V4AHcjs.TextField; exports.ThemeProvider = _TBQR2FPScjs.ThemeProvider; exports.Tooltip = _AL4ECXRLcjs.Tooltip_default; exports.Typography = _OWLMHTW5cjs.Typography_default; exports.useTheme = _TBQR2FPScjs.useTheme;
139
+ exports.Avatar = _635VMAFBcjs.Avatar_default; exports.AvatarGroup = _ZIBKOWAKcjs.AvatarGroup; exports.Badge = _6KTCQQ7Ecjs.Badge_default; exports.Box = _SNYEHXDAcjs.Box_default; exports.Button = _6UFO6JEOcjs.Button_default; exports.ButtonGroup = _VBQTLO2Pcjs.ButtonGroup_default; exports.Card = _2RKCTJBIcjs.Card; exports.Checkbox = _FCNPD5TIcjs.Checkbox_default; exports.Chip = _TY53S7AIcjs.Chip_default; exports.Divider = _UD4IRT6Ucjs.Divider; exports.Heading = _LAT2IHTZcjs.Heading_default; exports.IconButton = _OG4RH3QZcjs.IconButton_default; exports.LinkButton = _MAABAXPPcjs.LinkButton_default; exports.Modal = _AI3HSJ4Zcjs.Modal; exports.Popover = _CYMLBKRUcjs.Popover_default; exports.RadioButton = _RABZMRSJcjs.RadioButton_default; exports.RichSelectList = _ULH3WUVWcjs.RichSelectList_default; exports.SelectList = _JTDA7BDZcjs.SelectList; exports.TapArea = _UKLQ64N7cjs.TapArea_default; exports.TextArea = _EUUNDEAVcjs.TextArea_default; exports.TextField = _CXCRGFIVcjs.TextField; exports.ThemeProvider = _TBQR2FPScjs.ThemeProvider; exports.Tooltip = _CI5BYRSXcjs.Tooltip_default; exports.Typography = _46QLII42cjs.Typography_default; exports.useTheme = _TBQR2FPScjs.useTheme;
140
140
  //# sourceMappingURL=index.cjs.map