@nypl/design-system-react-components 0.25.0 → 0.25.4

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 (392) hide show
  1. package/CHANGELOG.md +142 -1
  2. package/README.md +98 -50
  3. package/dist/components/Accordion/Accordion.d.ts +14 -14
  4. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +15 -14
  5. package/dist/components/Breadcrumbs/BreadcrumbsTypes.d.ts +6 -0
  6. package/dist/components/Button/Button.d.ts +13 -8
  7. package/dist/components/Button/ButtonTypes.d.ts +3 -1
  8. package/dist/components/Card/Card.d.ts +36 -52
  9. package/dist/components/Card/CardTypes.d.ts +2 -17
  10. package/dist/components/Checkbox/Checkbox.d.ts +17 -13
  11. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +45 -0
  12. package/dist/components/CheckboxGroup/CheckboxGroupLayoutTypes.d.ts +4 -0
  13. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +15 -0
  14. package/dist/components/DatePicker/DatePicker.d.ts +37 -35
  15. package/dist/components/Fieldset/Fieldset.d.ts +25 -0
  16. package/dist/components/Form/Form.d.ts +13 -8
  17. package/dist/components/Form/FormTypes.d.ts +2 -8
  18. package/dist/components/Grid/GridTypes.d.ts +9 -0
  19. package/dist/components/Grid/SimpleGrid.d.ts +14 -0
  20. package/dist/components/Heading/Heading.d.ts +4 -4
  21. package/dist/components/HelperErrorText/HelperErrorText.d.ts +17 -14
  22. package/dist/components/Hero/Hero.d.ts +19 -14
  23. package/dist/components/Hero/HeroTypes.d.ts +10 -5
  24. package/dist/components/HorizontalRule/HorizontalRule.d.ts +10 -9
  25. package/dist/components/Icons/Icon.d.ts +19 -14
  26. package/dist/components/Icons/IconSvgs.d.ts +11 -0
  27. package/dist/components/Icons/IconTypes.d.ts +89 -64
  28. package/dist/components/Image/Image.d.ts +19 -9
  29. package/dist/components/Image/ImageTypes.d.ts +20 -0
  30. package/dist/components/Label/Label.d.ts +5 -17
  31. package/dist/components/Link/Link.d.ts +12 -12
  32. package/dist/components/List/List.d.ts +19 -14
  33. package/dist/components/Notification/Notification.d.ts +37 -16
  34. package/dist/components/Pagination/Pagination.d.ts +16 -13
  35. package/dist/components/Pagination/Pagination.stories.d.ts +2 -0
  36. package/dist/components/ProgressIndicator/ProgressIndicator.d.ts +29 -0
  37. package/dist/components/ProgressIndicator/ProgressIndicatorTypes.d.ts +8 -0
  38. package/dist/components/Radio/Radio.d.ts +2 -0
  39. package/dist/components/RadioGroup/RadioGroup.d.ts +4 -2
  40. package/dist/components/SearchBar/SearchBar.d.ts +45 -27
  41. package/dist/components/Select/Select.d.ts +34 -35
  42. package/dist/components/Select/SelectTypes.d.ts +4 -0
  43. package/dist/components/SkeletonLoader/SkeletonLoader.d.ts +18 -14
  44. package/dist/components/SkeletonLoader/SkeletonLoaderTypes.d.ts +2 -2
  45. package/dist/components/Slider/Slider.d.ts +57 -0
  46. package/dist/components/StatusBadge/StatusBadge.d.ts +8 -6
  47. package/dist/components/StatusBadge/StatusBadgeTypes.d.ts +5 -0
  48. package/dist/components/StyleGuide/ColorCard.d.ts +12 -0
  49. package/dist/components/Tabs/Tabs.d.ts +1 -1
  50. package/dist/components/Template/Template.d.ts +91 -0
  51. package/dist/components/Text/Text.d.ts +16 -0
  52. package/dist/components/Text/TextTypes.d.ts +6 -0
  53. package/dist/components/TextInput/TextInput.d.ts +44 -31
  54. package/dist/components/TextInput/TextInputTypes.d.ts +5 -0
  55. package/dist/components/VideoPlayer/VideoPlayer.d.ts +6 -8
  56. package/dist/components/VideoPlayer/VideoPlayerTypes.d.ts +2 -2
  57. package/dist/design-system-react-components.cjs.development.js +6473 -2630
  58. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  59. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  60. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  61. package/dist/design-system-react-components.esm.js +6463 -2631
  62. package/dist/design-system-react-components.esm.js.map +1 -1
  63. package/dist/hooks/tests/useCarouselStyles.test.d.ts +1 -0
  64. package/dist/hooks/useCarouselStyles.d.ts +16 -0
  65. package/dist/hooks/useNYPLTheme.d.ts +54 -0
  66. package/dist/hooks/useWindowSize.d.ts +10 -0
  67. package/dist/index.d.ts +19 -7
  68. package/dist/resources.scss +180 -170
  69. package/dist/styles.css +1 -1
  70. package/dist/theme/components/accordion.d.ts +25 -0
  71. package/dist/theme/components/breadcrumb.d.ts +90 -0
  72. package/dist/theme/components/button.d.ts +39 -15
  73. package/dist/theme/components/card.d.ts +168 -0
  74. package/dist/theme/components/checkbox.d.ts +12 -8
  75. package/dist/theme/components/checkboxGroup.d.ts +12 -0
  76. package/dist/theme/components/componentWrapper.d.ts +11 -0
  77. package/dist/theme/components/datePicker.d.ts +16 -0
  78. package/dist/theme/components/fieldset.d.ts +27 -0
  79. package/dist/theme/components/global.d.ts +65 -0
  80. package/dist/theme/components/globalMixins.d.ts +23 -0
  81. package/dist/theme/components/heading.d.ts +55 -20
  82. package/dist/theme/components/helperErrorText.d.ts +10 -0
  83. package/dist/theme/components/hero.d.ts +493 -0
  84. package/dist/theme/components/horizontalRule.d.ts +14 -0
  85. package/dist/theme/components/icon.d.ts +13 -0
  86. package/dist/theme/components/image.d.ts +31 -0
  87. package/dist/theme/components/label.d.ts +18 -0
  88. package/dist/theme/components/link.d.ts +49 -0
  89. package/dist/theme/components/list.d.ts +89 -0
  90. package/dist/theme/components/notification.d.ts +75 -0
  91. package/dist/theme/components/pagination.d.ts +19 -0
  92. package/dist/theme/components/progressIndicator.d.ts +50 -0
  93. package/dist/theme/components/radio.d.ts +8 -7
  94. package/dist/theme/components/radioGroup.d.ts +12 -0
  95. package/dist/theme/components/searchBar.d.ts +20 -0
  96. package/dist/theme/components/select.d.ts +67 -0
  97. package/dist/theme/components/skeletonLoader.d.ts +98 -0
  98. package/dist/theme/components/slider.d.ts +51 -0
  99. package/dist/theme/components/statusBadge.d.ts +25 -0
  100. package/dist/theme/components/tabs.d.ts +63 -12
  101. package/dist/theme/components/template.d.ts +105 -0
  102. package/dist/theme/components/text.d.ts +20 -0
  103. package/dist/theme/components/textInput.d.ts +112 -0
  104. package/dist/theme/components/videoPlayer.d.ts +40 -0
  105. package/dist/theme/foundations/breakpoints.d.ts +8 -8
  106. package/dist/theme/foundations/global.d.ts +8 -0
  107. package/dist/theme/foundations/radii.d.ts +5 -0
  108. package/dist/theme/foundations/shadows.d.ts +4 -0
  109. package/dist/theme/foundations/spacing.d.ts +16 -16
  110. package/dist/utils/utils.d.ts +6 -0
  111. package/package.json +72 -82
  112. package/src/__tests__/setup.ts +2 -2
  113. package/src/components/Accordion/Accordion.stories.mdx +223 -34
  114. package/src/components/Accordion/Accordion.test.tsx +135 -19
  115. package/src/components/Accordion/Accordion.tsx +81 -56
  116. package/src/components/Autosuggest/Autosuggest.stories.mdx +4 -4
  117. package/src/components/Autosuggest/Autosuggest.stories.tsx +3 -2
  118. package/src/components/Autosuggest/_Autosuggest.scss +5 -5
  119. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +48 -50
  120. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +54 -25
  121. package/src/components/Breadcrumbs/Breadcrumbs.tsx +75 -73
  122. package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx +6 -0
  123. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +298 -0
  124. package/src/components/Button/Button.stories.mdx +45 -36
  125. package/src/components/Button/Button.test.tsx +37 -11
  126. package/src/components/Button/Button.tsx +22 -34
  127. package/src/components/Button/ButtonTypes.tsx +2 -0
  128. package/src/components/Button/__snapshots__/Button.test.tsx.snap +50 -8
  129. package/src/components/Card/Card.stories.mdx +314 -273
  130. package/src/components/Card/Card.test.tsx +157 -91
  131. package/src/components/Card/Card.tsx +195 -145
  132. package/src/components/Card/CardTypes.tsx +2 -19
  133. package/src/components/Card/__snapshots__/Card.test.tsx.snap +410 -0
  134. package/src/components/CardEdition/CardEdition.stories.tsx +26 -53
  135. package/src/components/CardEdition/CardEdition.test.tsx +23 -31
  136. package/src/components/CardEdition/_CardEdition.scss +22 -23
  137. package/src/components/Chakra/Box.stories.mdx +15 -16
  138. package/src/components/Chakra/Center.stories.mdx +56 -24
  139. package/src/components/Chakra/Grid.stories.mdx +92 -0
  140. package/src/components/Chakra/Stack.stories.mdx +38 -21
  141. package/src/components/Checkbox/Checkbox.stories.mdx +33 -11
  142. package/src/components/Checkbox/Checkbox.test.tsx +47 -2
  143. package/src/components/Checkbox/Checkbox.tsx +44 -41
  144. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +92 -7
  145. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +329 -0
  146. package/src/components/CheckboxGroup/CheckboxGroup.test.tsx +372 -0
  147. package/src/components/CheckboxGroup/CheckboxGroup.tsx +152 -0
  148. package/src/components/CheckboxGroup/CheckboxGroupLayoutTypes.tsx +4 -0
  149. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +1326 -0
  150. package/src/components/ComponentWrapper/ComponentWrapper.tsx +63 -0
  151. package/src/components/DatePicker/DatePicker.stories.mdx +163 -62
  152. package/src/components/DatePicker/DatePicker.test.tsx +264 -64
  153. package/src/components/DatePicker/DatePicker.tsx +165 -134
  154. package/src/components/DatePicker/_DatePicker.scss +33 -66
  155. package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +818 -0
  156. package/src/components/Fieldset/Fieldset.stories.mdx +55 -0
  157. package/src/components/Fieldset/Fieldset.test.tsx +125 -0
  158. package/src/components/Fieldset/Fieldset.tsx +52 -0
  159. package/src/components/Fieldset/__snapshots__/Fieldset.test.tsx.snap +68 -0
  160. package/src/components/Form/Form.stories.mdx +70 -27
  161. package/src/components/Form/Form.test.tsx +58 -45
  162. package/src/components/Form/Form.tsx +50 -21
  163. package/src/components/Form/FormTypes.tsx +3 -8
  164. package/src/components/Form/__snapshots__/Form.test.tsx.snap +24 -14
  165. package/src/components/Grid/GridTypes.tsx +9 -0
  166. package/src/components/Grid/SimpleGrid.stories.mdx +268 -0
  167. package/src/components/Grid/SimpleGrid.test.tsx +66 -0
  168. package/src/components/Grid/SimpleGrid.tsx +37 -0
  169. package/src/components/Grid/__snapshots__/SimpleGrid.test.tsx.snap +8 -0
  170. package/src/components/Heading/Heading.stories.mdx +3 -3
  171. package/src/components/Heading/Heading.tsx +12 -6
  172. package/src/components/HelperErrorText/HelperErrorText.stories.mdx +124 -0
  173. package/src/components/HelperErrorText/HelperErrorText.test.tsx +39 -44
  174. package/src/components/HelperErrorText/HelperErrorText.tsx +37 -39
  175. package/src/components/HelperErrorText/__snapshots__/HelperErrorText.test.tsx.snap +25 -0
  176. package/src/components/Hero/Hero.stories.mdx +198 -121
  177. package/src/components/Hero/Hero.test.tsx +537 -107
  178. package/src/components/Hero/Hero.tsx +79 -92
  179. package/src/components/Hero/HeroTypes.tsx +18 -5
  180. package/src/components/Hero/__snapshots__/Hero.test.tsx.snap +307 -0
  181. package/src/components/HorizontalRule/HorizontalRule.stories.mdx +8 -6
  182. package/src/components/HorizontalRule/HorizontalRule.test.tsx +33 -28
  183. package/src/components/HorizontalRule/HorizontalRule.tsx +27 -29
  184. package/src/components/HorizontalRule/__snapshots__/HorizontalRule.test.tsx.snap +27 -9
  185. package/src/components/Icons/Icon.stories.mdx +94 -77
  186. package/src/components/Icons/Icon.test.tsx +48 -22
  187. package/src/components/Icons/Icon.tsx +78 -61
  188. package/src/components/Icons/IconSvgs.tsx +22 -0
  189. package/src/components/Icons/IconTypes.tsx +91 -64
  190. package/src/components/Image/Image.stories.mdx +220 -0
  191. package/src/components/Image/Image.test.tsx +131 -29
  192. package/src/components/Image/Image.tsx +84 -56
  193. package/src/components/Image/ImageTypes.ts +22 -0
  194. package/src/components/Image/__snapshots__/Image.test.tsx.snap +190 -0
  195. package/src/components/Input/Input.stories.tsx +23 -67
  196. package/src/components/Input/Input.test.tsx +4 -4
  197. package/src/components/Input/_Input.scss +23 -14
  198. package/src/components/Label/Label.stories.mdx +28 -7
  199. package/src/components/Label/Label.test.tsx +43 -12
  200. package/src/components/Label/Label.tsx +21 -34
  201. package/src/components/Label/__snapshots__/Label.test.tsx.snap +41 -0
  202. package/src/components/Link/Link.stories.mdx +41 -41
  203. package/src/components/Link/Link.test.tsx +33 -44
  204. package/src/components/Link/Link.tsx +117 -100
  205. package/src/components/List/List.stories.mdx +124 -51
  206. package/src/components/List/List.test.tsx +142 -63
  207. package/src/components/List/List.tsx +89 -93
  208. package/src/components/List/__snapshots__/List.test.tsx.snap +109 -0
  209. package/src/components/Modal/Modal.stories.mdx +3 -3
  210. package/src/components/Modal/_Modal.scss +2 -2
  211. package/src/components/Notification/Notification.stories.mdx +119 -111
  212. package/src/components/Notification/Notification.test.tsx +102 -126
  213. package/src/components/Notification/Notification.tsx +157 -161
  214. package/src/components/Notification/__snapshots__/Notification.test.tsx.snap +159 -8
  215. package/src/components/Pagination/Pagination.stories.mdx +26 -27
  216. package/src/components/Pagination/Pagination.stories.tsx +11 -16
  217. package/src/components/Pagination/Pagination.test.tsx +276 -140
  218. package/src/components/Pagination/Pagination.tsx +174 -154
  219. package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +285 -0
  220. package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx +292 -0
  221. package/src/components/ProgressIndicator/ProgressIndicator.test.tsx +225 -0
  222. package/src/components/ProgressIndicator/ProgressIndicator.tsx +126 -0
  223. package/src/components/ProgressIndicator/ProgressIndicatorTypes.ts +8 -0
  224. package/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +357 -0
  225. package/src/components/Radio/Radio.test.tsx +20 -4
  226. package/src/components/Radio/Radio.tsx +6 -3
  227. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +3 -0
  228. package/src/components/RadioGroup/RadioGroup.stories.mdx +4 -5
  229. package/src/components/RadioGroup/RadioGroup.test.tsx +24 -1
  230. package/src/components/RadioGroup/RadioGroup.tsx +21 -29
  231. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +42 -72
  232. package/src/components/SearchBar/SearchBar.Test.tsx +170 -16
  233. package/src/components/SearchBar/SearchBar.stories.mdx +294 -219
  234. package/src/components/SearchBar/SearchBar.tsx +161 -46
  235. package/src/components/Select/Select.stories.mdx +188 -170
  236. package/src/components/Select/Select.test.tsx +132 -375
  237. package/src/components/Select/Select.tsx +121 -165
  238. package/src/components/Select/SelectTypes.tsx +5 -0
  239. package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx +33 -76
  240. package/src/components/SkeletonLoader/SkeletonLoader.test.tsx +97 -177
  241. package/src/components/SkeletonLoader/SkeletonLoader.tsx +75 -70
  242. package/src/components/SkeletonLoader/SkeletonLoaderTypes.tsx +2 -2
  243. package/src/components/SkeletonLoader/__snapshots__/SkeletonLoader.test.tsx.snap +739 -0
  244. package/src/components/Slider/Slider.stories.mdx +529 -0
  245. package/src/components/Slider/Slider.test.tsx +653 -0
  246. package/src/components/Slider/Slider.tsx +303 -0
  247. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +1946 -0
  248. package/src/components/StatusBadge/StatusBadge.stories.mdx +91 -0
  249. package/src/components/StatusBadge/StatusBadge.test.tsx +35 -7
  250. package/src/components/StatusBadge/StatusBadge.tsx +24 -25
  251. package/src/components/StatusBadge/StatusBadgeTypes.tsx +5 -0
  252. package/src/components/StatusBadge/__snapshots__/StatusBadge.test.tsx.snap +28 -0
  253. package/src/components/StyleGuide/Bidirectionality.stories.mdx +17 -17
  254. package/src/components/StyleGuide/Breakpoints.stories.mdx +34 -10
  255. package/src/components/StyleGuide/Buttons.stories.mdx +102 -86
  256. package/src/components/StyleGuide/ColorCard.tsx +46 -0
  257. package/src/components/StyleGuide/Colors.stories.mdx +196 -0
  258. package/src/components/StyleGuide/DesignTokens.stories.mdx +170 -0
  259. package/src/components/StyleGuide/Forms.stories.mdx +9 -7
  260. package/src/components/StyleGuide/Iconography.stories.mdx +119 -127
  261. package/src/components/StyleGuide/Spacing.stories.mdx +31 -23
  262. package/src/components/StyleGuide/Typography.stories.mdx +202 -189
  263. package/src/components/StyleGuide/UIDocCard.tsx +1 -1
  264. package/src/components/Tabs/Tabs.stories.mdx +73 -11
  265. package/src/components/Tabs/Tabs.tsx +88 -67
  266. package/src/components/Template/Template.stories.mdx +572 -0
  267. package/src/components/Template/Template.test.tsx +124 -0
  268. package/src/components/Template/Template.tsx +226 -0
  269. package/src/components/Text/Text.stories.mdx +70 -0
  270. package/src/components/Text/Text.test.tsx +63 -0
  271. package/src/components/Text/Text.tsx +55 -0
  272. package/src/components/Text/TextTypes.tsx +6 -0
  273. package/src/components/Text/__snapshots__/Text.test.tsx.snap +33 -0
  274. package/src/components/TextInput/TextInput.stories.mdx +89 -90
  275. package/src/components/TextInput/TextInput.test.tsx +84 -85
  276. package/src/components/TextInput/TextInput.tsx +121 -95
  277. package/src/components/TextInput/TextInputTypes.tsx +8 -0
  278. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +17 -4
  279. package/src/components/VideoPlayer/VideoPlayer.test.tsx +54 -53
  280. package/src/components/VideoPlayer/VideoPlayer.tsx +50 -51
  281. package/src/components/VideoPlayer/VideoPlayerTypes.tsx +2 -2
  282. package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap +91 -0
  283. package/src/docs/Chakra.stories.mdx +246 -65
  284. package/src/docs/Intro.stories.mdx +18 -13
  285. package/src/hooks/tests/useCarouselStyles.test.ts +140 -0
  286. package/src/hooks/tests/useNYPLTheme.test.tsx +36 -0
  287. package/src/hooks/useCarouselStyles.ts +34 -0
  288. package/src/hooks/useNYPLTheme.ts +67 -0
  289. package/src/hooks/useWindowSize.ts +40 -0
  290. package/src/index.ts +39 -16
  291. package/src/resources.scss +5 -5
  292. package/src/styles/base/{_02-breakpoints.scss → _01-breakpoints.scss} +9 -10
  293. package/src/styles/base/{_03-mixins.scss → _02-mixins.scss} +16 -5
  294. package/src/styles/base/_03-base.scss +25 -0
  295. package/src/styles/base/{_05-focus.scss → _04-focus.scss} +0 -15
  296. package/src/styles/base/_place-holder.scss +14 -3
  297. package/src/styles/{03-space → space}/_space-inline.scss +14 -14
  298. package/src/styles/{03-space → space}/_space-inset.scss +10 -10
  299. package/src/styles/space/_space-stack.scss +116 -0
  300. package/src/styles.scss +13 -62
  301. package/src/theme/components/accordion.ts +30 -0
  302. package/src/theme/components/breadcrumb.ts +77 -0
  303. package/src/theme/components/button.ts +91 -71
  304. package/src/theme/components/card.ts +174 -0
  305. package/src/theme/components/checkbox.ts +22 -29
  306. package/src/theme/components/checkboxGroup.ts +8 -0
  307. package/src/theme/components/componentWrapper.ts +10 -0
  308. package/src/theme/components/datePicker.ts +17 -0
  309. package/src/theme/components/fieldset.ts +18 -0
  310. package/src/theme/components/global.ts +82 -0
  311. package/src/theme/components/globalMixins.ts +24 -0
  312. package/src/theme/components/heading.ts +25 -13
  313. package/src/theme/components/helperErrorText.ts +9 -0
  314. package/src/theme/components/hero.ts +240 -0
  315. package/src/theme/components/horizontalRule.ts +13 -0
  316. package/src/theme/components/icon.ts +79 -0
  317. package/src/theme/components/image.ts +116 -0
  318. package/src/theme/components/label.ts +10 -0
  319. package/src/theme/components/link.ts +51 -0
  320. package/src/theme/components/list.ts +73 -0
  321. package/src/theme/components/notification.ts +93 -0
  322. package/src/theme/components/pagination.ts +20 -0
  323. package/src/theme/components/progressIndicator.ts +62 -0
  324. package/src/theme/components/radio.ts +22 -33
  325. package/src/theme/components/radioGroup.ts +8 -0
  326. package/src/theme/components/searchBar.ts +21 -0
  327. package/src/theme/components/select.ts +53 -0
  328. package/src/theme/components/skeletonLoader.ts +107 -0
  329. package/src/theme/components/slider.ts +79 -0
  330. package/src/theme/components/statusBadge.ts +26 -0
  331. package/src/theme/components/tabs.ts +102 -69
  332. package/src/theme/components/template.ts +114 -0
  333. package/src/theme/components/text.ts +31 -0
  334. package/src/theme/components/textInput.ts +62 -0
  335. package/src/theme/components/videoPlayer.ts +49 -0
  336. package/src/theme/foundations/breakpoints.ts +8 -8
  337. package/src/theme/foundations/colors.ts +29 -13
  338. package/src/theme/foundations/global.ts +8 -0
  339. package/src/theme/foundations/radii.ts +6 -0
  340. package/src/theme/foundations/shadows.ts +5 -0
  341. package/src/theme/foundations/spacing.ts +24 -24
  342. package/src/theme/index.ts +74 -13
  343. package/src/utils/componentCategories.ts +12 -5
  344. package/src/utils/utils.ts +13 -0
  345. package/dist/components/Accordion/Accordion.stories.d.ts +0 -6
  346. package/dist/components/HelperErrorText/HelperErrorText.stories.d.ts +0 -16
  347. package/dist/components/Image/Image.stories.d.ts +0 -18
  348. package/dist/components/List/List.stories.d.ts +0 -7
  349. package/dist/components/StatusBadge/StatusBadge.stories.d.ts +0 -8
  350. package/dist/components/StyleGuide/Colors.stories.d.ts +0 -25
  351. package/dist/components/Template/Template.stories.d.ts +0 -30
  352. package/dist/theme/components/customRadioGroup.d.ts +0 -17
  353. package/src/components/Accordion/Accordion.stories.tsx +0 -66
  354. package/src/components/Accordion/_Accordion.scss +0 -81
  355. package/src/components/Breadcrumbs/_Breadcrumbs.scss +0 -97
  356. package/src/components/Button/_Button.scss +0 -56
  357. package/src/components/Card/_Card.scss +0 -308
  358. package/src/components/Form/_Form.scss +0 -67
  359. package/src/components/HelperErrorText/HelperErrorText.stories.tsx +0 -48
  360. package/src/components/HelperErrorText/_HelperErrorText.scss +0 -9
  361. package/src/components/Hero/_Hero.scss +0 -256
  362. package/src/components/HorizontalRule/_HorizontalRule.scss +0 -15
  363. package/src/components/Icons/_Icons.scss +0 -116
  364. package/src/components/Image/Image.stories.tsx +0 -54
  365. package/src/components/Image/_Image.scss +0 -38
  366. package/src/components/Label/_Label.scss +0 -22
  367. package/src/components/Link/_Link.scss +0 -73
  368. package/src/components/List/List.stories.tsx +0 -139
  369. package/src/components/List/_List.scss +0 -76
  370. package/src/components/Notification/_Notification.scss +0 -110
  371. package/src/components/Pagination/_Pagination.scss +0 -40
  372. package/src/components/SearchBar/_SearchBar.scss +0 -16
  373. package/src/components/Select/_Select.scss +0 -82
  374. package/src/components/SkeletonLoader/_SkeletonLoader.scss +0 -142
  375. package/src/components/StatusBadge/StatusBadge.stories.tsx +0 -34
  376. package/src/components/StatusBadge/_StatusBadge.scss +0 -23
  377. package/src/components/StyleGuide/Colors.stories.tsx +0 -289
  378. package/src/components/Template/Template.stories.tsx +0 -86
  379. package/src/components/Template/_Template.scss +0 -63
  380. package/src/components/TextInput/_TextInput.scss +0 -59
  381. package/src/components/VideoPlayer/_VideoPlayer.scss +0 -38
  382. package/src/styles/01-colors/_colors-brand.scss +0 -56
  383. package/src/styles/01-colors/_colors-utility.scss +0 -65
  384. package/src/styles/02-typography/_type-scale.css +0 -11
  385. package/src/styles/02-typography/_type-weight.css +0 -7
  386. package/src/styles/02-typography/_typefaces.css +0 -4
  387. package/src/styles/03-space/_space-stack.scss +0 -116
  388. package/src/styles/03-space/_space.css +0 -30
  389. package/src/styles/base/_04-base.scss +0 -19
  390. package/src/styles/base/_card-grid.scss +0 -78
  391. package/src/styles/base/_typography.scss +0 -11
  392. package/src/theme/components/customRadioGroup.ts +0 -18
package/dist/styles.css CHANGED
@@ -1,3 +1,3 @@
1
1
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
2
2
 
3
- /*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */@font-face{font-family:system-ui;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Segoe UI Light"),local("Ubuntu Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Light Italic"),local("Ubuntu Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Italic"),local("Ubuntu Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Segoe UI Semibold"),local("Ubuntu Medium"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Segoe UI Semibold Italic"),local("Ubuntu Medium Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Segoe UI Bold"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Segoe UI Bold Italic"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:"";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{margin-left:-4px;position:absolute;width:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:after,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:after,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before{border:8px solid transparent;box-sizing:content-box;content:"";height:0;left:-8px;position:absolute;width:1px;z-index:-1}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before{border-bottom-color:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{margin-top:-8px;top:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:after,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before{border-bottom-color:#f0f0f0;border-top:none}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:after{top:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before{border-bottom-color:#aeaeae;top:-1px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{bottom:0;margin-bottom:-8px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:after,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before{border-bottom:none;border-top-color:#fff}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:after{bottom:0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before{border-top-color:#aeaeae;bottom:-1px}.react-datepicker-wrapper{border:0;display:inline-block;padding:0}.react-datepicker{background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;color:#000;display:inline-block;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;position:relative}.react-datepicker--time-only .react-datepicker__triangle{left:35px}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__triangle{left:50px;position:absolute}.react-datepicker-popper{z-index:1}.react-datepicker-popper[data-placement^=bottom]{padding-top:10px}.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle,.react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle{left:auto;right:50px}.react-datepicker-popper[data-placement^=top]{padding-bottom:10px}.react-datepicker-popper[data-placement^=right]{padding-left:8px}.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle{left:auto;right:42px}.react-datepicker-popper[data-placement^=left]{padding-right:8px}.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle{left:42px;right:auto}.react-datepicker__header{background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative;text-align:center}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select{display:inline-block;margin:0 2px}.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month{color:#000;font-size:.944rem;font-weight:700;margin-top:0}.react-datepicker-time__header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__navigation{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;overflow:hidden;padding:0;position:absolute;text-align:center;text-indent:-999em;top:2px;width:32px;z-index:1}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{display:block;margin-left:auto;margin-right:auto;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{font-size:20px;position:relative;top:-1px}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__input-time-container{clear:both;float:left;margin:5px 0 10px 15px;text-align:left;width:100%}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{display:inline-block;margin-left:5px}.react-datepicker__time-container{border-left:1px solid #aeaeae;float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.3rem;display:inline;position:absolute;right:-72px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.3rem;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:.3rem;margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:content-box;height:calc(195px + .85rem);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:transparent;cursor:default}.react-datepicker__week-number{color:#ccc;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day-names,.react-datepicker__week{white-space:nowrap}.react-datepicker__day-names{margin-bottom:-8px}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{color:#000;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__month--in-range,.react-datepicker__month--in-selecting-range,.react-datepicker__month--selected,.react-datepicker__quarter--in-range,.react-datepicker__quarter--in-selecting-range,.react-datepicker__quarter--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__month--in-range:hover,.react-datepicker__month--in-selecting-range:hover,.react-datepicker__month--selected:hover,.react-datepicker__quarter--in-range:hover,.react-datepicker__quarter--in-selecting-range:hover,.react-datepicker__quarter--selected:hover{background-color:#1d5d90}.react-datepicker__month--disabled,.react-datepicker__quarter--disabled{color:#ccc;pointer-events:none}.react-datepicker__month--disabled:hover,.react-datepicker__quarter--disabled:hover{background-color:transparent;cursor:default}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{background-color:#3dcc4a;border-radius:.3rem;color:#fff}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__year-text--in-range:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--selected:hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#2a87d0;border-radius:.3rem;color:#fff}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range{background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range,.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range,.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range,.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range{background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{color:#ccc;cursor:default}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:transparent}.react-datepicker__month-text.react-datepicker__month--in-range:hover,.react-datepicker__month-text.react-datepicker__month--selected:hover,.react-datepicker__month-text.react-datepicker__quarter--in-range:hover,.react-datepicker__month-text.react-datepicker__quarter--selected:hover,.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,.react-datepicker__quarter-text.react-datepicker__month--selected:hover,.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover,.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover{background-color:#216ba5}.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover{background-color:#f0f0f0}.react-datepicker__input-container{display:inline-block;position:relative;width:100%}.react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view{border:1px solid transparent;border-radius:.3rem;position:relative}.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover{cursor:pointer}.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{right:-16px;top:0;transform:rotate(135deg)}.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown{background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;left:25%;position:absolute;text-align:center;top:30px;width:50%;z-index:1}.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover{cursor:pointer}.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option{display:block;line-height:20px;margin-left:auto;margin-right:auto;width:100%}.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover{background-color:#ccc}.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected{left:15px;position:absolute}.react-datepicker__close-icon{background-color:transparent;border:0;cursor:pointer;display:table-cell;height:100%;outline:0;padding:0 6px 0 0;position:absolute;right:0;top:0;vertical-align:middle}.react-datepicker__close-icon:after{background-color:#216ba5;border-radius:50%;color:#fff;content:"\00d7";cursor:pointer;display:table-cell;font-size:12px;height:16px;line-height:1;padding:2px;text-align:center;vertical-align:middle;width:16px}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:rgba(0,0,0,.8);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:3rem;width:3rem}@media (max-height:550px),(max-width:400px){.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:2rem;width:2rem}}.react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month{font-size:1.44rem}:root{--brand-primary:#c60917;--brand-secondary:#760000;--section-brand-primary:#c60917;--section-brand-secondary:#760000;--section-whats-on-primary:#242424;--section-whats-on-secondary:#000;--section-books-and-more-primary:#c60917;--section-books-and-more-secondary:#760000;--section-research-primary:#00838a;--section-research-secondary:#006166;--section-locations-primary:#c60917;--section-locations-secondary:#760000;--section-research-library-lpa:#005d53;--section-research-library-schomburg:#a03e31;--section-research-library-schwartzman:#760000;--ui-black:#000;--ui-white:#fff;--ui-gray-xdark:#424242;--ui-gray-dark:#616161;--ui-gray-medium:#bdbdbd;--ui-gray-light:#e0e0e0;--ui-gray-warm-light:#efedeb;--ui-gray-xlight:#f5f5f5;--ui-gray-warm-xlight:#f8f8f7;--ui-gray-xxlight:#fafafa;--ui-disabled-primary:#e0e0e0;--ui-disabled-secondary:#fafafa;--ui-error:#97272c;--ui-focus:#4181f1;--ui-link-primary:#0576d3;--ui-link-secondary:#004b98;--ui-status-primary:#f9e08e;--ui-status-secondary:#fbe7e1;--ui-success-primary:#077719;--ui-success-secondary:#095212;--ui-test:tomato;--ui-warning-primary:#f0974e;--ui-warning-secondary:#ec7b1f;--font-size--3:0.625rem;--font-size--2:0.75rem;--font-size--1:0.875rem;--font-size-0:1rem;--font-size-1:1.125rem;--font-size-2:1.375rem;--font-size-3:1.75rem;--font-size-4:2.25rem;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--typeface-body:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--typeface-heading:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--space:1rem;--space-xxs:calc(var(--space)/4);--space-xs:calc(var(--space)/2);--space-s:calc(var(--space)*1);--space-m:calc(var(--space)*1.5);--space-l:calc(var(--space)*2);--space-xl:calc(var(--space)*3);--space-xxl:calc(var(--space)*4);--space-xxxl:calc(var(--space)*6);--breakpoint-small:320px;--breakpoint-medium:600px;--breakpoint-large:960px;--breakpoint-xl:1280px}.container{padding:var(--space-s)}.nypl-ds{box-sizing:border-box;color:var(--ui-black);font-family:var(--typeface-body);font-size:16px;font-weight:300;line-height:1.5;overflow-x:hidden}.nypl-ds *,.nypl-ds :after,.nypl-ds :before{box-sizing:inherit}.focus,.nypl-ds [contentEditable=true]:focus,.nypl-ds [href]:focus,.nypl-ds [tabindex]:focus,.nypl-ds button:not([disabled]):focus,.nypl-ds iframe:focus,.nypl-ds input:not([disabled]):focus,.nypl-ds select:not([disabled]):focus,.nypl-ds textarea:not([disabled]):focus{outline:2px solid var(--ui-focus);outline-offset:2px;z-index:9999}.card-grid{margin-bottom:var(--space-l)}@media (min-width:960px){.card-grid{margin-bottom:var(--space-xl)}}.card-grid--full{margin-bottom:var(--space-xxl)}@media (min-width:960px){.card-grid--full{margin-bottom:var(--space-xxxl)}}.card-grid__cards{display:flex;flex-flow:column nowrap;list-style:none;margin:0;padding:0}.card-grid__cards>:not(:last-child){margin-bottom:var(--space-s)}@media (min-width:960px){.card-grid__cards>:not(:last-child){margin-bottom:0}.card-grid__cards>:not(:last-child):not(:nth-child(3n)){margin-right:var(--space-l)}.card-grid__cards>:not(:last-child):not(:nth-last-child(2)):not(:nth-last-child(3)){margin-bottom:var(--space-l)}.card-grid__cards--full>:not(:last-child):not(:nth-last-child(2)):not(:nth-last-child(3)),.card-grid__cards--full>:nth-child(3n),.card-grid__cards--full>:nth-child(3n+2):not(:last-child):not(:nth-child(3n)):not(:nth-last-child(2)){margin-bottom:var(--space-xxl)}.card-grid__cards{flex-flow:row wrap}.card-grid__cards>*{flex:0 0 30%}.card-grid__cards>.featured-card{flex:1 0 31%}}.card-grid__cards--bg-color{margin:0 auto;max-width:1280px;padding:var(--space-s) var(--space-s);width:100%}@media (min-width:960px){.card-grid__cards--bg-color{margin:0 auto;max-width:1280px;padding:var(--space-xxl) var(--space-xxl);width:100%}}.card-grid__cards--bg-color>:last-child{margin-bottom:0}.placeholder{--color-place-holder:var(--ui-gray-light);align-items:center;border:4px dashed var(--color-place-holder);color:var(--color-place-holder);display:flex;font-size:3rem;justify-content:center;line-height:1.4;margin-bottom:var(--space-l);padding:4rem 1rem;width:100%}@media (min-width:960px){.placeholder{margin-bottom:var(--space-xl)}}.placeholder--full{margin-bottom:var(--space-xxl)}@media (min-width:960px){.placeholder--full{margin-bottom:var(--space-xxxl)}}.placeholder--short{padding:1rem}.nypl-ds p{margin:0 0 var(--space)}.icon{fill:currentColor;display:inline-block;height:24px;width:24px}.icon--rotate-180{transform:rotate(180deg)}.icon--rotate-270{transform:rotate(270deg)}.icon--rotate-0{transform:rotate(0deg)}.icon--rotate-90{transform:rotate(90deg)}.icon--left{margin-right:var(--space-xxs)}.icon--right{margin-left:var(--space-xxs)}.icon--xxxlarge{height:var(--space-xxl);width:var(--space-xxl)}.icon--xxlarge{height:var(--space-xl);width:var(--space-xl)}.icon--xlarge{height:var(--space-l);width:var(--space-l)}.icon--large{height:var(--space-m);width:var(--space-m)}.icon--medium{height:1.125rem;width:1.125rem}.icon--small{height:.875rem;width:.875rem}.icon--ui-black{fill:#000}.icon--ui-white{fill:#fff}.icon--brand-primary{fill:#c60917}.icon--brand-secondary{fill:#760000}.icon--section-whats-on-primary{fill:#242424}.icon--section-books-and-more-primary{fill:#c60917}.icon--section-research-primary{fill:#00838a}.icon--section-research-secondary{fill:#006166}.icon--section-locations-primary{fill:#c60917}.icon--section-research-library-lpa{fill:#005d53}.icon--section-research-library-schomburg{fill:#a03e31}.icon--section-research-library-schwartzman{fill:#760000}.button .icon{fill:currentColor;display:inline-block;height:24px;width:24px}.button .icon--rotate-180{transform:rotate(180deg)}.button .icon--rotate-270{transform:rotate(270deg)}.button .icon--rotate-0{transform:rotate(0deg)}.button .icon--rotate-90{transform:rotate(90deg)}.button .icon--left{margin-right:var(--space-xxs)}.button .icon--right{margin-left:var(--space-xxs)}.button .icon--xxxlarge{height:var(--space-xxl);width:var(--space-xxl)}.button .icon--xxlarge{height:var(--space-xl);width:var(--space-xl)}.button .icon--xlarge{height:var(--space-l);width:var(--space-l)}.button .icon--large{height:var(--space-m);width:var(--space-m)}.button .icon--medium{height:1.125rem;width:1.125rem}.button .icon--small{height:.875rem;width:.875rem}.button .icon--ui-black{fill:#000}.button .icon--ui-white{fill:#fff}.button .icon--brand-primary{fill:#c60917}.button .icon--brand-secondary{fill:#760000}.button .icon--section-whats-on-primary{fill:#242424}.button .icon--section-books-and-more-primary{fill:#c60917}.button .icon--section-research-primary{fill:#00838a}.button .icon--section-research-secondary{fill:#006166}.button .icon--section-locations-primary{fill:#c60917}.button .icon--section-research-library-lpa{fill:#005d53}.button .icon--section-research-library-schomburg{fill:#a03e31}.button .icon--section-research-library-schwartzman{fill:#760000}.button .icon--icon-left,.button .icon--icon-right,.button .icon--small{margin-top:var(--space-xxs)}.button .icon--icon-left{margin-right:var(--space-xs)}.button .icon--icon-right{margin-left:var(--space-xs)}.nypl-ds .link,.nypl-ds a{color:var(--ui-link-primary)}.nypl-ds .link--no-underline,.nypl-ds a--no-underline{text-decoration:none}.nypl-ds .link:hover,.nypl-ds a:hover{color:var(--ui-link-secondary)}.nypl-ds .link.button,.nypl-ds a.button{color:var(--ui-white)}.nypl-ds .link[role=button],.nypl-ds a[role=button]{cursor:pointer}.nypl-ds .link--dark-background,.nypl-ds a--dark-background{color:var(--ui-white)}.nypl-ds .link--dark-background:hover,.nypl-ds a--dark-background:hover{color:var(--ui-gray-light)}.more-link{align-items:center;color:var(--ui-link-primary);display:inline-flex;justify-content:space-between;text-decoration:underline}.more-link:hover{color:var(--ui-link-secondary);text-decoration:underline}.more-link__icon{fill:currentColor;display:inline-block;height:24px;height:var(--space-s);text-decoration:none;width:24px;width:var(--space-s)}.more-link__icon--rotate-180{transform:rotate(180deg)}.more-link__icon--rotate-270{transform:rotate(270deg)}.more-link__icon--rotate-0{transform:rotate(0deg)}.more-link__icon--rotate-90{transform:rotate(90deg)}.more-link__icon--left{margin-right:var(--space-xxs)}.more-link__icon--right{margin-left:var(--space-xxs)}.more-link__icon--xxxlarge{height:var(--space-xxl);width:var(--space-xxl)}.more-link__icon--xxlarge{height:var(--space-xl);width:var(--space-xl)}.more-link__icon--xlarge{height:var(--space-l);width:var(--space-l)}.more-link__icon--large{height:var(--space-m);width:var(--space-m)}.more-link__icon--medium{height:1.125rem;width:1.125rem}.more-link__icon--small{height:.875rem;width:.875rem}.more-link__icon--ui-black{fill:#000}.more-link__icon--ui-white{fill:#fff}.more-link__icon--brand-primary{fill:#c60917}.more-link__icon--brand-secondary{fill:#760000}.more-link__icon--section-whats-on-primary{fill:#242424}.more-link__icon--section-books-and-more-primary{fill:#c60917}.more-link__icon--section-research-primary{fill:#00838a}.more-link__icon--section-research-secondary{fill:#006166}.more-link__icon--section-locations-primary{fill:#c60917}.more-link__icon--section-research-library-lpa{fill:#005d53}.more-link__icon--section-research-library-schomburg{fill:#a03e31}.more-link__icon--section-research-library-schwartzman{fill:#760000}.more-link__icon--left{margin-right:var(--space-xs)}.more-link__icon--right{margin-left:var(--space-xs)}.more-link__icon svg{height:100%;width:100%}.input,.react-autosuggest__input{border:1px solid var(--ui-gray-medium);margin-bottom:var(--space-xs);padding:var(--space-xs)}.input[type=number],.input[type=password],.input[type=text],.react-autosuggest__input[type=number],.react-autosuggest__input[type=password],.react-autosuggest__input[type=text]{width:100%}.input[type=radio],.react-autosuggest__input[type=radio]{width:unset}.input[type=radio]+.label,.react-autosuggest__input[type=radio]+.label{display:unset;margin-left:var(--space-s)}.input::-webkit-input-placeholder,.react-autosuggest__input::-webkit-input-placeholder{color:var(--ui-gray-dark)}.input:-moz-placeholder,.react-autosuggest__input:-moz-placeholder{color:var(--ui-gray-dark)}.input:-ms-input-placeholder,.react-autosuggest__input:-ms-input-placeholder{color:var(--ui-gray-dark)}.input:hover,.react-autosuggest__input:hover{border-color:var(--ui-gray-dark)}.input:disabled,.react-autosuggest__input:disabled{background-color:var(--ui-gray-xxlight);color:var(--ui-gray-xdark)}.input:active,.input:active:hover,.input:focus,.input:focus:hover,.react-autosuggest__input:active,.react-autosuggest__input:active:hover,.react-autosuggest__input:focus,.react-autosuggest__input:focus:hover{border:1px solid var(--ui-focus);box-shadow:0;outline:1px solid var(--ui-focus);z-index:9999}.input--error{border:1px solid var(--ui-error)}@media (min-width:400px){.input-group{display:flex;justify-content:space-between}.input-group>:not(:last-child){margin-right:var(--space-m)}}.textinput{margin-bottom:var(--space-xs)}.textinput .inputfield{border:1px solid var(--ui-gray-medium);padding:var(--space-xs) var(--space-s);width:100%}.textinput .inputfield::-webkit-input-placeholder{color:var(--ui-gray-dark);font-style:italic;line-height:21px}.textinput .inputfield::-moz-placeholder{opacity:1}.textinput .inputfield:-moz-placeholder,.textinput .inputfield::-moz-placeholder{color:var(--ui-gray-dark);font-style:italic;line-height:21px}.textinput .inputfield:-ms-input-placeholder{color:var(--ui-gray-dark);font-style:italic;line-height:21px}.textinput .inputfield--textarea{line-height:1.5;min-height:var(--space-xxl)}.textinput .inputfield:hover{border-color:var(--ui-gray-dark)}.textinput .inputfield:disabled{background-color:var(--ui-gray-xxlight);color:var(--ui-gray-xdark);pointer-events:none}.textinput .inputfield:active,.textinput .inputfield:active:hover,.textinput .inputfield:focus,.textinput .inputfield:focus:hover{border:1px solid var(--ui-focus);box-shadow:0;outline:1px solid var(--ui-focus);z-index:9999}.textinput .inputfield--error,.textinput .inputfield--error:active,.textinput .inputfield--error:active:hover,.textinput .inputfield--error:focus,.textinput .inputfield--error:focus:hover,.textinput .inputfield--error:hover{border:1px solid var(--ui-error)}.textinput>.helper-text{margin-bottom:0;margin-top:var(--space-xs)}.react-autosuggest__container{display:inline;position:relative;width:100%}.react-autosuggest__input--focused{outline:none}.react-autosuggest__input--open{border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.react-autosuggest__suggestions-container{display:none;width:100%}.react-autosuggest__suggestions-container--open{background-color:var(--ui-white);display:block;font-weight:300;margin-top:-6px;outline:1px solid var(--ui-gray-light);position:absolute;width:100%;z-index:2}.react-autosuggest__suggestions-list{list-style-type:none;margin:0;padding:0}.react-autosuggest__suggestion{cursor:pointer;padding:var(--space-xs)}.react-autosuggest__suggestion--highlighted{background-color:var(--ui-gray-light)}.auto-suggest-bottom{padding:var(--space-xs)}fieldset .sr-only{clip:rect(1px,1px,1px,1px);word-wrap:normal;height:1px;overflow:hidden;position:absolute!important;width:1px}.accordion{border:1px solid var(--ui-gray-medium);color:inherit;width:100%}.accordion--fixed-height{display:flex;flex-direction:column;max-height:inherit}.accordion__content{display:none;padding:var(--space-xxs) var(--space-xxxl) var(--space-xs) var(--space-s);transition:all .35s}.accordion__label{align-items:center;background-color:var(--ui-white);border:none;border-radius:2px!important;color:inherit;cursor:pointer;display:flex;font-weight:500;justify-content:center;justify-content:space-between;padding:var(--space-xs) var(--space-s)!important;text-decoration:none}.accordion__label:visited{color:inherit}.accordion__label:hover{background-color:var(--ui-gray-xxlight)}.accordion__label:disabled{background-color:var(--ui-gray-light);color:var(--ui-gray-dark);pointer-events:none}.accordion__label .icon--minus{display:none}.accordion__label:focus{position:relative}.accordion__label:hover{background-color:var(--ui-gray-light)}.accordion__label--faq{font-size:var(--font-size-1);padding:var(--space-s)}.accordion__input{opacity:0;position:absolute;z-index:-1}.accordion__input:focus+.accordion__label{outline:2px solid var(--ui-focus);outline-offset:2px;z-index:9999}.accordion__input:checked+.accordion__label .icon--minus{display:inline}.accordion__input:checked+.accordion__label .icon--plus{display:none}.accordion__input:checked~.accordion__content{display:inline-block}.accordion__input:checked~.accordion__content--fixed-height{margin-top:var(--space-xxs);overflow-y:auto}li:not(:first-of-type) .accordion{margin-top:-1px}.breadcrumbs{background-color:var(--ui-black);padding-bottom:var(--space-xs);padding-top:var(--space-xs)}.breadcrumbs__item{align-items:center;display:inline;font-size:var(--font-size--1);line-height:1.5;margin-right:var(--space-xxs);position:relative;word-break:break-word}.breadcrumbs__item:not(:last-child){display:none}.breadcrumbs__item:not(:last-child):after{content:"/";padding-left:var(--space-xxs)}@media (min-width:600px){.breadcrumbs__item:not(:last-child){display:inline}}.breadcrumbs__item:last-child{display:block;padding-left:var(--space-m)}@media (min-width:600px){.breadcrumbs__item:last-child{display:inline;padding-left:0}}.breadcrumbs__icon{fill:currentColor;display:inline-block;height:24px;left:0;position:absolute;top:50%;transform:rotate(90deg) translateX(-50%);width:24px}.breadcrumbs__icon--rotate-180{transform:rotate(180deg)}.breadcrumbs__icon--rotate-270{transform:rotate(270deg)}.breadcrumbs__icon--rotate-0{transform:rotate(0deg)}.breadcrumbs__icon--rotate-90{transform:rotate(90deg)}.breadcrumbs__icon--left{margin-right:var(--space-xxs)}.breadcrumbs__icon--right{margin-left:var(--space-xxs)}.breadcrumbs__icon--xxxlarge{height:var(--space-xxl);width:var(--space-xxl)}.breadcrumbs__icon--xxlarge{height:var(--space-xl);width:var(--space-xl)}.breadcrumbs__icon--xlarge{height:var(--space-l);width:var(--space-l)}.breadcrumbs__icon--large{height:var(--space-m);width:var(--space-m)}.breadcrumbs__icon--medium{height:1.125rem;width:1.125rem}.breadcrumbs__icon--small{height:.875rem;width:.875rem}.breadcrumbs__icon--ui-black{fill:#000}.breadcrumbs__icon--ui-white{fill:#fff}.breadcrumbs__icon--brand-primary{fill:#c60917}.breadcrumbs__icon--brand-secondary{fill:#760000}.breadcrumbs__icon--section-whats-on-primary{fill:#242424}.breadcrumbs__icon--section-books-and-more-primary{fill:#c60917}.breadcrumbs__icon--section-research-primary{fill:#00838a}.breadcrumbs__icon--section-research-secondary{fill:#006166}.breadcrumbs__icon--section-locations-primary{fill:#c60917}.breadcrumbs__icon--section-research-library-lpa{fill:#005d53}.breadcrumbs__icon--section-research-library-schomburg{fill:#a03e31}.breadcrumbs__icon--section-research-library-schwartzman{fill:#760000}@media (min-width:600px){.breadcrumbs__icon{display:none}}.breadcrumbs__link,.breadcrumbs__link:focus,.breadcrumbs__link:link,.breadcrumbs__link:visited{color:var(--ui-white);text-decoration:none}.breadcrumbs__item a:hover{color:var(--ui-gray-light);text-decoration:underline}.breadcrumbs__list{color:var(--ui-white);list-style:none;margin:0 auto;max-width:1280px;padding:0;padding:0 var(--space);width:100%}.nypl--books-and-more .breadcrumbs{background-color:var(--section-books-and-more-secondary)}.nypl--locations .breadcrumbs{background-color:var(--section-locations-secondary)}.nypl--research .breadcrumbs{background-color:var(--section-research-secondary)}.nypl--whats-on .breadcrumbs{background-color:var(--section-whats-on-secondary)}.storybook-breadcrumbsExample .breadcrumbs{flex:1 1 50%;margin-left:unset;margin-right:var(--space-l);max-height:42px}.card{align-items:flex-start;display:flex;flex-flow:column wrap}.card .card__image{margin-bottom:var(--space-s);width:100%}.card .card__image--small{margin-left:auto;margin-right:auto;max-width:165px}.card .card__image--medium{margin-left:auto;margin-right:auto;max-width:225px}.card .card__image--large{margin-left:auto;margin-right:auto;max-width:360px}.card .card__image .image-wrap{box-sizing:border-box;height:0;overflow:hidden;padding-bottom:100%;position:relative;width:100%}.card .card__image .image-wrap--sixteen-by-nine{padding-bottom:56.25%}.card .card__image .image-wrap--three-by-two{padding-bottom:66.66%}.card .card__image .image-wrap--two-by-one{padding-bottom:50%}.card .card__image .image-wrap--four-by-three{padding-bottom:75%}.card .card__image .image-wrap--square{padding-bottom:100%}.card .card__image .image-wrap--three-by-four{padding-bottom:133.33%}.card .card__image .image-wrap--one-by-two{padding-bottom:200%}.card .card__image .image-crop{box-sizing:border-box;height:100%;left:0;position:absolute;top:0;width:100%}.card .card__image .image{box-sizing:border-box;display:block;height:100%;-o-object-fit:cover;object-fit:cover;position:relative;width:100%}.card .card__image--original{height:auto;overflow:hidden;padding-bottom:0}.card .card__image--original .image-crop{height:auto;position:relative}.card .card__image--original .image{-o-object-fit:none;object-fit:none}@media (min-width:600px){.card .card__body{display:block;flex-flow:row nowrap}}.card .card__body .card-content{margin-bottom:var(--space-s)}.card .card__body .card-content:last-child{margin-bottom:0}.card .card__body .card-actions{-moz-column-gap:var(--space-xs);column-gap:var(--space-xs);display:flex;margin-bottom:var(--space-s)}.card .card__body .card-actions:last-child{margin-bottom:0}.card .card__body .card-actions--top-border{border-top:1px solid var(--ui-gray-medium);padding-top:var(--space-xs)}.card .card__body .card-actions--bottom-border{border-bottom:1px solid var(--ui-gray-medium);padding-bottom:var(--space-xs)}.card--center{text-align:center}.card--center .card-actions{justify-content:center}.card--center .card__body{margin:auto}.card--with-border{border:1px solid var(--ui-gray-medium)}.card--with-border .card__body{padding:var(--space-s)}.card--with-border.card--has-image .card__body{padding:0 var(--space-s) var(--space-s)}.card--at-end .card__image{margin-bottom:0;margin-top:var(--space-s);order:2}.card.card--horizontal{display:flex;flex-flow:column nowrap;max-width:100%;text-align:left}.card.card--horizontal .card-actions{justify-content:left}.card.card--horizontal.card--center{align-items:center}.card.card--horizontal.card--center .card__body{margin:0}@media (min-width:600px){.card.card--horizontal{flex-flow:row}.card.card--horizontal .card__image{flex:0 0 225px;margin:0 var(--space-m) 0 0;max-width:50%}.card.card--horizontal .card__image--small{flex:0 0 165px}.card.card--horizontal .card__image--medium{flex:0 0 225px}.card.card--horizontal .card__image--large{flex:0 0 360px}}.card.card--horizontal.card--at-end .card__image{margin:var(--space-m) 0 0}@media (min-width:600px){.card.card--horizontal.card--at-end .card__image{margin:0 0 0 var(--space-m)}}.card.card--horizontal.card--with-border .card__body{padding:var(--space-s)}.card.card--horizontal.card--with-border.card--has-image .card__body{padding:0 var(--space-s) var(--space-s)}@media (min-width:600px){.card.card--horizontal.card--with-border.card--has-image .card__body{padding:var(--space-s) var(--space-s) var(--space-s) 0}}.card.card--horizontal.card--with-border.card--has-image.card--at-end .card__body{padding:var(--space-s) var(--space-s) 0}@media (min-width:600px){.card.card--horizontal.card--with-border.card--has-image.card--at-end .card__body{padding:var(--space-s) 0 var(--space-s) var(--space-s)}}.sb-show-main .example-card .card__content>*{margin-bottom:var(--space-xxs)}.sb-show-main .example-card .book__callout{font-size:var(--font-size-1);font-style:italic;font-weight:400;font-weight:300;line-height:1.15;margin:0 0 .5em;width:auto}.sb-show-main .example-card .book__callout__link,.sb-show-main .example-card .book__callout__link:hover{color:inherit}.sb-show-main .example-card .card__ctas{align-items:flex-end;display:flex;flex-flow:row wrap}.sb-show-main .example-card .card__ctas .button{width:100%}.sb-show-main .example-card .card__ctas>*{margin-bottom:var(--space-xxs)}.sb-show-main .example-card .book__filetype{margin-bottom:var(--space-s)}.sb-show-main .example-card .book__description{font-style:italic}.card-edition{align-items:flex-start;border:1px solid var(--ui-gray-light);border-radius:5px;display:flex;flex-flow:column wrap;margin-bottom:var(--space-s);padding:var(--space) var(--space-l)}.card-edition__footer,.card-edition__heading{flex:100%}.card-edition__columns{display:flex;flex-flow:column wrap;justify-content:space-between;width:100%}@media (min-width:600px){.card-edition__columns{flex-flow:row wrap}}.card-edition__columns+.card-edition__footer{margin-top:var(--space-xs)}.card-edition__image{align-items:center;background-color:var(--ui-gray-xlight);display:flex;flex:0 0 150px;height:150px;justify-content:center;margin-bottom:var(--space-s)}.card-edition__image .image{max-height:100%;max-width:100%}@media (min-width:600px){.card-edition__image{align-self:center;margin-bottom:0;margin-right:var(--space-s);width:150px}}.card-edition__content{flex:1 1;margin-bottom:var(--space-s)}@media (min-width:600px){.card-edition__content{margin-bottom:0;margin-right:var(--space-s)}}.card-edition__ctas{flex:0 1 20%}@media (min-width:600px){.card-edition__ctas{margin-right:var(--space-s)}}.card-edition__content+.card-edition__ctas{margin-right:var(--space-s)}.sb-show-main .var-docs{padding:0 0 var(--space) 0}.sb-show-main .example-card-edition .card__content>*{margin-bottom:var(--space-xxs)}.sb-show-main .example-card-edition .book__callout{font-size:var(--font-size-1);font-style:italic;font-weight:400;font-weight:300;line-height:1.15;margin:0 0 .5em;width:auto}.sb-show-main .example-card-edition .book__callout__link,.sb-show-main .example-card-edition .book__callout__link:hover{color:inherit}.sb-show-main .example-card-edition .card__ctas{align-items:flex-end;display:flex;flex-flow:row wrap;justify-content:center;text-align:center}.sb-show-main .example-card-edition .card__ctas .button{width:100%}.sb-show-main .example-card-edition .card__ctas>*{margin-bottom:var(--space-xxs)}.sb-show-main .example-card-edition .book__filetype{margin-bottom:var(--space-s)}.sb-show-main .example-card-edition .book__description{font-style:italic}fieldset legend{font-weight:var(--font-weight-medium);margin-bottom:var(--space-xs)}fieldset.date-picker{border:none;margin:0;padding:0}fieldset .label,fieldset .label__required-helper{font-size:var(--font-size--2);font-weight:var(--font-weight-regular);margin-bottom:0}.date-picker .sr-only{clip:rect(1px,1px,1px,1px);word-wrap:normal;height:1px;overflow:hidden;position:absolute!important;width:1px}.date-picker .form-field,.date-picker .form .form-row{margin-bottom:0}.date-picker .react-datepicker-wrapper{width:100%}.date-picker .date-picker-calendar .react-datepicker__year-wrapper{max-width:220px}.date-picker .date-picker-calendar .react-datepicker__day--in-range.react-datepicker__day--in-range,.date-picker .date-picker-calendar .react-datepicker__month--in-range.react-datepicker__day--in-range,.date-picker .date-picker-calendar .react-datepicker__year--in-range.react-datepicker__day--in-range{opacity:.5}.date-picker .date-picker-calendar .react-datepicker__day--in-range,.date-picker .date-picker-calendar .react-datepicker__day--in-selecting-range,.date-picker .date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker .date-picker-calendar .react-datepicker__day-text--keyboard-selected,.date-picker .date-picker-calendar .react-datepicker__month--in-range,.date-picker .date-picker-calendar .react-datepicker__month--in-selecting-range,.date-picker .date-picker-calendar .react-datepicker__month--keyboard-selected,.date-picker .date-picker-calendar .react-datepicker__month-text--keyboard-selected,.date-picker .date-picker-calendar .react-datepicker__year--in-range,.date-picker .date-picker-calendar .react-datepicker__year--in-selecting-range,.date-picker .date-picker-calendar .react-datepicker__year--keyboard-selected,.date-picker .date-picker-calendar .react-datepicker__year-text--keyboard-selected{background-color:#000;border-radius:0;color:#fff;opacity:.3}.date-picker .date-picker-calendar .react-datepicker__day--selected,.date-picker .date-picker-calendar .react-datepicker__day-text--selected,.date-picker .date-picker-calendar .react-datepicker__month--selected,.date-picker .date-picker-calendar .react-datepicker__month-text--selected,.date-picker .date-picker-calendar .react-datepicker__year--selected,.date-picker .date-picker-calendar .react-datepicker__year-text--selected{background-color:#000;border-radius:0;color:#fff;opacity:1}.date-picker .date-picker-calendar .react-datepicker__triangle{transform:translate(32px)!important}.form>.form-field:not(:last-child){margin-bottom:var(--space-l)}.form>.form-row{display:block}.form>.form-row:not(:last-child){margin-bottom:var(--space-l)}@media (min-width:600px){.form>.form-row{display:flex}}.form>.form-row .form-field:not(:last-child){margin-bottom:var(--space-l)}@media (min-width:600px){.form>.form-row .form-field{flex:1 0}.form>.form-row .form-field:not(:last-child){margin-bottom:0;margin-right:var(--space-l)}}.form--spacing-extra-extra-small .form-field,.form--spacing-extra-extra-small .form-row{margin-bottom:var(--space-xxs)}@media (min-width:600px){.form--spacing-extra-extra-small .form-row .form-field:not(:last-child){margin-right:var(--space-xxs)}}.form--spacing-extra-small .form-field,.form--spacing-extra-small .form-row{margin-bottom:var(--space-xs)}@media (min-width:600px){.form--spacing-extra-small .form-row .form-field:not(:last-child){margin-right:var(--space-xs)}}.form--spacing-small .form-field,.form--spacing-small .form-row{margin-bottom:var(--space-s)}@media (min-width:600px){.form--spacing-small .form-row .form-field:not(:last-child){margin-right:var(--space-s)}}.form--spacing-medium .form-field,.form--spacing-medium .form-row{margin-bottom:var(--space-m)}@media (min-width:600px){.form--spacing-medium .form-row .form-field:not(:last-child){margin-right:var(--space-m)}}.form--spacing-large .form-field,.form--spacing-large .form-row{margin-bottom:var(--space-l)}@media (min-width:600px){.form--spacing-large .form-row .form-field:not(:last-child){margin-right:var(--space-l)}}.form--spacing-extra-large .form-field,.form--spacing-extra-large .form-row{margin-bottom:var(--space-xl)}@media (min-width:600px){.form--spacing-extra-large .form-row .form-field:not(:last-child){margin-right:var(--space-xl)}}.helper-text{font-size:var(--font-size--1);margin-bottom:var(--space-xs)}.helper-text--error{color:var(--ui-error)}.hero{background-color:var(--ui-gray-warm-xlight)}.hero--50-50 .hero__content{align-items:center;display:flex;flex-flow:column nowrap;margin:0 auto;max-width:1280px;padding:0 var(--space) var(--space) var(--space);width:100%}@media (min-width:960px){.hero--50-50 .hero__content{flex-flow:row nowrap;padding:unset}}.hero--50-50 .hero__image{margin-bottom:var(--space-s)}@media (min-width:960px){.hero--50-50 .hero__image{margin-bottom:unset;margin-right:var(--space-s);max-width:50%}}.hero--primary{align-items:center;display:flex;flex-flow:column nowrap;justify-content:center;min-height:350px}@media (min-width:600px){.hero--primary{flex-flow:row nowrap}}.hero--primary .hero__content{background-color:var(--ui-black);color:var(--ui-white);flex:0 0 100%;padding:var(--space-xxl) var(--space-l)}.hero--primary .hero__content a{color:inherit;display:inline-block}@media (min-width:600px){.hero--primary .hero__content{flex:0 0 60%;max-width:960px}}.hero--primary .hero__content+.placeholder{flex:0 1 200px;margin-left:var(--space-xl)}.hero--primary .hero__body-text,.hero--primary .hero__heading{margin-bottom:0}.hero--secondary{overflow-x:hidden}.hero--secondary .hero__content{display:flex;flex-flow:column nowrap;margin:0 auto;max-width:1280px;padding:0 var(--space);width:100%}@media (min-width:600px){.hero--secondary .hero__content{flex-flow:row wrap}}.hero--secondary .hero__content .hero__heading{background-color:var(--ui-black);color:var(--ui-white);flex:1 1 100%;margin-bottom:0;margin-top:0;padding-bottom:var(--space-xxs);position:relative;z-index:0}.hero--secondary .hero__content .hero__heading:before{background-color:var(--ui-black);content:"";height:100%;left:-2000px;position:absolute;width:4000px;z-index:-1}@media (min-width:600px){.hero--secondary .hero__content .hero__heading{order:1}}.nypl--books-and-more .hero--secondary .hero__content .hero__heading,.nypl--books-and-more .hero--secondary .hero__content .hero__heading:before{background-color:var(--section-books-and-more-primary)}.nypl--locations .hero--secondary .hero__content .hero__heading,.nypl--locations .hero--secondary .hero__content .hero__heading:before{background-color:var(--section-locations-primary)}.nypl--research .hero--secondary .hero__content .hero__heading,.nypl--research .hero--secondary .hero__content .hero__heading:before{background-color:var(--section-research-primary)}.nypl--whats-on .hero--secondary .hero__content .hero__heading,.nypl--whats-on .hero--secondary .hero__content .hero__heading:before{background-color:var(--section-whats-on-primary)}.hero--secondary .hero__content .hero__body-text{margin-top:var(--space-xs)}@media (min-width:600px){.hero--secondary .hero__content .hero__body-text{flex:1 1 50%;margin-right:var(--space-xs);order:2}}.hero--secondary .hero__content .hero__image{flex:1 1 100%;height:150px;min-width:0;-o-object-fit:cover;object-fit:cover;width:100%}@media (min-width:600px){.hero--secondary .hero__content .hero__image{flex:0 0 250px;order:3}}.hero--tertiary{background-color:var(--ui-gray-xdark)}.hero--tertiary .hero__content{color:var(--ui-white);display:flex;flex-flow:column nowrap;margin:0 auto;max-width:1280px;padding:var(--space-l) var(--space);width:100%}.hero--tertiary .hero__content .hero__heading{margin-bottom:var(--space-s)}.hero--tertiary .hero__content .hero__heading:last-child,.hero--tertiary .hero__content p{margin-bottom:0}.hero--campaign{align-items:center;display:flex;justify-content:center;margin-bottom:var(--space-xxl);min-height:300px;overflow:visible;padding:var(--space-l);position:relative}@media (min-width:600px){.hero--campaign{padding:0}}.hero--campaign .hero__content{align-items:center;background-color:var(--ui-black);color:var(--ui-white);display:flex;flex-flow:column nowrap;min-height:320px}.hero--campaign .hero__content .interior{flex:0 0 100%;padding:var(--space-l)}@media (min-width:600px){.hero--campaign .hero__content .interior{flex:0 0 50%;max-width:960px}}.hero--campaign .hero__content a{color:inherit;display:inline-block}@media (min-width:600px){.hero--campaign .hero__content{flex:0 0 90%;flex-flow:row nowrap;max-width:var(--breakpoint-xl);position:relative;top:var(--space-xxl)}}.hero--campaign .hero__content+.placeholder{flex:0 1 200px;margin-left:var(--space-xl)}.hero--campaign .hero__image{flex:1 1 100%;min-width:0;-o-object-fit:cover;object-fit:cover;width:100%}@media (min-width:600px){.hero--campaign .hero__image{flex:0 0 50%;height:320px}}.horizontal-rule{background-color:#e0e0e0;border:0;height:2px;margin-bottom:var(--space-s);margin-top:var(--space-s)}.horizontal-rule--left{margin-left:0}.horizontal-rule--right{margin-right:0}.image{display:block;height:auto;max-width:100%}.image--circle{border-radius:50%}.nypl-ds figure{margin:unset}.figure__image{margin-bottom:var(--space-xxs)}.figure__image--circle{border-radius:50%}.figure__figcaption{font-style:italic}.figcaption__caption,.figcaption__credit{font-size:var(--font-size--1);margin-bottom:var(--space-xxs)}.label{align-items:baseline;display:flex;font-weight:500;justify-content:space-between;margin-bottom:var(--space-xs)}.label__required-helper{font-size:var(--font-size--1);font-weight:300}.fieldset{border:none;margin:0;padding:0}.legend{border:0;font-weight:500}.list{margin:unset}.list__definition-list{border-bottom:1px solid var(--ui-gray-light)}.list__definition-list h2{border-top:3px solid var(--section-research-primary);margin:0;padding:var(--space-xs) 0 0}.list__definition-list dl{display:grid;grid-template-columns:100%;grid-template-rows:1fr;margin:var(--space-xs) 0 0}.list__definition-list dl dt{border-top:1px solid var(--ui-gray-light);font-size:var(--font-size-0);font-weight:700;padding-bottom:0;padding-top:var(--space-s)}@media (min-width:600px){.list__definition-list dl dt{padding-bottom:var(--space-s);padding-right:var(--space-m)}}.list__definition-list dl dd{border-top:none;font-size:var(--font-size-0);margin:0;padding-bottom:var(--space-s)}@media (min-width:600px){.list__definition-list dl dd{border-top:1px solid var(--ui-gray-light);padding-top:var(--space-s)}.list__definition-list dl{grid-template-columns:225px 1fr}}.list--no-list-styling{list-style:none;margin:0;padding:0}ul.list{list-style:none}ul.list li:before{color:var(--ui-gray-medium);content:"\2022";display:inline-block;font-weight:700;margin-left:-1em;width:1em}ul.list--no-list-styling li:before{content:unset}.no-scroll{overflow:hidden;position:fixed;top:-100vh}.modal{background-color:var(--ui-gray-warm-xlight);height:100vh;left:0;overflow-y:auto;padding:var(--space-s);position:fixed;top:0;width:100vw;z-index:999}.notification{border-radius:4px;display:flex;font-size:var(--font-size--1);margin:var(--space-s);padding:var(--space) var(--space-l);position:relative}.notification__container{margin:auto;max-width:var(--breakpoint-large);width:100%}.notification .content__container{display:flex;justify-content:center}.notification .notification-content{width:100%}.notification--centered{text-align:center}.notification--centered header{justify-content:center}.notification--centered .content{display:block}.notification--no-margin{border-radius:0;margin:0}.notification--standard{background-color:var(--ui-status-primary)}.notification--announcement{background-color:var(--ui-gray-light)}.notification--announcement .notification-heading{color:var(--section-research-secondary)}.notification--warning{background-color:var(--ui-gray-xxlight)}.notification--warning .notification-content,.notification--warning .notification-heading{color:var(--brand-primary)}.notification--align-text .notification-content{padding-left:calc(var(--space-m) + var(--space-s))}.notification header{display:flex;margin-bottom:var(--space-s)}.notification header .notification-heading{margin-bottom:0}.notification .icon{flex-shrink:0;margin-right:var(--space-s)}.notification .dismissible-button{align-items:center;background-color:inherit;color:var(--ui-black);display:flex;height:var(--space-l);padding:0;position:absolute;right:var(--space-xs);top:var(--space-xs);width:var(--space-l)}@media (min-width:960px){.notification .dismissible-button{height:var(--space-m);width:var(--space-m)}}.notification .dismissible-button .icon{height:var(--space-m);margin-right:0;width:var(--space-m)}.pagination{align-items:stretch;display:flex;margin-bottom:var(--space-l);width:100%}.pagination>:not(:last-child){margin-right:var(--space-xs)}.pagination__list{display:flex;list-style:none;margin:0;padding:0}.pagination__item{list-style-type:none;margin-right:var(--space-xs)}.pagination__link{line-height:1.15;text-decoration:none}.pagination__link.selected{color:var(--ui-black);pointer-events:none}.pagination__link.disabled{color:var(--ui-gray-dark);pointer-events:none}.search-bar{display:flex;flex-flow:column nowrap}@media (min-width:600px){.search-bar{flex-flow:row nowrap}}.search-bar .select{flex:1 1 25%}.search-bar .button,.select{margin-bottom:var(--space-xs)}.select .selectfield{-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--ui-white);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M10.526 12.871.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 0 1-2.948 0z'/%3E%3C/svg%3E");background-position:right .7em top 70%;background-repeat:no-repeat;background-size:var(--space) auto;border:1px solid var(--ui-gray-medium);border-radius:2px;display:block;font-size:1rem;padding:var(--space-xs) var(--space-xl) var(--space-xs) var(--space-s);width:100%}.select .selectfield::-ms-expand{display:none}.select .selectfield:hover{border-color:var(--ui-gray-medium)}.select .selectfield:active,.select .selectfield:focus{border:1px solid var(--ui-focus);box-shadow:0;outline:1px solid var(--ui-focus);z-index:9999}.select .selectfield:disabled{background-color:var(--ui-gray-xxlight);color:var(--ui-gray-xdark)}.select .selectfield--error,.select .selectfield--error:active,.select .selectfield--error:active:hover,.select .selectfield--error:focus,.select .selectfield--error:focus:hover,.select .selectfield--error:hover{border:1px solid var(--ui-error)}.select>.helper-text{margin-bottom:0;margin-top:var(--space-xs)}:root:lang(ar) .nypl-ds .select,:root:lang(iw) .nypl-ds .select,[dir=rtl] .nypl-ds .select{background-position:left .7em top 70%;padding:var(--space-xs) var(--space-l) var(--space-xs) var(--space-s)}.select-css:disabled,.select-css[aria-disabled=true]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.526 12.871.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 0 1-2.948 0z'/%3E%3C/svg%3E");color:var(--ui-gray-xdark)}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:#aaa}.skeleton-loader{margin:auto;width:100%}.skeleton-loader .skeleton-section{margin-bottom:var(--space-s)}.skeleton-loader .skeleton-section:last-child{margin-bottom:0}.skeleton-loader .skeleton-element{border-radius:2px;box-sizing:border-box;margin-bottom:var(--space-xs)}.skeleton-loader .skeleton-element:last-child{margin-bottom:0}.skeleton-loader .skeleton-loader-image{-webkit-animation:Pulsate 1s cubic-bezier(.25,-.5,1,0) infinite;animation:Pulsate 1s cubic-bezier(.25,-.5,1,0) infinite;background:var(--ui-gray-warm-light);box-sizing:border-box;height:0;overflow:hidden;padding-bottom:100%;position:relative;width:100%}.skeleton-loader .skeleton-loader-image--square{padding-bottom:100%}.skeleton-loader .skeleton-loader-image--portrait{padding-bottom:200%}.skeleton-loader .skeleton-loader-image--landscape{padding-bottom:50%}.skeleton-loader .skeleton-loader-heading{-webkit-animation:Pulsate 1s cubic-bezier(.25,-.5,1,0) infinite;animation:Pulsate 1s cubic-bezier(.25,-.5,1,0) infinite;background:var(--ui-gray-warm-light);height:32px}.skeleton-loader .skeleton-loader-heading:last-child{width:80%}.skeleton-loader .skeleton-loader-content{-webkit-animation:Pulsate 1s cubic-bezier(.25,-.5,1,0) infinite;animation:Pulsate 1s cubic-bezier(.25,-.5,1,0) infinite;background:var(--ui-gray-warm-light);height:20px}.skeleton-loader .skeleton-loader-content:last-child{width:30%}.skeleton-loader .skeleton-loader-button{-webkit-animation:Pulsate 1s cubic-bezier(.25,-.5,1,0) infinite;animation:Pulsate 1s cubic-bezier(.25,-.5,1,0) infinite;background:var(--ui-gray-warm-light);border-radius:16px;height:32px;margin:auto;max-width:160px;width:100%}.skeleton-loader--border{border:1px solid var(--ui-gray-light);padding:var(--space-s)}@media (min-width:600px){.skeleton-loader--horizontal{display:flex}.skeleton-loader--horizontal .skeleton-section{margin-right:var(--space-m)}.skeleton-loader--horizontal .skeleton-section:last-child{margin-right:0}.skeleton-loader--horizontal>.skeleton-section:first-child{margin-bottom:0}.skeleton-loader--horizontal .skeleton-loader-image{height:0;overflow:visible;padding-bottom:0;position:relative;width:220px}.skeleton-loader--horizontal .skeleton-loader-image--square{height:220px}.skeleton-loader--horizontal .skeleton-loader-image--portrait{height:440px}.skeleton-loader--horizontal .skeleton-loader-image--landscape{height:110px}.skeleton-loader--horizontal .skeleton-loader-button{margin:0}}@-webkit-keyframes Pulsate{0%{opacity:.9}50%{opacity:.6}to{opacity:.9}}@keyframes Pulsate{0%{opacity:.9}50%{opacity:.6}to{opacity:.9}}.status-badge{border-radius:var(--space-xxs);color:var(--ui-black);display:block;font-size:var(--font-size--1);font-style:italic;padding:var(--space-xxs) var(--space-xs);text-align:center;width:-webkit-fit-content;width:fit-content;width:-moz-fit-content}.status-badge--low{background-color:var(--ui-gray-light)}.status-badge--medium{background-color:#f9e08e}.status-badge--high{background-color:#fbe7e1}.main{display:block;margin:0 auto;max-width:1280px;padding:0 var(--space);width:100%}.main--with-sidebar{display:flex;flex-flow:column nowrap}@media (min-width:600px){.main--with-sidebar{flex-flow:row wrap}}.content-header{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);width:100vw}.content-top{flex:1 0 100%}.content-primary{flex:1 1;width:100%}.content-primary--with-sidebar-left{display:flex;flex-flow:column nowrap;order:1}@media (min-width:600px){.content-primary--with-sidebar-left{margin-right:0;min-width:0}}.content-secondary{flex:0 0 25%}@media (min-width:600px){.content-secondary{order:1}.content-secondary--with-sidebar-left{flex-basis:calc(25% - var(--space-s)*4);margin-right:var(--space-l)}.content-secondary--with-sidebar-right{flex-basis:calc(25% - var(--space-s)*4);margin-left:var(--space-l)}}.video-player__inside{height:0;overflow:hidden;padding-bottom:56.25%;position:relative}.video-player__inside--four-by-three{padding-bottom:75%}.video-player__inside--square{padding-bottom:100%}.video-player__inside--errored{background-color:var(--ui-gray-warm-light);height:auto;padding:var(--space-s)}.video-player__inside embed,.video-player__inside iframe,.video-player__inside object{height:100%;left:0;margin:auto;position:absolute;top:0;width:100%}.video-player>.helper-text{margin-bottom:0;margin-top:var(--space-xs)}
3
+ /*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */@font-face{font-family:system-ui;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Segoe UI Light"),local("Ubuntu Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Light Italic"),local("Ubuntu Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Italic"),local("Ubuntu Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Segoe UI Semibold"),local("Ubuntu Medium"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Segoe UI Semibold Italic"),local("Ubuntu Medium Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Segoe UI Bold"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Segoe UI Bold Italic"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:"";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{margin-left:-4px;position:absolute;width:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:after,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:after,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before{border:8px solid transparent;box-sizing:content-box;content:"";height:0;left:-8px;position:absolute;width:1px;z-index:-1}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before{border-bottom-color:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{margin-top:-8px;top:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:after,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before{border-bottom-color:#f0f0f0;border-top:none}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:after{top:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before{border-bottom-color:#aeaeae;top:-1px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{bottom:0;margin-bottom:-8px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:after,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before{border-bottom:none;border-top-color:#fff}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:after{bottom:0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before{border-top-color:#aeaeae;bottom:-1px}.react-datepicker-wrapper{border:0;display:inline-block;padding:0}.react-datepicker{background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;color:#000;display:inline-block;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;position:relative}.react-datepicker--time-only .react-datepicker__triangle{left:35px}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__triangle{left:50px;position:absolute}.react-datepicker-popper{z-index:1}.react-datepicker-popper[data-placement^=bottom]{padding-top:10px}.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle,.react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle{left:auto;right:50px}.react-datepicker-popper[data-placement^=top]{padding-bottom:10px}.react-datepicker-popper[data-placement^=right]{padding-left:8px}.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle{left:auto;right:42px}.react-datepicker-popper[data-placement^=left]{padding-right:8px}.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle{left:42px;right:auto}.react-datepicker__header{background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative;text-align:center}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select{display:inline-block;margin:0 2px}.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month{color:#000;font-size:.944rem;font-weight:700;margin-top:0}.react-datepicker-time__header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__navigation{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;overflow:hidden;padding:0;position:absolute;text-align:center;text-indent:-999em;top:2px;width:32px;z-index:1}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{display:block;margin-left:auto;margin-right:auto;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{font-size:20px;position:relative;top:-1px}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;margin:2px;width:4rem}.react-datepicker__input-time-container{clear:both;float:left;margin:5px 0 10px 15px;text-align:left;width:100%}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{display:inline-block;margin-left:5px}.react-datepicker__time-container{border-left:1px solid #aeaeae;float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.3rem;display:inline;position:absolute;right:-72px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.3rem;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:.3rem;margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:content-box;height:calc(195px + .85rem);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:transparent;cursor:default}.react-datepicker__week-number{color:#ccc;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day-names,.react-datepicker__week{white-space:nowrap}.react-datepicker__day-names{margin-bottom:-8px}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{color:#000;display:inline-block;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker__month--in-range,.react-datepicker__month--in-selecting-range,.react-datepicker__month--selected,.react-datepicker__quarter--in-range,.react-datepicker__quarter--in-selecting-range,.react-datepicker__quarter--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__month--in-range:hover,.react-datepicker__month--in-selecting-range:hover,.react-datepicker__month--selected:hover,.react-datepicker__quarter--in-range:hover,.react-datepicker__quarter--in-selecting-range:hover,.react-datepicker__quarter--selected:hover{background-color:#1d5d90}.react-datepicker__month--disabled,.react-datepicker__quarter--disabled{color:#ccc;pointer-events:none}.react-datepicker__month--disabled:hover,.react-datepicker__quarter--disabled:hover{background-color:transparent;cursor:default}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{background-color:#3dcc4a;border-radius:.3rem;color:#fff}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__year-text--in-range:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--selected:hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#2a87d0;border-radius:.3rem;color:#fff}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range{background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range,.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range,.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range,.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range{background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{color:#ccc;cursor:default}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:transparent}.react-datepicker__month-text.react-datepicker__month--in-range:hover,.react-datepicker__month-text.react-datepicker__month--selected:hover,.react-datepicker__month-text.react-datepicker__quarter--in-range:hover,.react-datepicker__month-text.react-datepicker__quarter--selected:hover,.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,.react-datepicker__quarter-text.react-datepicker__month--selected:hover,.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover,.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover{background-color:#216ba5}.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover{background-color:#f0f0f0}.react-datepicker__input-container{display:inline-block;position:relative;width:100%}.react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view{border:1px solid transparent;border-radius:.3rem;position:relative}.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover{cursor:pointer}.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{right:-16px;top:0;transform:rotate(135deg)}.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown{background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;left:25%;position:absolute;text-align:center;top:30px;width:50%;z-index:1}.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover{cursor:pointer}.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option{display:block;line-height:20px;margin-left:auto;margin-right:auto;width:100%}.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover{background-color:#ccc}.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected{left:15px;position:absolute}.react-datepicker__close-icon{background-color:transparent;border:0;cursor:pointer;display:table-cell;height:100%;outline:0;padding:0 6px 0 0;position:absolute;right:0;top:0;vertical-align:middle}.react-datepicker__close-icon:after{background-color:#216ba5;border-radius:50%;color:#fff;content:"\00d7";cursor:pointer;display:table-cell;font-size:12px;height:16px;line-height:1;padding:2px;text-align:center;vertical-align:middle;width:16px}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:rgba(0,0,0,.8);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:3rem;width:3rem}@media (max-height:550px),(max-width:400px){.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:2rem;width:2rem}}.react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month{font-size:1.44rem}:root{--nypl-breakpoint-small:320px;--nypl-breakpoint-medium:600px;--nypl-breakpoint-large:960px;--nypl-breakpoint-xl:1280px}.container{padding:var(--nypl-space-s)}.nypl-ds{box-sizing:border-box;color:var(--nypl-colors-ui-black);font-family:var(--nypl-fonts-body);font-size:16px;font-weight:300;line-height:1.5;overflow-x:hidden}.nypl-ds p{margin:0 0 var(--nypl-space-s)}.nypl-ds *,.nypl-ds :after,.nypl-ds :before{box-sizing:inherit}.nypl-ds [contentEditable=true]:focus,.nypl-ds [href]:focus,.nypl-ds [tabindex]:focus,.nypl-ds button:not([disabled]):focus,.nypl-ds iframe:focus,.nypl-ds input:not([disabled]):focus,.nypl-ds select:not([disabled]):focus,.nypl-ds textarea:not([disabled]):focus{outline:2px solid var(--nypl-colors-ui-focus);outline-offset:2px;z-index:9999}.placeholder{--color-place-holder:var(--nypl-colors-ui-gray-dark);align-items:center;border:4px dashed var(--color-place-holder);color:var(--color-place-holder);display:flex;font-size:3rem;justify-content:center;line-height:1.4;margin-bottom:var(--nypl-space-l);padding:4rem 1rem;width:100%}@media (min-width:960px){.placeholder{margin-bottom:var(--nypl-space-xl)}}.placeholder--full{margin-bottom:var(--nypl-space-xxl)}@media (min-width:960px){.placeholder--full{margin-bottom:var(--nypl-space-xxxl)}}.placeholder--short{padding:1rem}.card-edition{align-items:flex-start;border:1px solid var(--nypl-colors-ui-gray-light-cool);border-radius:5px;display:flex;flex-flow:column wrap;margin-bottom:var(--nypl-space-s);padding:var(--nypl-space-s) var(--nypl-space-l)}.card-edition__footer,.card-edition__heading{flex:100%}.card-edition__columns{display:flex;flex-flow:column wrap;justify-content:space-between;width:100%}@media (min-width:600px){.card-edition__columns{flex-flow:row wrap}}.card-edition__columns+.card-edition__footer{margin-top:var(--nypl-space-xs)}.card-edition__image{align-items:center;background-color:var(--nypl-colors-ui-gray-x-light-cool);display:flex;flex:0 0 150px;height:150px;justify-content:center;margin-bottom:var(--nypl-space-s)}.card-edition__image .image{max-height:100%;max-width:100%}@media (min-width:600px){.card-edition__image{align-self:center;margin-bottom:0;margin-right:var(--nypl-space-s);width:150px}}.card-edition__content{flex:1 1;margin-bottom:var(--nypl-space-s)}@media (min-width:600px){.card-edition__content{margin-bottom:0;margin-right:var(--nypl-space-s)}}.card-edition__ctas{flex:0 1 20%}@media (min-width:600px){.card-edition__ctas{margin-right:var(--nypl-space-s)}}.card-edition__content+.card-edition__ctas{margin-right:var(--nypl-space-s)}.sb-show-main .var-docs{padding:0 0 var(--nypl-space-s) 0}.sb-show-main .example-card-edition .card__content>*{margin-bottom:var(--nypl-space-xxs)}.sb-show-main .example-card-edition .book__callout{font-size:var(--nypl-fontSizes-1);font-style:italic;font-weight:400;font-weight:300;line-height:1.15;margin:0 0 .5em;width:auto}.sb-show-main .example-card-edition .book__callout__link,.sb-show-main .example-card-edition .book__callout__link:hover{color:inherit}.sb-show-main .example-card-edition .card__ctas{align-items:flex-end;display:flex;flex-flow:row wrap;justify-content:center;text-align:center}.sb-show-main .example-card-edition .card__ctas .button{width:100%}.sb-show-main .example-card-edition .card__ctas>*{margin-bottom:var(--nypl-space-xxs)}.sb-show-main .example-card-edition .book__filetype{margin-bottom:var(--nypl-space-s)}.sb-show-main .example-card-edition .book__description{font-style:italic}.input,.react-autosuggest__input{border:1px solid var(--nypl-colors-ui-gray-medium);margin-bottom:var(--nypl-space-xs);padding:var(--nypl-space-xs)}.input[type=number],.input[type=password],.input[type=text],.react-autosuggest__input[type=number],.react-autosuggest__input[type=password],.react-autosuggest__input[type=text]{width:100%}.input[type=radio],.react-autosuggest__input[type=radio]{width:unset}.input[type=radio]+.label,.react-autosuggest__input[type=radio]+.label{display:unset;margin-left:var(--nypl-space-s)}.input::-webkit-input-placeholder,.react-autosuggest__input::-webkit-input-placeholder{color:var(--nypl-colors-ui-gray-dark)}.input:-moz-placeholder,.react-autosuggest__input:-moz-placeholder{color:var(--nypl-colors-ui-gray-dark)}.input:-ms-input-placeholder,.react-autosuggest__input:-ms-input-placeholder{color:var(--nypl-colors-ui-gray-dark)}.input:hover,.react-autosuggest__input:hover{border-color:var(--nypl-colors-ui-gray-dark)}.input:disabled,.react-autosuggest__input:disabled{background-color:var(--nypl-colors-ui-gray-xx-light-cool);color:var(--nypl-colors-ui-gray-xdark)}.input:active,.input:active:hover,.input:focus,.input:focus:hover,.react-autosuggest__input:active,.react-autosuggest__input:active:hover,.react-autosuggest__input:focus,.react-autosuggest__input:focus:hover{border:1px solid var(--nypl-colors-ui-focus);box-shadow:0;outline:1px solid var(--nypl-colors-ui-focus);z-index:9999}.input--error{border:1px solid var(--nypl-colors-ui-error-primary)}@media (min-width:400px){.input-group{display:flex;justify-content:space-between}.input-group>:not(:last-child){margin-right:var(--nypl-space-m)}}.fieldset{border:none;margin:0;padding:0}.legend{border:0;font-weight:500}.react-autosuggest__container{display:inline;position:relative;width:100%}.react-autosuggest__input--focused{outline:none}.react-autosuggest__input--open{border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.react-autosuggest__suggestions-container{display:none;width:100%}.react-autosuggest__suggestions-container--open{background-color:var(--nypl-colors-ui-white);display:block;font-weight:300;margin-top:-6px;outline:1px solid var(--nypl-colors-ui-gray-light-cool);position:absolute;width:100%;z-index:2}.react-autosuggest__suggestions-list{list-style-type:none;margin:0;padding:0}.react-autosuggest__suggestion{cursor:pointer;padding:var(--nypl-space-xs)}.react-autosuggest__suggestion--highlighted{background-color:var(--nypl-colors-ui-gray-light-cool)}.auto-suggest-bottom{padding:var(--nypl-space-xs)}.date-picker-calendar .react-datepicker__year-wrapper{max-width:220px}.date-picker-calendar .react-datepicker__day--in-range.react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__month--in-range.react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__year--in-range.react-datepicker__day--in-range{opacity:.5}.date-picker-calendar .react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__day--in-selecting-range,.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__day-text--keyboard-selected,.date-picker-calendar .react-datepicker__month--in-range,.date-picker-calendar .react-datepicker__month--in-selecting-range,.date-picker-calendar .react-datepicker__month--keyboard-selected,.date-picker-calendar .react-datepicker__month-text--keyboard-selected,.date-picker-calendar .react-datepicker__year--in-range,.date-picker-calendar .react-datepicker__year--in-selecting-range,.date-picker-calendar .react-datepicker__year--keyboard-selected,.date-picker-calendar .react-datepicker__year-text--keyboard-selected{background-color:var(--nypl-colors-ui-black);border-radius:0;color:var(--nypl-colors-ui-white);opacity:.3}.date-picker-calendar .react-datepicker__day--selected,.date-picker-calendar .react-datepicker__day-text--selected,.date-picker-calendar .react-datepicker__month--selected,.date-picker-calendar .react-datepicker__month-text--selected,.date-picker-calendar .react-datepicker__year--selected,.date-picker-calendar .react-datepicker__year-text--selected{background-color:var(--nypl-colors-ui-black);border-radius:0;color:var(--nypl-colors-ui-white);opacity:1}.date-picker-calendar .react-datepicker__triangle{transform:translate(32px)!important}.no-scroll{overflow:hidden;position:fixed;top:-100vh}.modal{background-color:var(--nypl-colors-ui-gray-x-light-warm);height:100vh;left:0;overflow-y:auto;padding:var(--nypl-space-s);position:fixed;top:0;width:100vw;z-index:999}
package/dist/theme/components/accordion.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ declare const Accordion: {
2
+ parts: string[];
3
+ baseStyle: {
4
+ container: {
5
+ borderLeftWidth: string;
6
+ borderRightWidth: string;
7
+ borderColor: string;
8
+ width: string;
9
+ };
10
+ button: {
11
+ border: string;
12
+ fontWeight: number;
13
+ _hover: {
14
+ bg: string;
15
+ };
16
+ };
17
+ panel: {
18
+ paddingTop: string;
19
+ paddingRight: string;
20
+ paddingLeft: string;
21
+ paddingBottom: string;
22
+ };
23
+ };
24
+ };
25
+ export default Accordion;
package/dist/theme/components/breadcrumb.d.ts ADDED
@@ -0,0 +1,90 @@
1
+ declare const Breadcrumb: {
2
+ baseStyle: {
3
+ bg: string;
4
+ color: string;
5
+ fontSize: string;
6
+ fontWeight: string;
7
+ paddingBottom: string;
8
+ paddingTop: string;
9
+ ol: {
10
+ alignItems: {
11
+ base: string;
12
+ md: string;
13
+ };
14
+ display: {
15
+ base: string;
16
+ md: string;
17
+ };
18
+ margin: string;
19
+ maxWidth: string;
20
+ paddingLeft: string;
21
+ paddingRight: string;
22
+ };
23
+ a: {
24
+ _hover: {
25
+ color: string;
26
+ };
27
+ };
28
+ "li:last-child": {
29
+ fontWeight: {
30
+ base: string;
31
+ md: string;
32
+ };
33
+ ".chakra-breadcrumb__link": {
34
+ _hover: {
35
+ cursor: string;
36
+ textDecoration: string;
37
+ };
38
+ };
39
+ ".icon": {
40
+ display: string;
41
+ };
42
+ };
43
+ "li:not(:last-child)": {
44
+ display: {
45
+ base: string;
46
+ md: string;
47
+ };
48
+ a: {
49
+ marginRight: {
50
+ base: string;
51
+ md: string;
52
+ };
53
+ };
54
+ ".icon": {
55
+ display: {
56
+ base: string;
57
+ md: string;
58
+ };
59
+ };
60
+ "span:not(.breadcrumb-label)": {
61
+ marginInlineEnd: string;
62
+ marginInlineStart: string;
63
+ };
64
+ };
65
+ "li:nth-last-child(2)": {
66
+ display: string;
67
+ span: {
68
+ display: {
69
+ base: string;
70
+ md: string;
71
+ };
72
+ };
73
+ };
74
+ };
75
+ variants: {
76
+ booksAndMore: {
77
+ bg: string;
78
+ };
79
+ locations: {
80
+ bg: string;
81
+ };
82
+ research: {
83
+ bg: string;
84
+ };
85
+ whatsOn: {
86
+ bg: string;
87
+ };
88
+ };
89
+ };
90
+ export default Breadcrumb;
package/dist/theme/components/button.d.ts CHANGED
@@ -6,10 +6,15 @@ declare const Button: {
6
6
  cursor: string;
7
7
  color: string;
8
8
  justifyContent: string;
9
- py: number;
10
- px: number;
9
+ py: string;
10
+ px: string;
11
11
  textDecoration: string;
12
12
  wordWrap: string;
13
+ fontWeight: string;
14
+ svg: {
15
+ fill: string;
16
+ marginTop: string;
17
+ };
13
18
  _hover: {
14
19
  bg: string;
15
20
  };
@@ -23,22 +28,19 @@ declare const Button: {
23
28
  opacity: string;
24
29
  };
25
30
  };
26
- sizes: {
27
- lg: {
28
- width: string;
29
- };
30
- };
31
31
  variants: {
32
32
  primary: {
33
33
  bg: string;
34
34
  minWidth: string;
35
35
  height: string;
36
+ fontSize: string;
36
37
  };
37
38
  secondary: {
38
39
  bg: string;
39
40
  border: string;
40
41
  borderColor: string;
41
42
  color: string;
43
+ fontSize: string;
42
44
  _hover: {
43
45
  bg: string;
44
46
  };
@@ -62,14 +64,15 @@ declare const Button: {
62
64
  borderColor: string;
63
65
  color: string;
64
66
  borderRadius: string;
65
- py: number;
66
- paddingInlineStart: number;
67
- paddingInlineEnd: number;
67
+ py: string;
68
+ paddingInlineStart: string;
69
+ paddingInlineEnd: string;
70
+ fontSize: string;
68
71
  _hover: {
69
72
  bg: string;
70
73
  };
71
74
  };
72
- "icon-only": {
75
+ iconOnly: {
73
76
  bg: string;
74
77
  border: string;
75
78
  borderColor: string;
@@ -77,11 +80,12 @@ declare const Button: {
77
80
  _hover: {
78
81
  bg: string;
79
82
  };
80
- paddingInlineStart: number;
81
- paddingInlineEnd: number;
83
+ paddingInlineStart: string;
84
+ paddingInlineEnd: string;
82
85
  };
83
86
  callout: {
84
87
  bg: string;
88
+ fontSize: string;
85
89
  _hover: {
86
90
  bg: string;
87
91
  };
@@ -89,11 +93,31 @@ declare const Button: {
89
93
  bg: string;
90
94
  };
91
95
  };
96
+ searchBar: {
97
+ borderLeftRadius: string;
98
+ borderRightRadius: {
99
+ base: string;
100
+ md: string;
101
+ };
102
+ lineHeight: string;
103
+ bg: string;
104
+ minWidth: string;
105
+ height: string;
106
+ fontSize: string;
107
+ };
108
+ noBrand: {
109
+ bg: string;
110
+ color: string;
111
+ _hover: {
112
+ bg: string;
113
+ };
114
+ minWidth: string;
115
+ height: string;
116
+ fontSize: string;
117
+ };
92
118
  };
93
119
  defaultProps: {
94
- size: string;
95
120
  variant: string;
96
- colorScheme: string;
97
121
  };
98
122
  };
99
123
  export default Button;
package/dist/theme/components/card.d.ts ADDED
@@ -0,0 +1,168 @@
1
+ declare const _default: {
2
+ Card: {
3
+ parts: string[];
4
+ baseStyle: (props: any) => {
5
+ display: string;
6
+ flexFlow: {
7
+ base: string;
8
+ md: string;
9
+ };
10
+ maxWidth: string;
11
+ textAlign: string;
12
+ alignItems: string;
13
+ border: string;
14
+ borderColor: string;
15
+ heading: {
16
+ marginBottom: string;
17
+ };
18
+ body: {
19
+ display: {
20
+ md: string;
21
+ };
22
+ flexFlow: {
23
+ md: string;
24
+ };
25
+ margin: any;
26
+ padding: any;
27
+ };
28
+ } | {
29
+ display: string;
30
+ flexFlow: string;
31
+ maxWidth?: undefined;
32
+ textAlign: string;
33
+ alignItems: string;
34
+ border: string;
35
+ borderColor: string;
36
+ heading: {
37
+ marginBottom: string;
38
+ };
39
+ body: {
40
+ display: {
41
+ md: string;
42
+ };
43
+ flexFlow: {
44
+ md: string;
45
+ };
46
+ margin: any;
47
+ padding: any;
48
+ };
49
+ } | {
50
+ display: string;
51
+ flexFlow: {
52
+ base: string;
53
+ md: string;
54
+ };
55
+ maxWidth: string;
56
+ textAlign: string;
57
+ alignItems: string;
58
+ border?: undefined;
59
+ borderColor?: undefined;
60
+ heading: {
61
+ marginBottom: string;
62
+ };
63
+ body: {
64
+ display: {
65
+ md: string;
66
+ };
67
+ flexFlow: {
68
+ md: string;
69
+ };
70
+ margin: any;
71
+ padding: any;
72
+ };
73
+ } | {
74
+ display: string;
75
+ flexFlow: string;
76
+ maxWidth?: undefined;
77
+ textAlign: string;
78
+ alignItems: string;
79
+ border?: undefined;
80
+ borderColor?: undefined;
81
+ heading: {
82
+ marginBottom: string;
83
+ };
84
+ body: {
85
+ display: {
86
+ md: string;
87
+ };
88
+ flexFlow: {
89
+ md: string;
90
+ };
91
+ margin: any;
92
+ padding: any;
93
+ };
94
+ };
95
+ };
96
+ CardActions: {
97
+ baseStyle: (props: any) => {
98
+ justifyContent: any;
99
+ borderColor: string;
100
+ borderBottom: string;
101
+ paddingBottom: string;
102
+ borderTop: string;
103
+ paddingTop: string;
104
+ marginBottom: string;
105
+ columnGap: string;
106
+ display: string;
107
+ _last: {
108
+ marginBottom: string;
109
+ };
110
+ } | {
111
+ justifyContent: any;
112
+ borderColor: string;
113
+ borderBottom?: undefined;
114
+ paddingBottom?: undefined;
115
+ borderTop: string;
116
+ paddingTop: string;
117
+ marginBottom: string;
118
+ columnGap: string;
119
+ display: string;
120
+ _last: {
121
+ marginBottom: string;
122
+ };
123
+ } | {
124
+ justifyContent: any;
125
+ borderColor: string;
126
+ borderBottom: string;
127
+ paddingBottom: string;
128
+ borderTop?: undefined;
129
+ paddingTop?: undefined;
130
+ marginBottom: string;
131
+ columnGap: string;
132
+ display: string;
133
+ _last: {
134
+ marginBottom: string;
135
+ };
136
+ } | {
137
+ justifyContent: any;
138
+ borderColor: string;
139
+ borderBottom?: undefined;
140
+ paddingBottom?: undefined;
141
+ borderTop?: undefined;
142
+ paddingTop?: undefined;
143
+ marginBottom: string;
144
+ columnGap: string;
145
+ display: string;
146
+ _last: {
147
+ marginBottom: string;
148
+ };
149
+ };
150
+ };
151
+ CardContent: {
152
+ baseStyle: {
153
+ marginBottom: string;
154
+ _last: {
155
+ marginBottom: string;
156
+ };
157
+ };
158
+ };
159
+ CardImage: {
160
+ baseStyle: ({ center, imageSize, imageAtEnd, layout }: {
161
+ center: any;
162
+ imageSize: any;
163
+ imageAtEnd: any;
164
+ layout: any;
165
+ }) => any;
166
+ };
167
+ };
168
+ export default _default;