@nypl/design-system-react-components 0.26.1 → 1.0.0

package/dist/helpers/types.d.ts

@@ -0,0 +1 @@
+export declare type LayoutTypes = "column" | "row";

package/dist/index.d.ts

@@ -1,69 +1,48 @@
 import "./styles.scss";
-export { Box, ButtonGroup, Center, Circle, Flex, Grid, GridItem, HStack, Spacer, Square, Stack, VStack, } from "@chakra-ui/react";
-export { default as Accordion } from "./components/Accordion/Accordion";
-export { AccordionTypes } from "./components/Accordion/AccordionTypes";
-export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
-export { BreadcrumbsTypes } from "./components/Breadcrumbs/BreadcrumbsTypes";
-export { default as Button } from "./components/Button/Button";
-export { ButtonTypes } from "./components/Button/ButtonTypes";
+export { Box, Center, Circle, Flex, Grid, GridItem, HStack, Spacer, Square, Stack, VStack, } from "@chakra-ui/react";
+export { default as Accordion, AccordionTypes, } from "./components/Accordion/Accordion";
+export { default as Breadcrumbs, BreadcrumbsTypes, } from "./components/Breadcrumbs/Breadcrumbs";
+export { default as Button, ButtonTypes } from "./components/Button/Button";
+export { default as ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
 export { default as Card, CardActions, CardContent, CardHeading, } from "./components/Card/Card";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
-export { default as DatePicker, FullDateType, } from "./components/DatePicker/DatePicker";
-export { DatePickerTypes } from "./components/DatePicker/DatePickerTypes";
+export { default as DatePicker, DatePickerTypes, FullDateType, } from "./components/DatePicker/DatePicker";
 export { default as DSProvider } from "./theme/provider";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
-export { FormGaps } from "./components/Form/FormTypes";
-export { GridGaps } from "./components/Grid/GridTypes";
-export { default as Heading } from "./components/Heading/Heading";
-export { HeadingSizes, HeadingLevels } from "./components/Heading/HeadingTypes";
+export { default as Heading, HeadingSizes, HeadingLevels, } from "./components/Heading/Heading";
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
-export { default as Hero } from "./components/Hero/Hero";
-export { HeroTypes } from "./components/Hero/HeroTypes";
+export { default as Hero, HeroTypes } from "./components/Hero/Hero";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
-export { default as Icon } from "./components/Icons/Icon";
-export { IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, } from "./components/Icons/IconTypes";
-export { default as Image } from "./components/Image/Image";
-export { ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/ImageTypes";
+export { default as Icon, IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, } from "./components/Icons/Icon";
+export { default as Image, ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/Image";
 export { default as Label } from "./components/Label/Label";
-export { LayoutTypes } from "./helpers/enums";
-export { default as Link } from "./components/Link/Link";
-export { LinkTypes } from "./components/Link/LinkTypes";
-export { default as List } from "./components/List/List";
-export { ListTypes } from "./components/List/ListTypes";
-export { default as Logo } from "./components/Logo/Logo";
-export { LogoColors, LogoNames, LogoSizes } from "./components/Logo/LogoTypes";
-export { default as Modal } from "./components/Modal/Modal";
-export { default as Notification } from "./components/Notification/Notification";
-export { NotificationTypes } from "./components/Notification/NotificationTypes";
+export { LayoutTypes } from "./helpers/types";
+export { default as Link, LinkTypes } from "./components/Link/Link";
+export { default as List, ListTypes } from "./components/List/List";
+export { default as Logo, LogoNames, LogoSizes } from "./components/Logo/Logo";
+export { ModalTrigger, useModal } from "./components/Modal/Modal";
+export { default as Notification, NotificationTypes, } from "./components/Notification/Notification";
 export { default as Pagination } from "./components/Pagination/Pagination";
-export { default as ProgressIndicator } from "./components/ProgressIndicator/ProgressIndicator";
-export { ProgressIndicatorSizes, ProgressIndicatorTypes, } from "./components/ProgressIndicator/ProgressIndicatorTypes";
+export { default as ProgressIndicator, ProgressIndicatorSizes, ProgressIndicatorTypes, } from "./components/ProgressIndicator/ProgressIndicator";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
 export { default as SearchBar } from "./components/SearchBar/SearchBar";
-export { default as Select } from "./components/Select/Select";
-export { LabelPositions } from "./components/Select/SelectTypes";
-export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
-export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
-export { SkeletonLoaderImageRatios } from "./components/SkeletonLoader/SkeletonLoaderTypes";
+export { default as Select, LabelPositions } from "./components/Select/Select";
+export { default as SimpleGrid, GridGaps } from "./components/Grid/SimpleGrid";
+export { default as SkeletonLoader, SkeletonLoaderImageRatios, } from "./components/SkeletonLoader/SkeletonLoader";
+export { default as SkipNavigation } from "./components/SkipNavigation/SkipNavigation";
 export { default as Slider } from "./components/Slider/Slider";
-export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
-export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
-export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
-export { StructuredContentImagePosition } from "./components/StructuredContent/StructuredContentTypes";
+export { default as StatusBadge, StatusBadgeTypes, } from "./components/StatusBadge/StatusBadge";
+export { default as StructuredContent, StructuredContentImagePosition, } from "./components/StructuredContent/StructuredContent";
 export { default as Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
 export { TemplateAppContainer, Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, } from "./components/Template/Template";
-export { default as Text } from "./components/Text/Text";
-export { TextSizes } from "./components/Text/TextTypes";
-export { default as TextInput, TextInputRefType, } from "./components/TextInput/TextInput";
-export { TextInputTypes } from "./components/TextInput/TextInputTypes";
-export { default as Toggle } from "./components/Toggle/Toggle";
-export { ToggleSizes } from "./components/Toggle/ToggleTypes";
+export { default as Text, TextSizes } from "./components/Text/Text";
+export { default as TextInput, TextInputRefType, TextInputTypes, } from "./components/TextInput/TextInput";
+export { default as Toggle, ToggleSizes } from "./components/Toggle/Toggle";
 export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as useWindowSize } from "./hooks/useWindowSize";
-export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
-export { VideoPlayerAspectRatios, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayerTypes";
+export { default as VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";
 export { default as Table } from "./components/Table/Table";

package/dist/styles.css

@@ -1,3 +1,3 @@
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */@import "~react-datepicker/dist/react-datepicker.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}
 
-/*! 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")}:root{--nypl-breakpoint-small:320px;--nypl-breakpoint-medium:600px;--nypl-breakpoint-large:960px;--nypl-breakpoint-xl:1280px}.container{padding:var(--nypl-space-s)}.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-l)}}.placeholder--full{margin-bottom:var(--nypl-space-xxl)}@media (min-width:960px){.placeholder--full{margin-bottom:var(--nypl-space-xxxl)}}.placeholder--short{padding:1rem}.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:1px;outline:1px solid var(--nypl-colors-ui-gray-light-cool);position:relative;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{font-family:var(--nypl-fonts-body)}.date-picker-calendar .react-datepicker{border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__triangle{transform:translate(32px)!important}.date-picker-calendar .react-datepicker__triangle:before{border-bottom-color:var(--nypl-colors-ui-gray-medium)!important}.date-picker-calendar .react-datepicker__triangle:after{border-bottom-color:var(--nypl-colors-ui-gray-x-light-cool)!important}.date-picker-calendar .react-datepicker__navigation-icon{top:5px;width:0}.date-picker-calendar .react-datepicker__navigation-icon:before{border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__navigation:hover .react-datepicker__navigation-icon:before{border-color:var(--nypl-colors-ui-gray-dark)}.date-picker-calendar .react-datepicker__header{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__year-wrapper{max-width:220px}.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__day:hover,.date-picker-calendar .react-datepicker__month-text:hover,.date-picker-calendar .react-datepicker__year-text:not(.react-datepicker__year-text--disabled):hover{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-radius:0;color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--in-range.react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__day--keyboard-selected,.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:1}.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-gray-x-light-cool);border-radius:0;color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--today,.date-picker-calendar .react-datepicker__day--today:hover,.date-picker-calendar .react-datepicker__day-text--today,.date-picker-calendar .react-datepicker__day-text--today:hover,.date-picker-calendar .react-datepicker__month--today,.date-picker-calendar .react-datepicker__month--today:hover,.date-picker-calendar .react-datepicker__month-text--today,.date-picker-calendar .react-datepicker__month-text--today:hover,.date-picker-calendar .react-datepicker__year--today,.date-picker-calendar .react-datepicker__year--today:hover,.date-picker-calendar .react-datepicker__year-text--today,.date-picker-calendar .react-datepicker__year-text--today:hover{background-color:var(--nypl-colors-ui-gray-light-cool);color:var(--nypl-colors-ui-black)}.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-focus);border-radius:0;color:var(--nypl-colors-ui-white);font-weight:700;opacity:1}.date-picker-calendar .react-datepicker__day--selected:hover,.date-picker-calendar .react-datepicker__day-text--selected:hover,.date-picker-calendar .react-datepicker__month--selected:hover,.date-picker-calendar .react-datepicker__month-text--selected:hover,.date-picker-calendar .react-datepicker__year--selected:hover,.date-picker-calendar .react-datepicker__year-text--selected:hover{background-color:var(--nypl-colors-ui-focus);color:var(--nypl-colors-ui-white)}.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}
+/*! 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")}:root{--nypl-breakpoint-small:320px;--nypl-breakpoint-medium:600px;--nypl-breakpoint-large:960px;--nypl-breakpoint-xl:1280px}.container{padding:var(--nypl-space-s)}.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-l)}}.placeholder--full{margin-bottom:var(--nypl-space-xxl)}@media (min-width:960px){.placeholder--full{margin-bottom:var(--nypl-space-xxxl)}}.placeholder--short{padding:1rem}.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:1px;outline:1px solid var(--nypl-colors-ui-gray-light-cool);position:relative;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{font-family:var(--nypl-fonts-body)}.date-picker-calendar .react-datepicker{border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__triangle{transform:translate(32px)!important}.date-picker-calendar .react-datepicker__triangle:before{border-bottom-color:var(--nypl-colors-ui-gray-medium)!important}.date-picker-calendar .react-datepicker__triangle:after{border-bottom-color:var(--nypl-colors-ui-gray-x-light-cool)!important}.date-picker-calendar .react-datepicker__navigation-icon{top:5px;width:0}.date-picker-calendar .react-datepicker__navigation-icon:before{border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__navigation:hover .react-datepicker__navigation-icon:before{border-color:var(--nypl-colors-ui-gray-dark)}.date-picker-calendar .react-datepicker__header{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__year-wrapper{max-width:220px}.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__day:hover,.date-picker-calendar .react-datepicker__month-text:hover,.date-picker-calendar .react-datepicker__year-text:not(.react-datepicker__year-text--disabled):hover{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-radius:0;color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--in-range.react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__day--keyboard-selected,.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:1}.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-gray-x-light-cool);border-radius:0;color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--today,.date-picker-calendar .react-datepicker__day--today:hover,.date-picker-calendar .react-datepicker__day-text--today,.date-picker-calendar .react-datepicker__day-text--today:hover,.date-picker-calendar .react-datepicker__month--today,.date-picker-calendar .react-datepicker__month--today:hover,.date-picker-calendar .react-datepicker__month-text--today,.date-picker-calendar .react-datepicker__month-text--today:hover,.date-picker-calendar .react-datepicker__year--today,.date-picker-calendar .react-datepicker__year--today:hover,.date-picker-calendar .react-datepicker__year-text--today,.date-picker-calendar .react-datepicker__year-text--today:hover{background-color:var(--nypl-colors-ui-gray-light-cool);color:var(--nypl-colors-ui-black)}.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-focus);border-radius:0;color:var(--nypl-colors-ui-white);font-weight:700;opacity:1}.date-picker-calendar .react-datepicker__day--selected:hover,.date-picker-calendar .react-datepicker__day-text--selected:hover,.date-picker-calendar .react-datepicker__month--selected:hover,.date-picker-calendar .react-datepicker__month-text--selected:hover,.date-picker-calendar .react-datepicker__year--selected:hover,.date-picker-calendar .react-datepicker__year-text--selected:hover{background-color:var(--nypl-colors-ui-focus);color:var(--nypl-colors-ui-white)}

package/dist/theme/components/buttonGroup.d.ts

@@ -0,0 +1,11 @@
+declare const ButtonGroup: {
+    baseStyle: ({ buttonWidth }: {
+        buttonWidth: any;
+    }) => {
+        width: string;
+        button: {
+            flexGrow: string;
+        };
+    };
+};
+export default ButtonGroup;

package/dist/theme/components/card.d.ts

@@ -1,7 +1,56 @@
+interface CardBaseStyleProps {
+    hasImage: boolean;
+    imageIsAtEnd: boolean;
+    isBordered: boolean;
+    isCentered: boolean;
+    layout: string;
+    mainActionLink: boolean;
+}
+interface CardImageBaseStyleProps {
+    imageIsAtEnd: boolean;
+    isCentered: boolean;
+    size: keyof typeof imageSizes;
+    layout: string;
+}
+interface CardActionsBaseStyleProps {
+    bottomBorder: boolean;
+    isCentered: boolean;
+    layout: string;
+    topBorder: boolean;
+}
+declare const imageSizes: {
+    xxsmall: {
+        flex: {
+            base: string;
+            md: string;
+        };
+        width: string;
+    };
+    xsmall: {
+        flex: {
+            md: string;
+        };
+    };
+    small: {
+        flex: {
+            md: string;
+        };
+    };
+    medium: {
+        flex: {
+            md: string;
+        };
+    };
+    large: {
+        flex: {
+            md: string;
+        };
+    };
+};
 declare const _default: {
     Card: {
         parts: string[];
-        baseStyle: (props: any) => {
+        baseStyle: ({ hasImage, imageIsAtEnd, isBordered, isCentered, layout, mainActionLink, }: CardBaseStyleProps) => {
             display: string;
             flexFlow: {
                 base: string;
@@ -126,7 +175,7 @@ declare const _default: {
         };
     };
     CardActions: {
-        baseStyle: (props: any) => {
+        baseStyle: ({ bottomBorder, isCentered, layout, topBorder, }: CardActionsBaseStyleProps) => {
             justifyContent: any;
             borderColor: string;
             borderBottom: string;
@@ -189,12 +238,59 @@ declare const _default: {
         };
     };
     CardImage: {
-        baseStyle: ({ imageIsAtEnd, isCentered, layout, size }: {
-            imageIsAtEnd: any;
-            isCentered: any;
-            layout: any;
-            size: any;
-        }) => any;
+        baseStyle: ({ imageIsAtEnd, isCentered, layout, size, }: CardImageBaseStyleProps) => {
+            flex: {
+                md: string;
+            };
+            maxWidth: {
+                base: string;
+                md: string;
+            };
+            textAlign: string;
+            alignItems: string;
+            margin: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: any;
+            };
+            marginBottom: string[];
+            marginTop: string;
+            order: string;
+        } | {
+            marginBottom: string;
+            width: string;
+            marginTop: string;
+            order: string;
+        } | {
+            flex: {
+                md: string;
+            };
+            maxWidth: {
+                base: string;
+                md: string;
+            };
+            textAlign: string;
+            alignItems: string;
+            margin: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: any;
+            };
+            marginBottom: string[];
+            marginTop?: undefined;
+            order?: undefined;
+        } | {
+            marginBottom: string;
+            width: string;
+            marginTop?: undefined;
+            order?: undefined;
+        };
     };
 };
 export default _default;

package/dist/theme/components/componentWrapper.d.ts

@@ -1,8 +1,9 @@
+interface ComponentWrapperProps {
+    hasChildren: boolean;
+}
 declare const ComponentWrapper: {
     parts: string[];
-    baseStyle: ({ hasChildren }: {
-        hasChildren: any;
-    }) => {
+    baseStyle: ({ hasChildren }: ComponentWrapperProps) => {
         helperErrorText: {
             marginTop: string;
         };

package/dist/theme/components/customTable.d.ts

@@ -1,7 +1,12 @@
-export declare const baseTHStyles: (showRowDividers?: boolean, columnHeadersTextColor?: boolean) => {
+interface BaseStyleProps {
+    columnHeadersTextColor?: string;
+    showRowDividers?: boolean;
+    useRowHeaders?: boolean;
+}
+export declare const baseTHStyles: (showRowDividers?: boolean, columnHeadersTextColor?: string) => {
     border: string;
     borderBottom: string;
-    color: string | true;
+    color: string;
     fontSize: string;
     fontWeight: string;
     letterSpacing: string;
@@ -28,11 +33,7 @@ export declare const baseTDStyles: (showRowDividers?: boolean, useRowHeaders?: b
         paddingRight: string;
     };
 };
-export declare const baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: {
-    columnHeadersTextColor: any;
-    showRowDividers: any;
-    useRowHeaders: any;
-}) => {
+export declare const baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
     tbody: {
         th: {
             color: string;
@@ -41,7 +42,7 @@ export declare const baseStyle: ({ columnHeadersTextColor, showRowDividers, useR
     th: {
         border: string;
         borderBottom: string;
-        color: string | true;
+        color: string;
         fontSize: string;
         fontWeight: string;
         letterSpacing: string;
@@ -82,11 +83,7 @@ export declare const baseStyle: ({ columnHeadersTextColor, showRowDividers, useR
     };
 };
 declare const CustomTable: {
-    baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: {
-        columnHeadersTextColor: any;
-        showRowDividers: any;
-        useRowHeaders: any;
-    }) => {
+    baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
         tbody: {
             th: {
                 color: string;
@@ -95,7 +92,7 @@ declare const CustomTable: {
         th: {
             border: string;
             borderBottom: string;
-            color: string | true;
+            color: string;
             fontSize: string;
             fontWeight: string;
             letterSpacing: string;

package/dist/theme/components/fieldset.d.ts

@@ -1,7 +1,8 @@
+interface FieldSetProps {
+    isLegendHidden?: boolean;
+}
 declare const Fieldset: {
-    baseStyle: ({ isLegendHidden }: {
-        isLegendHidden: any;
-    }) => {
+    baseStyle: ({ isLegendHidden }: FieldSetProps) => {
         border: number;
         padding: number;
         legend: {

package/dist/theme/components/helperErrorText.d.ts

@@ -1,7 +1,8 @@
+interface HelperErrorTextBaseStyle {
+    isInvalid: boolean;
+}
 declare const helperErrorText: {
-    baseStyle: ({ isInvalid }: {
-        isInvalid: any;
-    }) => {
+    baseStyle: ({ isInvalid }: HelperErrorTextBaseStyle) => {
         marginTop: string;
         marginBottom: string;
         fontSize: string;

package/dist/theme/components/hero.d.ts

@@ -460,7 +460,7 @@ declare const Hero: {
                 };
             };
         };
-        fiftyfifty: {
+        fiftyFifty: {
             content: {
                 alignItems: string;
                 display: string;

package/dist/theme/components/horizontalRule.d.ts

@@ -1,7 +1,8 @@
+interface HorizontalRuleBaseStyle {
+    align: string;
+}
 declare const HorizontalRule: {
-    baseStyle: ({ align }: {
-        align: any;
-    }) => {
+    baseStyle: ({ align }: HorizontalRuleBaseStyle) => {
         bg: string;
         border: string;
         height: string;