@procore/core-react 12.23.0 → 12.25.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 (246) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/AnchorNavigation/AnchorNavigation.styles.js +3 -3
  3. package/dist/Avatar/Avatar.styles.js +5 -5
  4. package/dist/AvatarStack/AvatarStack.styles.js +7 -7
  5. package/dist/Badge/Badge.styles.js +2 -2
  6. package/dist/BadgePill/BadgePill.styles.js +4 -4
  7. package/dist/Banner/Banner.styles.js +10 -10
  8. package/dist/Box/Box.styles.js +1 -1
  9. package/dist/Breadcrumbs/Breadcrumbs.styles.js +4 -4
  10. package/dist/Button/Button.styles.js +5 -5
  11. package/dist/Calendar/Calendar.styles.js +8 -8
  12. package/dist/Card/Card.styles.js +1 -1
  13. package/dist/Checkbox/Checkbox.styles.js +6 -6
  14. package/dist/Checkbox/CheckboxTooltip.js +1 -1
  15. package/dist/ContactItem/ContactItem.styles.js +5 -5
  16. package/dist/Content/Content.styles.js +2 -2
  17. package/dist/DateInput/DateInput.styles.js +6 -6
  18. package/dist/DetailPage/DetailPage.styles.js +7 -7
  19. package/dist/Dropdown/Dropdown.styles.js +3 -3
  20. package/dist/DropdownFlyout/DropdownFlyout.styles.js +4 -4
  21. package/dist/Dropzone/Dropzone.js +1 -1
  22. package/dist/Dropzone/Dropzone.styles.js +9 -9
  23. package/dist/EmptyState/EmptyState.styles.js +6 -6
  24. package/dist/Field/Field.styles.js +3 -3
  25. package/dist/FileList/FileList.styles.js +4 -4
  26. package/dist/FileSelect/FileExplorer/FileExplorer.styles.js +9 -9
  27. package/dist/FileSelect/FileExplorer/FileExplorerSidebar.styles.js +3 -3
  28. package/dist/FileSelect/FileSelect.styles.js +2 -2
  29. package/dist/FileSelect/FileSelectDropzone/FileSelectDropzone.styles.js +3 -3
  30. package/dist/FileSelect/FileTokenList/FileTokenList.styles.js +2 -2
  31. package/dist/FileSelect/GridSource/GridSource.styles.js +6 -6
  32. package/dist/FileSelect/LocalSource/LocalSource.styles.js +4 -4
  33. package/dist/FileSelect/SourceItem/SourceItem.styles.js +3 -3
  34. package/dist/FileSelect/ThumbnailList/ThumbnailList.styles.js +6 -6
  35. package/dist/FileSelect/TreeSource/TreeSource.styles.js +1 -1
  36. package/dist/FileToken/FileToken.styles.js +4 -4
  37. package/dist/FilterToken/FilterToken.styles.js +5 -5
  38. package/dist/FlexList/FlexList.styles.js +1 -1
  39. package/dist/Form/Form.styles.js +14 -14
  40. package/dist/Form/StyledFormikForm.styles.js +2 -2
  41. package/dist/Form/stories/util.js +3 -0
  42. package/dist/Form/stories/util.js.map +1 -1
  43. package/dist/GhostPlaceholder/GhostPlaceholder.styles.js +2 -2
  44. package/dist/Grid/Grid.styles.js +2 -2
  45. package/dist/GroupSelect/GroupSelect.styles.js +1 -1
  46. package/dist/Input/Input.styles.js +1 -1
  47. package/dist/Link/Link.styles.js +1 -1
  48. package/dist/ListPage/ListPage.styles.js +8 -8
  49. package/dist/Loader/Loader.styles.js +2 -2
  50. package/dist/Loader/Loader.types.d.ts +3 -2
  51. package/dist/Loader/Loader.types.js.map +1 -1
  52. package/dist/Menu/Menu.js +2 -0
  53. package/dist/Menu/Menu.js.map +1 -1
  54. package/dist/MenuImperative/MenuImperative.styles.js +10 -10
  55. package/dist/Modal/Modal.js +1 -0
  56. package/dist/Modal/Modal.js.map +1 -1
  57. package/dist/Modal/Modal.styles.js +13 -13
  58. package/dist/Modal/storyHelpers.d.ts +1 -0
  59. package/dist/Modal/storyHelpers.js +160 -85
  60. package/dist/Modal/storyHelpers.js.map +1 -1
  61. package/dist/MultiSelect/MultiSelect.styles.js +6 -6
  62. package/dist/NextMenu/NextMenu.styles.js +3 -3
  63. package/dist/NextTile/NextTile.js +29 -4
  64. package/dist/NextTile/NextTile.js.map +1 -1
  65. package/dist/NextTile/NextTile.types.d.ts +15 -0
  66. package/dist/NextTile/NextTile.types.js.map +1 -1
  67. package/dist/NextTile/index.d.ts +2 -0
  68. package/dist/NextTile/index.js +2 -0
  69. package/dist/NextTile/index.js.map +1 -0
  70. package/dist/Notation/Notation.js +1 -1
  71. package/dist/NumberInput/NumberInput.js +2 -0
  72. package/dist/NumberInput/NumberInput.js.map +1 -1
  73. package/dist/NumberInput/NumberInput.styles.js +7 -7
  74. package/dist/Overlay/OverlayArrow.styles.js +1 -1
  75. package/dist/OverlayTrigger/OverlayTrigger.js +6 -2
  76. package/dist/OverlayTrigger/OverlayTrigger.js.map +1 -1
  77. package/dist/OverlayTrigger/OverlayTrigger.types.d.ts +7 -2
  78. package/dist/OverlayTrigger/OverlayTrigger.types.js.map +1 -1
  79. package/dist/PageLayout/PageLayout.styles.js +16 -16
  80. package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.js +1 -1
  81. package/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.styles.js +3 -3
  82. package/dist/PageTemplate/PagePaneTemplate/PagePaneTemplate.styles.js +2 -2
  83. package/dist/PageTemplate/PageTemplate/PageTemplate.styles.js +3 -3
  84. package/dist/Pagination/Pagination.styles.js +5 -5
  85. package/dist/Pagination/PaginationSelect.js +1 -0
  86. package/dist/Pagination/PaginationSelect.js.map +1 -1
  87. package/dist/Panel/Panel.js +6 -4
  88. package/dist/Panel/Panel.js.map +1 -1
  89. package/dist/Panel/Panel.styles.js +11 -11
  90. package/dist/Pill/Pill.styles.js +2 -2
  91. package/dist/PillSelect/PillSelect.styles.js +4 -4
  92. package/dist/Popover/Popover.styles.js +2 -2
  93. package/dist/Portal/Portal.styles.js +1 -1
  94. package/dist/ProgressBar/ProgressBar.styles.js +2 -2
  95. package/dist/ProgressBar/ProgressBar.types.d.ts +1 -1
  96. package/dist/ProgressBar/ProgressBar.types.js.map +1 -1
  97. package/dist/RadioButton/RadioButton.styles.js +3 -3
  98. package/dist/Required/Required.styles.js +3 -3
  99. package/dist/Search/Search.styles.js +5 -5
  100. package/dist/Section/Section.styles.js +7 -7
  101. package/dist/SegmentedController/SegmentedController.d.ts +5 -0
  102. package/dist/SegmentedController/SegmentedController.js +49 -30
  103. package/dist/SegmentedController/SegmentedController.js.map +1 -1
  104. package/dist/SegmentedController/SegmentedController.styles.js +4 -4
  105. package/dist/Select/Select.styles.js +7 -7
  106. package/dist/Semantic/Semantic.styles.js +9 -9
  107. package/dist/Slider/Slider.styles.js +5 -5
  108. package/dist/Spinner/Spinner.js +14 -5
  109. package/dist/Spinner/Spinner.js.map +1 -1
  110. package/dist/Spinner/Spinner.styles.js +7 -7
  111. package/dist/SplitViewCard/SplitViewCard.styles.js +8 -8
  112. package/dist/SuperSelect/SuperSelect.js +1 -1
  113. package/dist/SuperSelect/SuperSelect.js.map +1 -1
  114. package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
  115. package/dist/SuperSelect/SuperSelect.styles.js +37 -37
  116. package/dist/Switch/Switch.styles.js +4 -4
  117. package/dist/Table/Table.styles.js +28 -28
  118. package/dist/TableShelf/TableShelf.styles.js +5 -5
  119. package/dist/Tabs/Tabs.styles.js +15 -15
  120. package/dist/Tearsheet/Tearsheet.styles.js +5 -5
  121. package/dist/TextArea/TextArea.styles.js +1 -1
  122. package/dist/TextEditorOutput/TextEditorOutput.styles.js +1 -1
  123. package/dist/Thumbnail/Thumbnail.styles.js +17 -17
  124. package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
  125. package/dist/TieredSelect/TieredSelect.styles.js +9 -9
  126. package/dist/Tile/Tile.styles.d.ts +1 -0
  127. package/dist/Tile/Tile.styles.js +19 -12
  128. package/dist/Tile/Tile.styles.js.map +1 -1
  129. package/dist/Tile/index.d.ts +1 -1
  130. package/dist/Tile/index.js.map +1 -1
  131. package/dist/Title/Title.styles.js +7 -7
  132. package/dist/Toast/Toast.styles.js +3 -3
  133. package/dist/ToggleButton/ToggleButton.styles.js +1 -1
  134. package/dist/Token/Token.styles.js +3 -3
  135. package/dist/ToolHeader/ToolHeader.styles.js +6 -6
  136. package/dist/ToolLandingPage/ToolLandingPage.styles.js +3 -3
  137. package/dist/Tooltip/Tooltip.styles.js +2 -2
  138. package/dist/Tree/Tree.styles.js +9 -9
  139. package/dist/Typeahead/Typeahead.styles.js +3 -3
  140. package/dist/Typography/Typography.styles.js +1 -1
  141. package/dist/Typography/Typography.table.story.js +2 -2
  142. package/dist/_hooks/I18n.d.ts +48 -0
  143. package/dist/_locales/de-DE.json +4 -1
  144. package/dist/_locales/en-AU.json +3 -0
  145. package/dist/_locales/en-CA.json +3 -0
  146. package/dist/_locales/en-GB.json +3 -0
  147. package/dist/_locales/en.json +3 -0
  148. package/dist/_locales/es-ES.json +4 -1
  149. package/dist/_locales/es.json +3 -0
  150. package/dist/_locales/fr-CA.json +6 -3
  151. package/dist/_locales/fr-FR.json +4 -1
  152. package/dist/_locales/is-IS.json +3 -0
  153. package/dist/_locales/it-IT.json +3 -0
  154. package/dist/_locales/ja-JP.json +3 -0
  155. package/dist/_locales/pl-PL.json +3 -0
  156. package/dist/_locales/pseudo.json +3 -0
  157. package/dist/_locales/pt-BR.json +3 -0
  158. package/dist/_locales/th-TH.json +3 -0
  159. package/dist/_locales/zh-SG.json +3 -0
  160. package/dist/_locales/zh-TW.json +375 -0
  161. package/dist/_typedoc/AnchorNavigation/AnchorNavigation.types.json +3 -3
  162. package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
  163. package/dist/_typedoc/AvatarStack/AvatarStack.types.json +24 -24
  164. package/dist/_typedoc/Badge/Badge.types.json +6 -6
  165. package/dist/_typedoc/Banner/Banner.types.json +13 -13
  166. package/dist/_typedoc/Box/Box.types.json +68 -68
  167. package/dist/_typedoc/Breadcrumbs/Breadcrumbs.types.json +10 -10
  168. package/dist/_typedoc/Button/Button.types.json +13 -13
  169. package/dist/_typedoc/Calendar/Calendar.types.json +80 -80
  170. package/dist/_typedoc/Card/Card.types.json +6 -6
  171. package/dist/_typedoc/Checkbox/Checkbox.types.json +9 -9
  172. package/dist/_typedoc/ContactItem/ContactItem.types.json +9 -9
  173. package/dist/_typedoc/DateInput/DateInput.types.json +35 -35
  174. package/dist/_typedoc/DateSelect/DateSelect.types.json +13 -13
  175. package/dist/_typedoc/DetailPage/DetailPage.types.json +5 -5
  176. package/dist/_typedoc/Dropdown/Dropdown.types.json +37 -37
  177. package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +30 -30
  178. package/dist/_typedoc/Dropzone/Dropzone.types.json +44 -44
  179. package/dist/_typedoc/EmptyState/EmptyState.types.json +16 -16
  180. package/dist/_typedoc/FileList/FileList.types.json +9 -9
  181. package/dist/_typedoc/FileSelect/FileSelect.types.json +27 -27
  182. package/dist/_typedoc/FileSelect/GridSource/GridSource.types.json +20 -20
  183. package/dist/_typedoc/FileSelect/LocalSource/LocalSource.types.json +14 -14
  184. package/dist/_typedoc/FileSelect/TreeSource/TreeSource.types.json +9 -9
  185. package/dist/_typedoc/Flex/Flex.types.json +27 -27
  186. package/dist/_typedoc/FlexList/FlexList.types.json +30 -30
  187. package/dist/_typedoc/Form/Form.types.json +741 -741
  188. package/dist/_typedoc/GhostPlaceholder/GhostPlaceholder.types.json +12 -12
  189. package/dist/_typedoc/Grid/Grid.types.json +8 -8
  190. package/dist/_typedoc/GroupSelect/GroupSelect.types.json +52 -52
  191. package/dist/_typedoc/Input/Input.types.json +2 -2
  192. package/dist/_typedoc/Link/Link.types.json +4 -4
  193. package/dist/_typedoc/ListPage/ListPage.types.json +13 -13
  194. package/dist/_typedoc/Menu/Menu.types.json +62 -62
  195. package/dist/_typedoc/MenuImperative/MenuImperative.types.json +74 -74
  196. package/dist/_typedoc/Modal/Modal.types.json +46 -46
  197. package/dist/_typedoc/MultiSelect/MultiSelect.types.json +31 -31
  198. package/dist/_typedoc/NextTile/NextTile.types.json +363 -0
  199. package/dist/_typedoc/Notation/Notation.types.json +4 -4
  200. package/dist/_typedoc/NumberInput/NumberInput.types.json +37 -37
  201. package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +41 -31
  202. package/dist/_typedoc/PageLayout/PageLayout.types.json +29 -29
  203. package/dist/_typedoc/Pagination/Pagination.types.json +7 -7
  204. package/dist/_typedoc/Panel/Panel.types.json +28 -28
  205. package/dist/_typedoc/Pill/Pill.types.json +2 -2
  206. package/dist/_typedoc/PillSelect/PillSelect.types.json +49 -49
  207. package/dist/_typedoc/Popover/Popover.types.json +15 -15
  208. package/dist/_typedoc/ProgressBar/ProgressBar.types.json +16 -6
  209. package/dist/_typedoc/RadioButton/RadioButton.types.json +6 -6
  210. package/dist/_typedoc/Required/Required.types.json +5 -5
  211. package/dist/_typedoc/Search/Search.types.json +18 -18
  212. package/dist/_typedoc/Section/Section.types.json +15 -15
  213. package/dist/_typedoc/SegmentedController/SegmentedController.types.json +21 -21
  214. package/dist/_typedoc/Select/Select.types.json +60 -60
  215. package/dist/_typedoc/SettingsPage/SettingsPage.types.json +10 -10
  216. package/dist/_typedoc/Slider/Slider.types.json +6 -6
  217. package/dist/_typedoc/Spinner/Spinner.types.json +9 -9
  218. package/dist/_typedoc/SplitViewCard/SplitViewCard.types.json +12 -12
  219. package/dist/_typedoc/Switch/Switch.types.json +3 -3
  220. package/dist/_typedoc/Table/Table.types.json +101 -101
  221. package/dist/_typedoc/Tabs/Tabs.types.json +20 -20
  222. package/dist/_typedoc/Tearsheet/Tearsheet.types.json +17 -17
  223. package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
  224. package/dist/_typedoc/TextEditor/TextEditor.types.json +9 -9
  225. package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +4 -4
  226. package/dist/_typedoc/Thumbnail/Thumbnail.types.json +19 -19
  227. package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +42 -42
  228. package/dist/_typedoc/TieredSelect/TieredSelect.types.json +28 -28
  229. package/dist/_typedoc/Tile/Tile.types.json +8 -263
  230. package/dist/_typedoc/Title/Title.types.json +1 -1
  231. package/dist/_typedoc/Toast/Toast.types.json +4 -4
  232. package/dist/_typedoc/ToggleButton/ToggleButton.types.json +4 -4
  233. package/dist/_typedoc/Token/Token.types.json +4 -4
  234. package/dist/_typedoc/ToolHeader/ToolHeader.types.json +10 -10
  235. package/dist/_typedoc/ToolLandingPage/ToolLandingPage.types.json +7 -7
  236. package/dist/_typedoc/Tooltip/Tooltip.types.json +13 -13
  237. package/dist/_typedoc/Tree/Tree.types.json +86 -86
  238. package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
  239. package/dist/_typedoc/Typography/Typography.types.json +9 -9
  240. package/dist/_typedoc/_utils/types.json +3 -3
  241. package/dist/_utils/propsTypedoc.d.ts +1 -0
  242. package/dist/_utils/propsTypedoc.js.map +1 -1
  243. package/dist/index.d.ts +1 -0
  244. package/dist/index.js +1 -0
  245. package/dist/index.js.map +1 -1
  246. package/package.json +2 -2
@@ -29,16 +29,31 @@ import { StyledContainer, StyledLabel, StyledSegment, StyledSegmentDisabledInter
29
29
  function isSegment(node) {
30
30
  return /*#__PURE__*/React.isValidElement(node) && node.type === Segment;
31
31
  }
32
+ export function determineSelectedState(_ref) {
33
+ var active = _ref.active,
34
+ selected = _ref.selected,
35
+ isSelected = _ref.isSelected;
36
+ // Selected is a prop, so it should be the source of truth
37
+ if (selected !== undefined) {
38
+ return selected;
39
+ }
40
+ // Active is a prop, so it should be the source of truth
41
+ if (active !== undefined) {
42
+ return active;
43
+ }
44
+ // If neither props are passed in, use the react-stately state
45
+ return isSelected;
46
+ }
32
47
  var RadioButtonContext = /*#__PURE__*/React.createContext(null);
33
- var SegmentedController_ = /*#__PURE__*/React.forwardRef(function SegmentedController(_ref, ref) {
34
- var ariaLabel = _ref['aria-label'],
35
- ariaLabelledby = _ref['aria-labelledby'],
36
- children = _ref.children,
37
- _ref$block = _ref.block,
38
- block = _ref$block === void 0 ? false : _ref$block,
39
- disabled = _ref.disabled,
40
- _onChange = _ref.onChange,
41
- props = _objectWithoutProperties(_ref, _excluded);
48
+ var SegmentedController_ = /*#__PURE__*/React.forwardRef(function SegmentedController(_ref2, ref) {
49
+ var ariaLabel = _ref2['aria-label'],
50
+ ariaLabelledby = _ref2['aria-labelledby'],
51
+ children = _ref2.children,
52
+ _ref2$block = _ref2.block,
53
+ block = _ref2$block === void 0 ? false : _ref2$block,
54
+ disabled = _ref2.disabled,
55
+ _onChange = _ref2.onChange,
56
+ props = _objectWithoutProperties(_ref2, _excluded);
42
57
  var name = useId();
43
58
  var radioGroupState = useRadioGroupState({
44
59
  name: name,
@@ -68,22 +83,22 @@ var SegmentedController_ = /*#__PURE__*/React.forwardRef(function SegmentedContr
68
83
  });
69
84
  })));
70
85
  });
71
- export var Segment = /*#__PURE__*/React.forwardRef(function Segment(_ref2, ref) {
72
- var active = _ref2.active,
73
- children = _ref2.children,
74
- _ref2$placement = _ref2.placement,
75
- placement = _ref2$placement === void 0 ? 'top' : _ref2$placement,
76
- tooltip = _ref2.tooltip,
77
- disabled = _ref2.disabled,
78
- value = _ref2.value,
79
- internalIndex = _ref2.internalIndex,
80
- selected = _ref2.selected,
81
- props = _objectWithoutProperties(_ref2, _excluded2);
86
+ export var Segment = /*#__PURE__*/React.forwardRef(function Segment(_ref3, ref) {
87
+ var active = _ref3.active,
88
+ children = _ref3.children,
89
+ _ref3$placement = _ref3.placement,
90
+ placement = _ref3$placement === void 0 ? 'top' : _ref3$placement,
91
+ tooltip = _ref3.tooltip,
92
+ disabled = _ref3.disabled,
93
+ value = _ref3.value,
94
+ internalIndex = _ref3.internalIndex,
95
+ selected = _ref3.selected,
96
+ props = _objectWithoutProperties(_ref3, _excluded2);
82
97
  var adjustedValue = String(value !== null && value !== void 0 ? value : internalIndex);
83
98
  var state = React.useContext(RadioButtonContext);
84
99
  var adjustedState = React.useMemo(function () {
85
- var _ref3;
86
- return (_ref3 = state) !== null && _ref3 !== void 0 ? _ref3 : {};
100
+ var _ref4;
101
+ return (_ref4 = state) !== null && _ref4 !== void 0 ? _ref4 : {};
87
102
  }, [state]);
88
103
  var innerRef = React.useRef(null);
89
104
  var actualRef = ref !== null && ref !== void 0 ? ref : innerRef;
@@ -110,7 +125,11 @@ export var Segment = /*#__PURE__*/React.forwardRef(function Segment(_ref2, ref)
110
125
  }, /*#__PURE__*/React.createElement(StyledSegmentDisabledInteractiveWrapper, null, /*#__PURE__*/React.createElement(StyledSegment, {
111
126
  $focused: isFocusVisible,
112
127
  $disabled: isDisabled,
113
- $selected: active || selected || isSelected
128
+ $selected: determineSelectedState({
129
+ active: active,
130
+ selected: selected,
131
+ isSelected: isSelected
132
+ })
114
133
  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({}, mergeProps(props, inputProps, focusProps), {
115
134
  ref: actualRef
116
135
  }))), /*#__PURE__*/React.createElement(StyledLabel, null, children))));
@@ -149,10 +168,10 @@ export var Segment = /*#__PURE__*/React.forwardRef(function Segment(_ref2, ref)
149
168
  *
150
169
  * @deprecatedSince 10.20.0
151
170
  */
152
- export var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(_ref4, ref) {
153
- var children = _ref4.children,
154
- overlay = _ref4.overlay,
155
- props = _objectWithoutProperties(_ref4, _excluded3);
171
+ export var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(_ref5, ref) {
172
+ var children = _ref5.children,
173
+ overlay = _ref5.overlay,
174
+ props = _objectWithoutProperties(_ref5, _excluded3);
156
175
  return overlay ? /*#__PURE__*/React.createElement(TooltipBase, _extends({}, props, {
157
176
  overlay: overlay,
158
177
  ref: ref,
@@ -209,9 +228,9 @@ var withState = function withState(config) {
209
228
  *
210
229
  * @deprecatedSince 10.20.0
211
230
  */
212
- export var State = withState({})(function (_ref5) {
213
- var children = _ref5.children,
214
- props = _objectWithoutProperties(_ref5, _excluded4);
231
+ export var State = withState({})(function (_ref6) {
232
+ var children = _ref6.children,
233
+ props = _objectWithoutProperties(_ref6, _excluded4);
215
234
  return children(props);
216
235
  });
217
236
  SegmentedController_.displayName = 'SegmentedController';
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedController.js","names":["useFocusRing","useRadio","useRadioGroup","mergeProps","useId","VisuallyHidden","React","useRadioGroupState","Tooltip","TooltipBase","addSubcomponents","StyledContainer","StyledLabel","StyledSegment","StyledSegmentDisabledInteractiveWrapper","isSegment","node","isValidElement","type","Segment","RadioButtonContext","createContext","SegmentedController_","forwardRef","SegmentedController","_ref","ref","ariaLabel","ariaLabelledby","children","_ref$block","block","disabled","onChange","props","_objectWithoutProperties","_excluded","name","radioGroupState","isDisabled","rawValue","num","Number","value","isNaN","_useRadioGroup","orientation","radioGroupProps","createElement","_extends","$block","Provider","Children","toArray","filter","child","map","index","cloneElement","internalIndex","_ref2","active","_ref2$placement","placement","tooltip","selected","_excluded2","adjustedValue","String","state","useContext","adjustedState","useMemo","_ref3","innerRef","useRef","actualRef","_useRadio","inputProps","isSelected","_useFocusRing","focusProps","isFocusVisible","useEffect","setSelectedValue","overlay","$focused","$disabled","$selected","_ref4","_excluded3","trigger","Fragment","withState","config","Component","_React$useState","useState","_React$useState2","_slicedToArray","selectedIndex","setSelected","_objectSpread","State","_ref5","_excluded4","displayName"],"sources":["../../src/SegmentedController/SegmentedController.tsx"],"sourcesContent":["import { useFocusRing } from '@react-aria/focus'\nimport { useRadio, useRadioGroup } from '@react-aria/radio'\nimport { mergeProps, useId } from '@react-aria/utils'\nimport { VisuallyHidden } from '@react-aria/visually-hidden'\nimport React from 'react'\nimport type { RadioGroupState } from 'react-stately'\nimport { useRadioGroupState } from 'react-stately'\nimport { Tooltip as TooltipBase } from '../Tooltip/Tooltip'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n StyledContainer,\n StyledLabel,\n StyledSegment,\n StyledSegmentDisabledInteractiveWrapper,\n} from './SegmentedController.styles'\nimport type {\n SegmentedControllerProps,\n SegmentedControllerSegmentProps,\n SegmentedControllerTooltipProps,\n} from './SegmentedController.types'\n\nfunction isSegment(\n node: unknown\n): node is React.ReactElement<HTMLInputElement> {\n return (\n React.isValidElement(node as React.ReactElement) &&\n (node as React.ReactElement).type === Segment\n )\n}\n\nconst RadioButtonContext = React.createContext<RadioGroupState | null>(null)\n\nconst SegmentedController_ = React.forwardRef<\n HTMLDivElement,\n SegmentedControllerProps\n>(function SegmentedController(\n {\n // TODO make label props required in type?\n // React Aria logs warnings without 1 of 2. Axe does not fail\n ['aria-label']: ariaLabel,\n ['aria-labelledby']: ariaLabelledby,\n children,\n block = false,\n disabled,\n onChange,\n ...props\n },\n ref\n) {\n const name = useId()\n const radioGroupState = useRadioGroupState({\n name,\n isDisabled: disabled,\n onChange: (rawValue) => {\n const num = Number(rawValue)\n const value = !isNaN(num) ? num : rawValue\n onChange?.(value as number)\n },\n })\n const { radioGroupProps } = useRadioGroup(\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n orientation: 'horizontal',\n },\n radioGroupState\n )\n return (\n <StyledContainer ref={ref} $block={block} {...radioGroupProps} {...props}>\n <RadioButtonContext.Provider value={radioGroupState}>\n {React.Children.toArray(children)\n .filter((child) => isSegment(child))\n .map((child, index) =>\n React.cloneElement(child as React.ReactElement, {\n internalIndex: index,\n })\n )}\n </RadioButtonContext.Provider>\n </StyledContainer>\n )\n})\n\nexport const Segment = React.forwardRef<\n HTMLInputElement,\n React.InputHTMLAttributes<HTMLInputElement> & SegmentedControllerSegmentProps\n>(function Segment(\n {\n active,\n children,\n placement = 'top',\n tooltip,\n disabled,\n value,\n internalIndex,\n selected,\n ...props\n },\n ref\n) {\n const adjustedValue = String(value ?? internalIndex)\n const state = React.useContext(RadioButtonContext)\n const adjustedState = React.useMemo(() => {\n return state! ?? {}\n }, [state])\n\n const innerRef = React.useRef<HTMLInputElement>(null)\n const actualRef = ref ?? innerRef\n const { inputProps, isSelected, isDisabled } = useRadio(\n {\n isDisabled: disabled ?? adjustedState.isDisabled,\n value: adjustedValue as string,\n children,\n },\n adjustedState,\n actualRef as any // TODO fix polymorphic ref type\n )\n const { focusProps, isFocusVisible } = useFocusRing()\n\n React.useEffect(() => {\n if (active || selected) {\n adjustedState.setSelectedValue(adjustedValue)\n }\n }, [active, adjustedState, adjustedValue, selected])\n\n return (\n <Tooltip overlay={tooltip} placement={placement}>\n <StyledSegmentDisabledInteractiveWrapper>\n <StyledSegment\n $focused={isFocusVisible}\n $disabled={isDisabled}\n $selected={active || selected || isSelected}\n >\n <VisuallyHidden>\n <input\n {...mergeProps(props, inputProps, focusProps)}\n ref={actualRef}\n />\n </VisuallyHidden>\n <StyledLabel>{children}</StyledLabel>\n </StyledSegment>\n </StyledSegmentDisabledInteractiveWrapper>\n </Tooltip>\n )\n})\n\n/**\n * @deprecated\n *\n * The `SegmentedController.Tooltip` component has been deprecated will be\n * removed in a future version.\n *\n * Tooltips are now built into `SegmentedController.Segment`s, and can be added\n * by configuring the `tooltip` prop.\n *\n * **Before**\n *\n * ```\n * <SegmentedController>\n * <SegmentedController.Tooltip tooltip=\"Item 1 is the first item\">\n * <SegmentedController.Segment>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController.Tooltip>\n * </SegmentedController>\n * ```\n *\n * **After**\n *\n * ```\n * <SegmentedController>\n * <SegmentedController.Segment tooltip=\"Item 1 is the first item\">\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * ```\n *\n * @deprecatedSince 10.20.0\n */\nexport const Tooltip = React.forwardRef<\n HTMLElement,\n SegmentedControllerTooltipProps\n>(function Tooltip({ children, overlay, ...props }, ref) {\n return overlay ? (\n <TooltipBase {...props} overlay={overlay} ref={ref} trigger=\"hover\">\n {children}\n </TooltipBase>\n ) : (\n <>{children}</>\n )\n})\n\nconst withState = (config: any) => (Component: any) => (props: any) => {\n const [selectedIndex, setSelected] = React.useState(0)\n\n return <Component {...{ ...props, selectedIndex, setSelected }} />\n}\n\n/**\n * @deprecated\n *\n * This `SegmentedController.State` utility has been deprecated. Please just\n * use a simple state management hook instead.\n *\n *\n * **Before**\n *\n * ```\n * <SegmentedController.State>\n * {({ selectedIndex, setSelected }) => (\n * <SegmentedController>\n * <SegmentedController.Segment onClick={() => setSelected(0)} active={selectedIndex === 0}>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * )}\n * </SegmentedController.State>\n * ```\n *\n * **After**\n *\n * ```\n * const [selected, setSelected] = React.useState(0)\n *\n * <SegmentedController onChange={setSelected}>\n * <SegmentedController.Segment active={selectedIndex === 0}>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * ```\n *\n * @deprecatedSince 10.20.0\n */\nexport const State = withState({})(({ children, ...props }: any) =>\n children(props)\n)\n\nSegmentedController_.displayName = 'SegmentedController'\n\nSegment.displayName = 'SegmentedController.Segment'\n\nTooltip.displayName = 'SegmentedController.Tooltip'\n\n/**\n\n Segmented controllers allow users to switch between related but mutually\n exclusive content or actions.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-segmentedcontroller--demo)\n\n @see [Design Guidelines](https://design.procore.com/segmented-controller)\n\n */\nexport const SegmentedController = addSubcomponents(\n {\n Segment,\n State,\n Tooltip,\n },\n SegmentedController_\n)\n"],"mappings":"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"}
1
+ {"version":3,"file":"SegmentedController.js","names":["useFocusRing","useRadio","useRadioGroup","mergeProps","useId","VisuallyHidden","React","useRadioGroupState","Tooltip","TooltipBase","addSubcomponents","StyledContainer","StyledLabel","StyledSegment","StyledSegmentDisabledInteractiveWrapper","isSegment","node","isValidElement","type","Segment","determineSelectedState","_ref","active","selected","isSelected","undefined","RadioButtonContext","createContext","SegmentedController_","forwardRef","SegmentedController","_ref2","ref","ariaLabel","ariaLabelledby","children","_ref2$block","block","disabled","onChange","props","_objectWithoutProperties","_excluded","name","radioGroupState","isDisabled","rawValue","num","Number","value","isNaN","_useRadioGroup","orientation","radioGroupProps","createElement","_extends","$block","Provider","Children","toArray","filter","child","map","index","cloneElement","internalIndex","_ref3","_ref3$placement","placement","tooltip","_excluded2","adjustedValue","String","state","useContext","adjustedState","useMemo","_ref4","innerRef","useRef","actualRef","_useRadio","inputProps","_useFocusRing","focusProps","isFocusVisible","useEffect","setSelectedValue","overlay","$focused","$disabled","$selected","_ref5","_excluded3","trigger","Fragment","withState","config","Component","_React$useState","useState","_React$useState2","_slicedToArray","selectedIndex","setSelected","_objectSpread","State","_ref6","_excluded4","displayName"],"sources":["../../src/SegmentedController/SegmentedController.tsx"],"sourcesContent":["import { useFocusRing } from '@react-aria/focus'\nimport { useRadio, useRadioGroup } from '@react-aria/radio'\nimport { mergeProps, useId } from '@react-aria/utils'\nimport { VisuallyHidden } from '@react-aria/visually-hidden'\nimport React from 'react'\nimport type { RadioGroupState } from 'react-stately'\nimport { useRadioGroupState } from 'react-stately'\nimport { Tooltip as TooltipBase } from '../Tooltip/Tooltip'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n StyledContainer,\n StyledLabel,\n StyledSegment,\n StyledSegmentDisabledInteractiveWrapper,\n} from './SegmentedController.styles'\nimport type {\n SegmentedControllerProps,\n SegmentedControllerSegmentProps,\n SegmentedControllerTooltipProps,\n} from './SegmentedController.types'\n\nfunction isSegment(\n node: unknown\n): node is React.ReactElement<HTMLInputElement> {\n return (\n React.isValidElement(node as React.ReactElement) &&\n (node as React.ReactElement).type === Segment\n )\n}\n\nexport function determineSelectedState({\n active,\n selected,\n isSelected,\n}: {\n active?: boolean\n isSelected: boolean\n selected?: boolean\n}): boolean {\n // Selected is a prop, so it should be the source of truth\n if (selected !== undefined) {\n return selected\n }\n // Active is a prop, so it should be the source of truth\n if (active !== undefined) {\n return active\n }\n // If neither props are passed in, use the react-stately state\n return isSelected\n}\n\nconst RadioButtonContext = React.createContext<RadioGroupState | null>(null)\n\nconst SegmentedController_ = React.forwardRef<\n HTMLDivElement,\n SegmentedControllerProps\n>(function SegmentedController(\n {\n // TODO make label props required in type?\n // React Aria logs warnings without 1 of 2. Axe does not fail\n ['aria-label']: ariaLabel,\n ['aria-labelledby']: ariaLabelledby,\n children,\n block = false,\n disabled,\n onChange,\n ...props\n },\n ref\n) {\n const name = useId()\n const radioGroupState = useRadioGroupState({\n name,\n isDisabled: disabled,\n onChange: (rawValue) => {\n const num = Number(rawValue)\n const value = !isNaN(num) ? num : rawValue\n onChange?.(value as number)\n },\n })\n const { radioGroupProps } = useRadioGroup(\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n orientation: 'horizontal',\n },\n radioGroupState\n )\n return (\n <StyledContainer ref={ref} $block={block} {...radioGroupProps} {...props}>\n <RadioButtonContext.Provider value={radioGroupState}>\n {React.Children.toArray(children)\n .filter((child) => isSegment(child))\n .map((child, index) =>\n React.cloneElement(child as React.ReactElement, {\n internalIndex: index,\n })\n )}\n </RadioButtonContext.Provider>\n </StyledContainer>\n )\n})\n\nexport const Segment = React.forwardRef<\n HTMLInputElement,\n React.InputHTMLAttributes<HTMLInputElement> & SegmentedControllerSegmentProps\n>(function Segment(\n {\n active,\n children,\n placement = 'top',\n tooltip,\n disabled,\n value,\n internalIndex,\n selected,\n ...props\n },\n ref\n) {\n const adjustedValue = String(value ?? internalIndex)\n const state = React.useContext(RadioButtonContext)\n const adjustedState = React.useMemo(() => {\n return state! ?? {}\n }, [state])\n\n const innerRef = React.useRef<HTMLInputElement>(null)\n const actualRef = ref ?? innerRef\n const { inputProps, isSelected, isDisabled } = useRadio(\n {\n isDisabled: disabled ?? adjustedState.isDisabled,\n value: adjustedValue as string,\n children,\n },\n adjustedState,\n actualRef as any // TODO fix polymorphic ref type\n )\n const { focusProps, isFocusVisible } = useFocusRing()\n\n React.useEffect(() => {\n if (active || selected) {\n adjustedState.setSelectedValue(adjustedValue)\n }\n }, [active, adjustedState, adjustedValue, selected])\n\n return (\n <Tooltip overlay={tooltip} placement={placement}>\n <StyledSegmentDisabledInteractiveWrapper>\n <StyledSegment\n $focused={isFocusVisible}\n $disabled={isDisabled}\n $selected={determineSelectedState({ active, selected, isSelected })}\n >\n <VisuallyHidden>\n <input\n {...mergeProps(props, inputProps, focusProps)}\n ref={actualRef}\n />\n </VisuallyHidden>\n <StyledLabel>{children}</StyledLabel>\n </StyledSegment>\n </StyledSegmentDisabledInteractiveWrapper>\n </Tooltip>\n )\n})\n\n/**\n * @deprecated\n *\n * The `SegmentedController.Tooltip` component has been deprecated will be\n * removed in a future version.\n *\n * Tooltips are now built into `SegmentedController.Segment`s, and can be added\n * by configuring the `tooltip` prop.\n *\n * **Before**\n *\n * ```\n * <SegmentedController>\n * <SegmentedController.Tooltip tooltip=\"Item 1 is the first item\">\n * <SegmentedController.Segment>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController.Tooltip>\n * </SegmentedController>\n * ```\n *\n * **After**\n *\n * ```\n * <SegmentedController>\n * <SegmentedController.Segment tooltip=\"Item 1 is the first item\">\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * ```\n *\n * @deprecatedSince 10.20.0\n */\nexport const Tooltip = React.forwardRef<\n HTMLElement,\n SegmentedControllerTooltipProps\n>(function Tooltip({ children, overlay, ...props }, ref) {\n return overlay ? (\n <TooltipBase {...props} overlay={overlay} ref={ref} trigger=\"hover\">\n {children}\n </TooltipBase>\n ) : (\n <>{children}</>\n )\n})\n\nconst withState = (config: any) => (Component: any) => (props: any) => {\n const [selectedIndex, setSelected] = React.useState(0)\n\n return <Component {...{ ...props, selectedIndex, setSelected }} />\n}\n\n/**\n * @deprecated\n *\n * This `SegmentedController.State` utility has been deprecated. Please just\n * use a simple state management hook instead.\n *\n *\n * **Before**\n *\n * ```\n * <SegmentedController.State>\n * {({ selectedIndex, setSelected }) => (\n * <SegmentedController>\n * <SegmentedController.Segment onClick={() => setSelected(0)} active={selectedIndex === 0}>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * )}\n * </SegmentedController.State>\n * ```\n *\n * **After**\n *\n * ```\n * const [selected, setSelected] = React.useState(0)\n *\n * <SegmentedController onChange={setSelected}>\n * <SegmentedController.Segment active={selectedIndex === 0}>\n * Item 1\n * </SegmentedController.Segment>\n * </SegmentedController>\n * ```\n *\n * @deprecatedSince 10.20.0\n */\nexport const State = withState({})(({ children, ...props }: any) =>\n children(props)\n)\n\nSegmentedController_.displayName = 'SegmentedController'\n\nSegment.displayName = 'SegmentedController.Segment'\n\nTooltip.displayName = 'SegmentedController.Tooltip'\n\n/**\n\n Segmented controllers allow users to switch between related but mutually\n exclusive content or actions.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-segmentedcontroller--demo)\n\n @see [Design Guidelines](https://design.procore.com/segmented-controller)\n\n */\nexport const SegmentedController = addSubcomponents(\n {\n Segment,\n State,\n Tooltip,\n },\n SegmentedController_\n)\n"],"mappings":"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"}
@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
5
5
  import { spacing } from '../_styles/spacing';
6
6
  export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
7
7
  displayName: "StyledContainer",
8
- componentId: "core-12_23_0__sc-ocai3-0"
8
+ componentId: "core-12_25_0__sc-ocai3-0"
9
9
  })(["align-items:center;display:", ";height:36px;justify-content:center;width:", ";"], function (_ref) {
10
10
  var $block = _ref.$block;
11
11
  return $block ? 'flex' : 'inline-flex';
@@ -15,7 +15,7 @@ export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
15
15
  });
16
16
  export var StyledSegment = /*#__PURE__*/styled.label.withConfig({
17
17
  displayName: "StyledSegment",
18
- componentId: "core-12_23_0__sc-ocai3-1"
18
+ componentId: "core-12_25_0__sc-ocai3-1"
19
19
  })(["align-items:center;border-radius:0;border:1px solid ", ";cursor:pointer;display:flex;flex:1 1 auto;height:100%;justify-content:center;min-width:0;outline:0;padding:0 ", "px;position:relative;background-color:", ";color:", ";&:hover{background-color:", ";border-color:", ";color:", ";}", " ", ";"], colors.gray85, spacing.md, colors.white, colors.gray45, colors.gray94, colors.gray85, colors.gray45, function (_ref3) {
20
20
  var _ref3$$focused = _ref3.$focused,
21
21
  $focused = _ref3$$focused === void 0 ? false : _ref3$$focused;
@@ -37,10 +37,10 @@ export var StyledSegment = /*#__PURE__*/styled.label.withConfig({
37
37
  });
38
38
  export var StyledSegmentDisabledInteractiveWrapper = /*#__PURE__*/styled.div.withConfig({
39
39
  displayName: "StyledSegmentDisabledInteractiveWrapper",
40
- componentId: "core-12_23_0__sc-ocai3-2"
40
+ componentId: "core-12_25_0__sc-ocai3-2"
41
41
  })(["display:flex;flex:1 1 auto;min-width:0;height:100%;margin-right:-1px;&:first-child ", "{border-bottom-left-radius:", "px;border-top-left-radius:", "px;}&:last-child ", "{border-bottom-right-radius:", "px;border-top-right-radius:", "px;}"], StyledSegment, borderRadius.md, borderRadius.md, StyledSegment, borderRadius.md, borderRadius.md);
42
42
  export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
43
43
  displayName: "StyledLabel",
44
- componentId: "core-12_23_0__sc-ocai3-3"
44
+ componentId: "core-12_25_0__sc-ocai3-3"
45
45
  })(["", ";display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], getTypographyIntent('body'));
46
46
  //# sourceMappingURL=SegmentedController.styles.js.map
@@ -17,34 +17,34 @@ export var tableSelectClassName = 'select--table';
17
17
  var styledSelectButtonDefaultWidth = 248;
18
18
  export var StyledSelectMenu = /*#__PURE__*/styled(Card).withConfig({
19
19
  displayName: "StyledSelectMenu",
20
- componentId: "core-12_23_0__sc-mr8gwe-0"
20
+ componentId: "core-12_25_0__sc-mr8gwe-0"
21
21
  })(["display:flex;max-height:40vh;max-width:", "px;min-width:inherit;"], styledSelectButtonDefaultWidth);
22
22
  export var StyledSelectButtonLabel = /*#__PURE__*/styled.div.withConfig({
23
23
  displayName: "StyledSelectButtonLabel",
24
- componentId: "core-12_23_0__sc-mr8gwe-1"
24
+ componentId: "core-12_25_0__sc-mr8gwe-1"
25
25
  })(["", " flex-grow:1;margin-right:", "px;outline:none;pointer-events:", ";user-select:none;"], getEllipsis(), spacing.sm, function (_ref) {
26
26
  var $hoverable = _ref.$hoverable;
27
27
  return $hoverable ? 'initial' : 'none';
28
28
  });
29
29
  export var StyledSelectSpinner = /*#__PURE__*/styled.div.withConfig({
30
30
  displayName: "StyledSelectSpinner",
31
- componentId: "core-12_23_0__sc-mr8gwe-2"
31
+ componentId: "core-12_25_0__sc-mr8gwe-2"
32
32
  })(["align-items:center;display:flex;flex:0 0 auto;justify-content:center;line-height:0;"]);
33
33
  export var StyledSelectArrowContainer = /*#__PURE__*/styled.div.withConfig({
34
34
  displayName: "StyledSelectArrowContainer",
35
- componentId: "core-12_23_0__sc-mr8gwe-3"
35
+ componentId: "core-12_25_0__sc-mr8gwe-3"
36
36
  })(["align-items:center;display:inline-flex;height:16px;justify-content:flex-end;margin-left:", "px;width:8px;"], spacing.sm);
37
37
  export var StyledSelectArrow = /*#__PURE__*/styled.div.withConfig({
38
38
  displayName: "StyledSelectArrow",
39
- componentId: "core-12_23_0__sc-mr8gwe-4"
39
+ componentId: "core-12_25_0__sc-mr8gwe-4"
40
40
  })(["position:relative;", ""], arrowDown(4, 'gray45'));
41
41
  export var StyledSelectClearIcon = /*#__PURE__*/styled(Button).withConfig({
42
42
  displayName: "StyledSelectClearIcon",
43
- componentId: "core-12_23_0__sc-mr8gwe-5"
43
+ componentId: "core-12_25_0__sc-mr8gwe-5"
44
44
  })(["", "{pointer-events:none;}"], StyledContent);
45
45
  export var StyledSelectButton = /*#__PURE__*/styled.div.withConfig({
46
46
  displayName: "StyledSelectButton",
47
- componentId: "core-12_23_0__sc-mr8gwe-6"
47
+ componentId: "core-12_25_0__sc-mr8gwe-6"
48
48
  })(["", " align-items:center;background-color:", ";border-color:", ";border-radius:", "px;border-style:solid;border-width:1px;color:", ";cursor:pointer;display:inline-flex;height:36px;min-height:36px;outline:none;padding:0 ", "px;position:relative;white-space:nowrap;width:", ";&::placeholder{border-color:", ";}&:hover,&:active,&[data-qa=", "]{background-color:", ";border-color:", ";color:", ";}&.focus,&:focus,&[data-qa=", "]{", " ", "{stroke:", ";}}", " ", " ", " ", " ", " &.", "{", " ", " ", "}"], getTypographyIntent('body'), colors.white, colors.gray70, borderRadius.md, colors.gray15, spacing.md, function (_ref2) {
49
49
  var $block = _ref2.$block;
50
50
  return $block ? '100%' : "".concat(styledSelectButtonDefaultWidth, "px");
@@ -5,15 +5,15 @@ import { colors } from '../_styles/colors';
5
5
  import { spacing } from '../_styles/spacing';
6
6
  export var StyledH1 = /*#__PURE__*/styled.h1.withConfig({
7
7
  displayName: "StyledH1",
8
- componentId: "core-12_23_0__sc-172j5qh-0"
8
+ componentId: "core-12_25_0__sc-172j5qh-0"
9
9
  })(["color:", ";", " margin:0;"], colors.gray15, getTypographyIntent('h1'));
10
10
  export var StyledH2 = /*#__PURE__*/styled.h2.withConfig({
11
11
  displayName: "StyledH2",
12
- componentId: "core-12_23_0__sc-172j5qh-1"
12
+ componentId: "core-12_25_0__sc-172j5qh-1"
13
13
  })(["color:", ";", " margin:0;"], colors.gray15, getTypographyIntent('h2'));
14
14
  export var StyledH3 = /*#__PURE__*/styled.h3.withConfig({
15
15
  displayName: "StyledH3",
16
- componentId: "core-12_23_0__sc-172j5qh-2"
16
+ componentId: "core-12_25_0__sc-172j5qh-2"
17
17
  })(["color:", ";", " margin:0;"], colors.gray15, getTypographyIntent('h3'));
18
18
  var topMarginRules = function topMarginRules() {
19
19
  return css(["& + &,p + &,ol + &,ul + &{margin-top:", "px;}"], spacing.lg);
@@ -28,11 +28,11 @@ export function getSmallIconBodyTextRules() {
28
28
  }
29
29
  export var StyledP = /*#__PURE__*/styled.p.withConfig({
30
30
  displayName: "StyledP",
31
- componentId: "core-12_23_0__sc-172j5qh-3"
31
+ componentId: "core-12_25_0__sc-172j5qh-3"
32
32
  })(["color:", ";", " ", " ", ""], colors.gray15, getTypographyIntent('body'), topMarginRules, semiboldRules);
33
33
  export var StyledUL = /*#__PURE__*/styled.ul.withConfig({
34
34
  displayName: "StyledUL",
35
- componentId: "core-12_23_0__sc-172j5qh-4"
35
+ componentId: "core-12_25_0__sc-172j5qh-4"
36
36
  })(["color:", ";margin:0;padding:0;", " ", " padding-left:", "px;list-style-type:", ";"], colors.gray15, getTypographyIntent('body'), topMarginRules, spacing.lg, function (props) {
37
37
  return props.$listStyleType || 'disc';
38
38
  });
@@ -40,7 +40,7 @@ export var StyledOL = /*#__PURE__*/styled(StyledUL).attrs({
40
40
  as: 'ol'
41
41
  }).withConfig({
42
42
  displayName: "StyledOL",
43
- componentId: "core-12_23_0__sc-172j5qh-5"
43
+ componentId: "core-12_25_0__sc-172j5qh-5"
44
44
  })(["list-style-type:", ";"], function (props) {
45
45
  return props.$listStyleType || 'decimal';
46
46
  });
@@ -51,7 +51,7 @@ export var StyledLabel = /*#__PURE__*/styled(StyledTypography).attrs(function (p
51
51
  };
52
52
  }).withConfig({
53
53
  displayName: "StyledLabel",
54
- componentId: "core-12_23_0__sc-172j5qh-6"
54
+ componentId: "core-12_25_0__sc-172j5qh-6"
55
55
  })(["", " ", " > ", "{margin-left:", "px;vertical-align:top;}"], function (_ref) {
56
56
  var _ref$$block = _ref.$block,
57
57
  $block = _ref$$block === void 0 ? false : _ref$$block;
@@ -69,7 +69,7 @@ export function getUnstyledButton() {
69
69
  */
70
70
  export var StyledUnstyledButton = /*#__PURE__*/styled.button.withConfig({
71
71
  displayName: "StyledUnstyledButton",
72
- componentId: "core-12_23_0__sc-172j5qh-7"
72
+ componentId: "core-12_25_0__sc-172j5qh-7"
73
73
  })(["", ""], getUnstyledButton);
74
74
 
75
75
  /**
@@ -77,6 +77,6 @@ export var StyledUnstyledButton = /*#__PURE__*/styled.button.withConfig({
77
77
  */
78
78
  export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
79
79
  displayName: "StyledAnchor",
80
- componentId: "core-12_23_0__sc-172j5qh-8"
80
+ componentId: "core-12_25_0__sc-172j5qh-8"
81
81
  })([""]);
82
82
  //# sourceMappingURL=Semantic.styles.js.map
@@ -21,13 +21,13 @@ var getTrackBackgroundDisabled = function getTrackBackgroundDisabled(percent) {
21
21
  var getThumbDisabledStyles = /*#__PURE__*/css(["cursor:not-allowed;border:2px solid ", ";"], colors.blue85);
22
22
  export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
23
23
  displayName: "StyledContainer",
24
- componentId: "core-12_23_0__sc-12icguw-0"
24
+ componentId: "core-12_25_0__sc-12icguw-0"
25
25
  })(["position:relative;", ";"], function (props) {
26
26
  return props.$showLabel && 'padding-bottom: 10px';
27
27
  });
28
28
  export var StyledSlider = /*#__PURE__*/styled.input.withConfig({
29
29
  displayName: "StyledSlider",
30
- componentId: "core-12_23_0__sc-12icguw-1"
30
+ componentId: "core-12_25_0__sc-12icguw-1"
31
31
  })(["-webkit-appearance:none;margin:0;padding-top:5px;padding-bottom:5px;width:100%;border:1px solid transparent;background-color:transparent;font-size:12px;&:focus{outline:none;", ";padding-top:5px;padding-bottom:5px;border-radius:2px;}&::-webkit-slider-runnable-track{", " ", "}&:disabled::-webkit-slider-runnable-track{cursor:not-allowed;", "}&::-webkit-slider-thumb{", " -webkit-appearance:none;margin-top:-5px;}&:disabled::-webkit-slider-thumb{", "}&::-moz-range-track{", " ", "}&:disabled::-moz-range-track{cursor:not-allowed;", "}&::-moz-range-thumb{", " height:12px;width:12px;}&:disabled::-moz-range-thumb{", "}&::-ms-track{", " height:", "px;color:transparent;", "}&:disabled::-ms-track{cursor:not-allowed;", "}&::-ms-fill-lower{background:", ";border:0px solid ", ";border-radius:2px;box-shadow:1px 1px 1px ", ";}&::-ms-fill-upper{background:", ";border:0px solid ", ";border-radius:2px;box-shadow:1px 1px 1px ", ";}&::-ms-thumb{", "}&:disabled::-ms-thumb{", "}&:focus::-ms-fill-lower{background:", ";}&:focus::-ms-fill-upper{background:", ";}"], function (props) {
32
32
  return props.$isDragging ? "border: 1px solid transparent" : "border: 1px solid ".concat(colors.blue40);
33
33
  }, getTrackStyles, function (props) {
@@ -45,14 +45,14 @@ export var StyledSlider = /*#__PURE__*/styled.input.withConfig({
45
45
  }, colors.blue50, colors.black, colors.black, colors.gray70, colors.black, colors.black, getThumbStyles, getThumbDisabledStyles, colors.blue50, colors.gray70);
46
46
  export var StyledIncrementOverlay = /*#__PURE__*/styled.div.withConfig({
47
47
  displayName: "StyledIncrementOverlay",
48
- componentId: "core-12_23_0__sc-12icguw-2"
48
+ componentId: "core-12_25_0__sc-12icguw-2"
49
49
  })(["position:relative;width:0;&::before{content:'';height:", "px;width:2px;background-color:white;display:block;}z-index:2;"], TRACK_HEIGHT);
50
50
  export var StyledIncrementContainer = /*#__PURE__*/styled.div.withConfig({
51
51
  displayName: "StyledIncrementContainer",
52
- componentId: "core-12_23_0__sc-12icguw-3"
52
+ componentId: "core-12_25_0__sc-12icguw-3"
53
53
  })(["position:absolute;display:flex;justify-content:space-between;top:6px;", " left:5px;right:5px;> :first-child{visibility:hidden;}> :last-child{visibility:hidden;}"], applyStylesOnlyToFF("\n top: 12px;\n "));
54
54
  export var StyledLabel = /*#__PURE__*/styled(Typography).withConfig({
55
55
  displayName: "StyledLabel",
56
- componentId: "core-12_23_0__sc-12icguw-4"
56
+ componentId: "core-12_25_0__sc-12icguw-4"
57
57
  })(["visibility:visible;position:absolute;left:50%;transform:translateX(-50%);margin-top:8px;"]);
58
58
  //# sourceMappingURL=Slider.styles.js.map
@@ -1,8 +1,10 @@
1
- var _excluded = ["children", "className", "color", "label", "loading", "size", "variant", "centered"];
1
+ var _excluded = ["className", "color", "loading", "mountTime", "size", "variant", "label"],
2
+ _excluded2 = ["children", "className", "color", "label", "loading", "size", "variant", "centered"];
2
3
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
4
  function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
4
5
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
5
6
  import React from 'react';
7
+ import { useI18nContext } from '../_hooks/I18n';
6
8
  import { StyledCircle, StyledSpinnerContainer, StyledSpinnerContainerWithLabel, StyledSpinnerOverlay, StyledSpinnerOverlayContainer, StyledSpinnerOverlayLabel, StyledSpinnerSVG } from './Spinner.styles';
7
9
  var radiusMap = {
8
10
  xs: 18.5,
@@ -22,19 +24,26 @@ var Circle = /*#__PURE__*/React.forwardRef(function Circle(_ref, ref) {
22
24
  _ref$size = _ref.size,
23
25
  size = _ref$size === void 0 ? defaultSpinnerSize : _ref$size,
24
26
  _ref$variant = _ref.variant,
25
- variant = _ref$variant === void 0 ? 'default' : _ref$variant;
27
+ variant = _ref$variant === void 0 ? 'default' : _ref$variant,
28
+ label = _ref.label,
29
+ props = _objectWithoutProperties(_ref, _excluded);
30
+ var i18n = useI18nContext();
26
31
  return /*#__PURE__*/React.createElement(StyledSpinnerContainer, {
27
32
  className: className,
28
33
  $color: color,
29
34
  $size: size,
30
35
  $variant: variant,
31
36
  ref: ref
32
- }, /*#__PURE__*/React.createElement(StyledSpinnerSVG, {
37
+ }, /*#__PURE__*/React.createElement(StyledSpinnerSVG, _extends({
33
38
  viewBox: "0 0 48 48",
34
39
  xmlns: "http://www.w3.org/2000/svg",
40
+ role: "img",
41
+ "aria-label": label || i18n.t('core.spinner.loading', {
42
+ defaultValue: 'Loading'
43
+ }),
35
44
  $animate: loading,
36
45
  $mountTime: mountTime
37
- }, /*#__PURE__*/React.createElement(StyledCircle, {
46
+ }, props), /*#__PURE__*/React.createElement(StyledCircle, {
38
47
  cx: "24",
39
48
  cy: "24",
40
49
  r: radiusMap[size],
@@ -69,7 +78,7 @@ export var Spinner = /*#__PURE__*/React.forwardRef(function Spinner(props, ref)
69
78
  variant = _props$variant === void 0 ? 'default' : _props$variant,
70
79
  _props$centered = props.centered,
71
80
  centered = _props$centered === void 0 ? false : _props$centered,
72
- rest = _objectWithoutProperties(props, _excluded);
81
+ rest = _objectWithoutProperties(props, _excluded2);
73
82
  var mountTime = React.useRef(Date.now());
74
83
  if (!children) {
75
84
  // We are preserving the current behavior of the Spinner component,
@@ -1 +1 @@
1
- {"version":3,"file":"Spinner.js","names":["React","StyledCircle","StyledSpinnerContainer","StyledSpinnerContainerWithLabel","StyledSpinnerOverlay","StyledSpinnerOverlayContainer","StyledSpinnerOverlayLabel","StyledSpinnerSVG","radiusMap","xs","sm","md","lg","smallSizes","defaultSpinnerSize","Circle","forwardRef","_ref","ref","_ref$className","className","color","_ref$loading","loading","mountTime","_ref$size","size","_ref$variant","variant","createElement","$color","$size","$variant","viewBox","xmlns","$animate","$mountTime","cx","cy","r","Spinner","props","children","_props$className","label","_props$loading","_props$size","_props$variant","_props$centered","centered","rest","_objectWithoutProperties","_excluded","useRef","Date","now","_extends","current","$loading","$centered","includes","displayName"],"sources":["../../src/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react'\nimport {\n StyledCircle,\n StyledSpinnerContainer,\n StyledSpinnerContainerWithLabel,\n StyledSpinnerOverlay,\n StyledSpinnerOverlayContainer,\n StyledSpinnerOverlayLabel,\n StyledSpinnerSVG,\n} from './Spinner.styles'\nimport type { SpinnerProps, SpinnerSize } from './Spinner.types'\n\nconst radiusMap: Record<SpinnerSize, number> = {\n xs: 18.5,\n sm: 18,\n md: 20,\n lg: 20.5,\n}\n\nconst smallSizes: SpinnerSize[] = ['xs', 'sm']\n\nexport const defaultSpinnerSize: SpinnerSize = 'lg'\n\nconst Circle = React.forwardRef<\n HTMLDivElement,\n SpinnerProps & {\n mountTime: number\n }\n>(function Circle(\n {\n className = '',\n color,\n loading = false,\n mountTime,\n size = defaultSpinnerSize,\n variant = 'default',\n },\n ref\n) {\n return (\n <StyledSpinnerContainer\n className={className}\n $color={color}\n $size={size}\n $variant={variant}\n ref={ref}\n >\n <StyledSpinnerSVG\n viewBox=\"0 0 48 48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n $animate={loading}\n $mountTime={mountTime}\n >\n <StyledCircle\n cx=\"24\"\n cy=\"24\"\n r={radiusMap[size]}\n $animate={loading}\n $mountTime={mountTime}\n />\n </StyledSpinnerSVG>\n </StyledSpinnerContainer>\n )\n})\n\n/**\n\n Spinners indicate a loading state on either a full page or smaller component,\n like a menu, select or button.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-spinner--demo)\n\n @see [Design Guidelines](https://design.procore.com/spinner)\n\n */\nexport const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(props, ref) {\n const {\n children,\n className = '',\n color,\n label,\n loading = false,\n size = defaultSpinnerSize,\n variant = 'default',\n centered = false,\n ...rest\n } = props\n const mountTime = React.useRef(Date.now())\n\n if (!children) {\n // We are preserving the current behavior of the Spinner component,\n // where the loading prop does not apply when no children are passed.\n return (\n <Circle {...props} loading mountTime={mountTime.current} ref={ref} />\n )\n }\n\n return (\n <StyledSpinnerOverlayContainer\n $loading={loading}\n className={className}\n $centered={centered}\n {...rest}\n >\n <StyledSpinnerOverlay />\n <StyledSpinnerContainerWithLabel>\n <Circle\n {...props}\n className=\"\"\n mountTime={mountTime.current}\n ref={ref}\n />\n {!smallSizes.includes(size) && (\n <StyledSpinnerOverlayLabel>{label}</StyledSpinnerOverlayLabel>\n )}\n </StyledSpinnerContainerWithLabel>\n {children}\n </StyledSpinnerOverlayContainer>\n )\n }\n)\n\nSpinner.displayName = 'Spinner'\n"],"mappings":"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"}
1
+ {"version":3,"file":"Spinner.js","names":["React","useI18nContext","StyledCircle","StyledSpinnerContainer","StyledSpinnerContainerWithLabel","StyledSpinnerOverlay","StyledSpinnerOverlayContainer","StyledSpinnerOverlayLabel","StyledSpinnerSVG","radiusMap","xs","sm","md","lg","smallSizes","defaultSpinnerSize","Circle","forwardRef","_ref","ref","_ref$className","className","color","_ref$loading","loading","mountTime","_ref$size","size","_ref$variant","variant","label","props","_objectWithoutProperties","_excluded","i18n","createElement","$color","$size","$variant","_extends","viewBox","xmlns","role","t","defaultValue","$animate","$mountTime","cx","cy","r","Spinner","children","_props$className","_props$loading","_props$size","_props$variant","_props$centered","centered","rest","_excluded2","useRef","Date","now","current","$loading","$centered","includes","displayName"],"sources":["../../src/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react'\nimport { useI18nContext } from '../_hooks/I18n'\nimport {\n StyledCircle,\n StyledSpinnerContainer,\n StyledSpinnerContainerWithLabel,\n StyledSpinnerOverlay,\n StyledSpinnerOverlayContainer,\n StyledSpinnerOverlayLabel,\n StyledSpinnerSVG,\n} from './Spinner.styles'\nimport type { SpinnerProps, SpinnerSize } from './Spinner.types'\n\nconst radiusMap: Record<SpinnerSize, number> = {\n xs: 18.5,\n sm: 18,\n md: 20,\n lg: 20.5,\n}\n\nconst smallSizes: SpinnerSize[] = ['xs', 'sm']\n\nexport const defaultSpinnerSize: SpinnerSize = 'lg'\n\nconst Circle = React.forwardRef<\n HTMLDivElement,\n SpinnerProps & {\n mountTime: number\n }\n>(function Circle(\n {\n className = '',\n color,\n loading = false,\n mountTime,\n size = defaultSpinnerSize,\n variant = 'default',\n label,\n ...props\n },\n ref\n) {\n const i18n = useI18nContext()\n return (\n <StyledSpinnerContainer\n className={className}\n $color={color}\n $size={size}\n $variant={variant}\n ref={ref}\n >\n <StyledSpinnerSVG\n viewBox=\"0 0 48 48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-label={\n label ||\n i18n.t('core.spinner.loading', {\n defaultValue: 'Loading',\n })\n }\n $animate={loading}\n $mountTime={mountTime}\n {...props}\n >\n <StyledCircle\n cx=\"24\"\n cy=\"24\"\n r={radiusMap[size]}\n $animate={loading}\n $mountTime={mountTime}\n />\n </StyledSpinnerSVG>\n </StyledSpinnerContainer>\n )\n})\n\n/**\n\n Spinners indicate a loading state on either a full page or smaller component,\n like a menu, select or button.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-spinner--demo)\n\n @see [Design Guidelines](https://design.procore.com/spinner)\n\n */\nexport const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(props, ref) {\n const {\n children,\n className = '',\n color,\n label,\n loading = false,\n size = defaultSpinnerSize,\n variant = 'default',\n centered = false,\n ...rest\n } = props\n const mountTime = React.useRef(Date.now())\n\n if (!children) {\n // We are preserving the current behavior of the Spinner component,\n // where the loading prop does not apply when no children are passed.\n return (\n <Circle {...props} loading mountTime={mountTime.current} ref={ref} />\n )\n }\n\n return (\n <StyledSpinnerOverlayContainer\n $loading={loading}\n className={className}\n $centered={centered}\n {...rest}\n >\n <StyledSpinnerOverlay />\n <StyledSpinnerContainerWithLabel>\n <Circle\n {...props}\n className=\"\"\n mountTime={mountTime.current}\n ref={ref}\n />\n {!smallSizes.includes(size) && (\n <StyledSpinnerOverlayLabel>{label}</StyledSpinnerOverlayLabel>\n )}\n </StyledSpinnerContainerWithLabel>\n {children}\n </StyledSpinnerOverlayContainer>\n )\n }\n)\n\nSpinner.displayName = 'Spinner'\n"],"mappings":"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"}
@@ -10,7 +10,7 @@ var zOverlay = 2;
10
10
  var dash = /*#__PURE__*/keyframes(["0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}"]);
11
11
  export var StyledCircle = /*#__PURE__*/styled.circle.withConfig({
12
12
  displayName: "StyledCircle",
13
- componentId: "core-12_23_0__sc-1igww3-0"
13
+ componentId: "core-12_25_0__sc-1igww3-0"
14
14
  })(["", " stroke-linecap:round;"], function (p) {
15
15
  if (p.$animate) {
16
16
  var animationDelay = -(p.$mountTime % duration);
@@ -51,16 +51,16 @@ function getStrokeColor(_ref2) {
51
51
  }
52
52
  export var StyledSpinnerContainer = /*#__PURE__*/styled.div.withConfig({
53
53
  displayName: "StyledSpinnerContainer",
54
- componentId: "core-12_23_0__sc-1igww3-1"
54
+ componentId: "core-12_25_0__sc-1igww3-1"
55
55
  })(["border-radius:100%;box-sizing:border-box;display:block;flex-shrink:0;position:relative;", " ", "{", "}"], getHeightWidthStroke, StyledCircle, getStrokeColor);
56
56
  export var StyledSpinnerOverlayLabel = /*#__PURE__*/styled.span.withConfig({
57
57
  displayName: "StyledSpinnerOverlayLabel",
58
- componentId: "core-12_23_0__sc-1igww3-2"
58
+ componentId: "core-12_25_0__sc-1igww3-2"
59
59
  })(["", " color:", ";display:block;min-height:20px;padding-top:", "px;text-align:center;transition:opacity ", ";"], getTypographyIntent('body'), colors.gray15, spacing.md, transition);
60
60
  var rotate = /*#__PURE__*/keyframes(["to{transform:rotate(360deg);}"]);
61
61
  export var StyledSpinnerSVG = /*#__PURE__*/styled.svg.withConfig({
62
62
  displayName: "StyledSpinnerSVG",
63
- componentId: "core-12_23_0__sc-1igww3-3"
63
+ componentId: "core-12_25_0__sc-1igww3-3"
64
64
  })(["", " fill:none;height:100%;left:0;margin:auto;position:absolute;right:0;top:0;width:100%;z-index:2;"], function (p) {
65
65
  if (p.$animate) {
66
66
  var animationDelay = -(p.$mountTime % (duration - durationOffset));
@@ -70,15 +70,15 @@ export var StyledSpinnerSVG = /*#__PURE__*/styled.svg.withConfig({
70
70
  var startsWithNoInteraction = /*#__PURE__*/css(["opacity:0;pointer-events:none;transition:opacity ", ";"], transition);
71
71
  export var StyledSpinnerOverlay = /*#__PURE__*/styled.div.withConfig({
72
72
  displayName: "StyledSpinnerOverlay",
73
- componentId: "core-12_23_0__sc-1igww3-4"
73
+ componentId: "core-12_25_0__sc-1igww3-4"
74
74
  })(["", ";background-color:", ";bottom:0;left:0;position:absolute;right:0;top:0;z-index:", ";"], startsWithNoInteraction, colors.white, zOverlay);
75
75
  export var StyledSpinnerContainerWithLabel = /*#__PURE__*/styled.div.withConfig({
76
76
  displayName: "StyledSpinnerContainerWithLabel",
77
- componentId: "core-12_23_0__sc-1igww3-5"
77
+ componentId: "core-12_25_0__sc-1igww3-5"
78
78
  })(["", ";align-items:center;display:flex;flex-direction:column;height:100%;max-height:400px;justify-content:center;position:absolute;top:0;width:100%;z-index:", ";"], startsWithNoInteraction, zContainer);
79
79
  export var StyledSpinnerOverlayContainer = /*#__PURE__*/styled.div.withConfig({
80
80
  displayName: "StyledSpinnerOverlayContainer",
81
- componentId: "core-12_23_0__sc-1igww3-6"
81
+ componentId: "core-12_25_0__sc-1igww3-6"
82
82
  })(["min-height:150px;position:relative;", " ", ""], function (_ref3) {
83
83
  var $loading = _ref3.$loading;
84
84
  if ($loading) {
@@ -6,18 +6,18 @@ import { spacing } from '../_styles/spacing';
6
6
  var MIN_CARD_HEIGHT = 364;
7
7
  export var StyledSplitViewCardContainer = /*#__PURE__*/styled.div.withConfig({
8
8
  displayName: "StyledSplitViewCardContainer",
9
- componentId: "core-12_23_0__sc-9hrkda-0"
9
+ componentId: "core-12_25_0__sc-9hrkda-0"
10
10
  })(["display:grid;grid-template-columns:1fr auto;border-radius:", "px;box-shadow:0 0 4px 0 rgba(0,0,0,0.25);min-height:", "px;position:relative;width:100%;@media (max-width:", "){box-shadow:none;display:flex;flex-direction:column;width:100%;}"], spacing.sm, MIN_CARD_HEIGHT, breakpointMinWidthValues.tabletMd);
11
11
  export var StyledSplitViewCardMain = /*#__PURE__*/styled.div.withConfig({
12
12
  displayName: "StyledSplitViewCardMain",
13
- componentId: "core-12_23_0__sc-9hrkda-1"
13
+ componentId: "core-12_25_0__sc-9hrkda-1"
14
14
  })(["background-color:", ";border-top-left-radius:", "px;border-bottom-left-radius:", "px;position:relative;width:60%;transition:all ease 500ms;@media (max-width:", "){box-shadow:0 0 4px 0 rgba(0,0,0,0.25);border-radius:", "px;margin-bottom:", "px;width:100%;}", ""], colors.white, spacing.sm, spacing.sm, breakpointMinWidthValues.tabletMd, spacing.sm, spacing.sm, function (_ref) {
15
15
  var $open = _ref.$open;
16
16
  return !$open && css(["border-radius:", "px;width:100%;"], spacing.sm);
17
17
  });
18
18
  export var StyledSplitViewCardAside = /*#__PURE__*/styled.div.withConfig({
19
19
  displayName: "StyledSplitViewCardAside",
20
- componentId: "core-12_23_0__sc-9hrkda-2"
20
+ componentId: "core-12_25_0__sc-9hrkda-2"
21
21
  })(["background-color:", ";border-left:1px solid ", ";border-top-right-radius:", "px;border-bottom-right-radius:", "px;display:flex;flex-direction:column;height:100%;width:40%;min-height:", "px;min-width:400px;transition:all ease 500ms;z-index:2;position:absolute;top:0;right:0;@media screen and (max-width:", "px){min-width:unset;}@media (max-width:", "){box-shadow:0 0 4px 0 rgba(0,0,0,0.25);border:none;border-radius:", "px;position:relative;width:100%;}", " ", ""], colors.white, colors.gray85, spacing.sm, spacing.sm, MIN_CARD_HEIGHT, breakpointRawMinWidthValues.tabletSm, breakpointMinWidthValues.tabletMd, spacing.sm, function (_ref2) {
22
22
  var $open = _ref2.$open;
23
23
  return !$open && css(["border:none;border-radius:", "px;overflow:hidden !important;@media (min-width:", "){min-width:0;width:0 !important;}@media (max-width:", "){display:none;}"], spacing.sm, breakpointMinWidthValues.tabletMd, breakpointMinWidthValues.tabletMd);
@@ -27,23 +27,23 @@ export var StyledSplitViewCardAside = /*#__PURE__*/styled.div.withConfig({
27
27
  });
28
28
  export var StyledSplitViewCardHeading = /*#__PURE__*/styled(H2).withConfig({
29
29
  displayName: "StyledSplitViewCardHeading",
30
- componentId: "core-12_23_0__sc-9hrkda-3"
30
+ componentId: "core-12_25_0__sc-9hrkda-3"
31
31
  })(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;"]);
32
32
  export var StyledSplitViewCardTitle = /*#__PURE__*/styled.div.withConfig({
33
33
  displayName: "StyledSplitViewCardTitle",
34
- componentId: "core-12_23_0__sc-9hrkda-4"
34
+ componentId: "core-12_25_0__sc-9hrkda-4"
35
35
  })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:", "px;min-height:36px;"], spacing.sm);
36
36
  export var StyledSplitViewCardHeader = /*#__PURE__*/styled.div.withConfig({
37
37
  displayName: "StyledSplitViewCardHeader",
38
- componentId: "core-12_23_0__sc-9hrkda-5"
38
+ componentId: "core-12_25_0__sc-9hrkda-5"
39
39
  })(["border-bottom:1px solid ", ";display:flex;flex-direction:column;padding:", "px ", "px 0;"], colors.gray85, spacing.lg, spacing.lg);
40
40
  export var StyledSplitViewCardBody = /*#__PURE__*/styled.div.withConfig({
41
41
  displayName: "StyledSplitViewCardBody",
42
- componentId: "core-12_23_0__sc-9hrkda-6"
42
+ componentId: "core-12_25_0__sc-9hrkda-6"
43
43
  })(["display:flex;flex-direction:column;flex:1;padding:", "px ", "px 0;overflow-y:auto;"], spacing.lg, spacing.lg);
44
44
  export var StyledSplitViewCardFooter = /*#__PURE__*/styled.div.withConfig({
45
45
  displayName: "StyledSplitViewCardFooter",
46
- componentId: "core-12_23_0__sc-9hrkda-7"
46
+ componentId: "core-12_25_0__sc-9hrkda-7"
47
47
  })(["display:flex;align-items:center;justify-content:flex-end;padding:", "px;", ""], spacing.lg, function (_ref4) {
48
48
  var $hasShadow = _ref4.$hasShadow;
49
49
  return $hasShadow && css(["box-shadow:0 -4px 6px 0 #0000001a;"]);
@@ -91,7 +91,7 @@ function SelectComponent(props, ref) {
91
91
  option: option
92
92
  });
93
93
  }
94
- }))) : /*#__PURE__*/React.createElement(ctx.components.EmptyMessage, ctx.props.emptyMessage()), config.footer && /*#__PURE__*/React.createElement(ctx.components.Footer, ctx.props.footer()))))));
94
+ }))) : /*#__PURE__*/React.createElement(ctx.components.EmptyMessage, ctx.props.emptyMessage()), config.footer && /*#__PURE__*/React.createElement(ctx.components.Footer, ctx.props.footer(), config.footer))))));
95
95
  }
96
96
  export var SuperSelect = /*#__PURE__*/React.forwardRef(SelectComponent);
97
97
  //# sourceMappingURL=SuperSelect.js.map