@nypl/design-system-react-components 0.25.9 → 0.25.12

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import "./styles.scss";
-export { Box, ButtonGroup, Center, Circle, Grid, GridItem, HStack, Square, Stack, VStack, } from "@chakra-ui/react";
+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 { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
 export { ColorVariants } from "./components/Breadcrumbs/BreadcrumbsTypes";
@@ -10,12 +10,12 @@ export { CardLayouts } from "./components/Card/CardTypes";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
 export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGroupLayoutTypes";
-export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as DatePicker, FullDateType, } from "./components/DatePicker/DatePicker";
 export { DatePickerTypes } from "./components/DatePicker/DatePickerTypes";
 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 { FormSpacing } from "./components/Form/FormTypes";
+export { FormGaps } from "./components/Form/FormTypes";
 export { GridGaps } from "./components/Grid/GridTypes";
 export { default as Heading } from "./components/Heading/Heading";
 export { HeadingDisplaySizes, HeadingLevels, } from "./components/Heading/HeadingTypes";
@@ -54,7 +54,7 @@ export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
 export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
 export { StructuredContentImagePosition } from "./components/StructuredContent/StructuredContentTypes";
 export { Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
-export { TemplateAppContainer, Template, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, } from "./components/Template/Template";
+export { TemplateAppContainer, Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, } from "./components/Template/Template";
 export { default as Text } from "./components/Text/Text";
 export { TextDisplaySizes } from "./components/Text/TextTypes";
 export { default as TextInput, TextInputRefType, } from "./components/TextInput/TextInput";

package/dist/resources.scss

@@ -1,4 +1,3 @@
-// Resources to export as sass mixins
 /**
  * Breakpoint Configuration
  * @see https://github.com/Team-Sass/breakpoint/wiki
@@ -385,4 +384,3 @@ $nypl-max-width: $nypl-breakpoint-xl;
     @include space-stack-xxxl;
   }
 }
-

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)}.nypl-ds{box-sizing:border-box;color:var(--nypl-colors-ui-black);font-family:var(--nypl-fonts-body);font-size:var(--nypl-fontSizes-text-default);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}.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 .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}
+/*! 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-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}.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 .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/breadcrumb.d.ts

@@ -62,7 +62,7 @@ declare const Breadcrumb: {
                 marginInlineStart: string;
             };
         };
-        "li:nth-last-child(2)": {
+        "li:nth-last-of-type(2)": {
             display: string;
             span: {
                 display: {
@@ -85,6 +85,9 @@ declare const Breadcrumb: {
         booksAndMore: {
             bg: string;
         };
+        education: {
+            bg: string;
+        };
         locations: {
             bg: string;
         };

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

@@ -52,11 +52,9 @@ declare const Checkbox: {
         };
         label: {
             userSelect: string;
-            fontSize: string;
             fontWeight: string;
             marginBottom: string;
             marginLeft: string;
-            verticalAlign: string;
             _disabled: {
                 color: string;
                 opacity: number;

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

@@ -4,6 +4,11 @@ declare const CustomTable: {
         showRowDividers: any;
         useRowHeaders: any;
     }) => {
+        tbody: {
+            th: {
+                color: string;
+            };
+        };
         th: {
             border: string;
             borderBottom: string;
@@ -36,11 +41,15 @@ declare const CustomTable: {
         };
         caption: {
             captionSide: string;
-            textAlign: string;
-            fontSize: string;
             color: string;
-            textTransform: string;
+            fontSize: string;
             fontWeight: string;
+            marginBottom: string;
+            marginLeft: string;
+            marginRight: string;
+            marginTop: string;
+            padding: string;
+            textAlign: string;
         };
     };
 };

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

@@ -3,6 +3,8 @@ declare const Fieldset: {
     baseStyle: ({ isLegendHidden }: {
         isLegendHidden: any;
     }) => {
+        border: number;
+        padding: number;
         legend: {
             alignItems: string;
             width: string;

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

@@ -1,12 +1,11 @@
 /** Export "mixin" styles. */
 export { wrapperStyles } from "./globalMixins";
 /** Reusable component styles. */
-declare const activeFocus: {
-    border: string;
-    borderColor: string;
-    zIndex: string;
+declare const activeFocus: (darkMode?: boolean) => {
     outline: string;
+    outlineOffset: string;
     outlineColor: string;
+    zIndex: string;
 };
 declare const helperTextMargin: {
     marginTop: string;
@@ -14,11 +13,9 @@ declare const helperTextMargin: {
 };
 declare const checkboxRadioLabelStyles: {
     userSelect: string;
-    fontSize: string;
     fontWeight: string;
     marginBottom: string;
     marginLeft: string;
-    verticalAlign: string;
     _disabled: {
         color: string;
         opacity: number;
@@ -40,6 +37,14 @@ declare const checkboxRadioHelperStyle: {
     marginTop: string;
     marginBottom: string;
 };
+declare const checkboxRadioGroupStyles: {
+    helper: {
+        marginTop: string;
+    };
+    stack: {
+        width: string;
+    };
+};
 declare const labelLegendText: {
     alignItems: string;
     width: string;
@@ -54,12 +59,8 @@ declare const labelLegendText: {
         fontWeight: string;
     };
 };
-declare const checkboxRadioGroupStyles: {
-    helper: {
-        marginTop: string;
-    };
-    stack: {
-        width: string;
-    };
+declare const textMargin: {
+    margin: string;
+    marginBottom: string;
 };
-export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperStyle, checkboxRadioLabelStyles, helperTextMargin, labelLegendText, };
+export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperStyle, checkboxRadioLabelStyles, helperTextMargin, labelLegendText, textMargin, };

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

@@ -2,6 +2,14 @@
  * These objects are also SCSS mixins but are now JS objects in the
  * context of css-in-js and the custom NYPL-theme.
  */
+declare const screenreaderOnly: {
+    clip: string;
+    height: string;
+    overflow: string;
+    position: string;
+    width: string;
+    wordWrap: string;
+};
 declare const wrapperStyles: {
     marginY: string;
     marginX: string;
@@ -12,12 +20,4 @@ declare const wrapperStyles: {
     paddingLeft: string;
     width: string;
 };
-declare const screenreaderOnly: {
-    clip: string;
-    height: string;
-    overflow: string;
-    position: string;
-    width: string;
-    wordWrap: string;
-};
 export { screenreaderOnly, wrapperStyles };

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

@@ -34,6 +34,12 @@ declare const List: {
                     width: string;
                 };
             };
+            margin: string;
+            marginBottom: string;
+        };
+        ol: {
+            margin: string;
+            marginBottom: string;
         };
         dl: {
             borderBottom: string;

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

@@ -1,28 +1,31 @@
 declare const _default: {
     Notification: {
         parts: string[];
-        baseStyle: ({ centered, noMargin, notificationType }: {
+        baseStyle: ({ centered, dismissible, noMargin, notificationType }: {
             centered: any;
+            dismissible: any;
             noMargin: any;
             notificationType: any;
         }) => {
             bg: string;
             display: string;
             fontSize: string;
-            padding: string;
             position: string;
             textAlign: string;
             borderRadius: string;
             margin: string;
             container: {
                 margin: string;
-                width: string;
                 maxWidth: string;
+                padding: string;
+                paddingRight: string;
+                paddingLeft: string;
+                width: string;
             };
             dismissibleButton: {
                 border: string;
-                alignItems: string;
                 bgColor: string;
+                alignItems: string;
                 color: string;
                 display: string;
                 height: string;
@@ -31,6 +34,9 @@ declare const _default: {
                 position: string;
                 right: string;
                 top: string;
+                svg: {
+                    marginTop: string;
+                };
                 _hover: {
                     bg: string;
                 };
@@ -55,6 +61,12 @@ declare const _default: {
                 marginTop: string;
                 paddingLeft: string;
                 width: string;
+                a: {
+                    color: string;
+                    _hover: {
+                        color: string;
+                    };
+                };
             };
         };
     };

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

@@ -57,11 +57,9 @@ declare const Radio: {
         };
         label: {
             userSelect: string;
-            fontSize: string;
             fontWeight: string;
             marginBottom: string;
             marginLeft: string;
-            verticalAlign: string;
             _disabled: {
                 color: string;
                 opacity: number;
@@ -86,6 +84,9 @@ declare const Radio: {
                 h: string;
                 w: string;
             };
+            label: {
+                fontSize: string;
+            };
         };
     };
     defaultProps: {

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

@@ -1,4 +1,5 @@
 declare const SearchBar: {
+    parts: string[];
     baseStyle: {
         display: string;
         marginBottom: {
@@ -9,6 +10,9 @@ declare const SearchBar: {
             base: string;
             md: string;
         };
+        select: {
+            marginBottom: string;
+        };
     };
 };
 export default SearchBar;

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

@@ -10,6 +10,7 @@ declare const Select: {
             backgroundColor: string;
             borderRadius: string;
             borderColor: string;
+            fontSize: string;
             paddingTop: string;
             paddingRight: string;
             paddingBottom: string;
@@ -18,18 +19,10 @@ declare const Select: {
                 borderColor: string;
             };
             _active: {
-                border: string;
-                borderColor: string;
-                zIndex: string;
                 outline: string;
+                outlineOffset: string;
                 outlineColor: string;
-            };
-            _focus: {
-                border: string;
-                borderColor: string;
                 zIndex: string;
-                outline: string;
-                outlineColor: string;
             };
             _disabled: {
                 color: string;

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

@@ -1,10 +1,10 @@
 declare const CustomSlider: {
     parts: string[];
-    baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }: {
+    baseStyle: ({ isDisabled, isInvalid, showBoxes, showValues }: {
         isDisabled: any;
         isInvalid: any;
-        isRangeSlider: any;
         showBoxes: any;
+        showValues: any;
     }) => {
         container: {
             display: string;
@@ -14,21 +14,25 @@ declare const CustomSlider: {
             marginTop: string;
         };
         leftValue: {
-            marginLeft: string;
             marginTop: string;
             marginBottom: string;
             marginRight: string;
+            marginLeft: string;
         };
         rightValue: {
+            marginLeft: string;
             marginRight: string;
             marginTop: string;
             marginBottom: string;
-            marginLeft: string;
         };
         textInput: {
             minWidth: string;
             color: string;
         };
+        sliderContainer: {
+            marginLeft: string;
+            marginRight: string;
+        };
         filledTrack: {
             bgColor: string;
         };

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

@@ -8,24 +8,24 @@ declare const StructuredContent: {
         imageFigure: {
             marginBottom: string;
             maxWidth?: string;
-            float: any;
-            marginLeft: string;
-            marginRight: string;
+            float: any[];
+            marginLeft: string[];
+            marginRight: string[];
             width: string;
         };
         imageWrapper: {
             marginBottom: string;
             maxWidth?: string;
-            float: any;
-            marginLeft: string;
-            marginRight: string;
+            float: any[];
+            marginLeft: string[];
+            marginRight: string[];
             width: string;
         };
         image: {
             maxWidth?: string;
-            float: any;
-            marginLeft: string;
-            marginRight: string;
+            float: any[];
+            marginLeft: string[];
+            marginRight: string[];
             marginBottom: string;
         };
     };

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

@@ -10,6 +10,7 @@ declare const TextInput: {
             border: string;
             borderColor: string;
             borderRadius: string;
+            fontSize: string;
             py: string;
             px: string;
             _hover: {
@@ -21,18 +22,16 @@ declare const TextInput: {
                 opacity: string;
             };
             _active: {
-                border: string;
-                borderColor: string;
-                zIndex: string;
                 outline: string;
+                outlineOffset: string;
                 outlineColor: string;
+                zIndex: string;
             };
             _focus: {
-                border: string;
-                borderColor: string;
-                zIndex: string;
                 outline: string;
+                outlineOffset: string;
                 outlineColor: string;
+                zIndex: string;
             };
             _placeholder: {
                 color: string;
@@ -52,6 +51,7 @@ declare const TextInput: {
             border: string;
             borderColor: string;
             borderRadius: string;
+            fontSize: string;
             py: string;
             px: string;
             _hover: {
@@ -63,18 +63,16 @@ declare const TextInput: {
                 opacity: string;
             };
             _active: {
-                border: string;
-                borderColor: string;
-                zIndex: string;
                 outline: string;
+                outlineOffset: string;
                 outlineColor: string;
+                zIndex: string;
             };
             _focus: {
-                border: string;
-                borderColor: string;
-                zIndex: string;
                 outline: string;
+                outlineOffset: string;
                 outlineColor: string;
+                zIndex: string;
             };
             _placeholder: {
                 color: string;

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

@@ -3,8 +3,8 @@ declare const _default: {
         parts: string[];
         baseStyle: {
             label: {
-                display: string;
                 alignItems: string;
+                display: string;
                 width: string;
             };
             helper: {
@@ -18,7 +18,10 @@ declare const _default: {
         };
     };
     Switch: {
-        baseStyle: {
+        baseStyle: ({ size }: {
+            size: any;
+        }) => {
+            alignItems: string;
             opacity: number;
             track: {
                 border: string;
@@ -53,6 +56,7 @@ declare const _default: {
             label: {
                 fontSize: string;
                 marginLeft: string;
+                marginTop: string;
                 _disabled: {
                     fontStyle: string;
                 };

package/dist/theme/foundations/global.d.ts

@@ -1,8 +1,6 @@
 /**
  * These rules affect all the global elements on the `body` element of the
- * page when the `DSProvider` component is used. This means that even if the
- * `nypl-ds` CSS class name is not used in a consuming application, these
- * rules will still take effect.
+ * page when the `DSProvider` component is used.
  */
 declare const global: {
     body: {
@@ -21,8 +19,38 @@ declare const global: {
     svg: {
         display: string;
     };
+    "button, select, input, textarea": {
+        "&:not([disabled])": {
+            _focus: {
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
+        };
+    };
+    "iframe, [href], [tabindex], [contentEditable='true']": {
+        _focus: {
+            outline: string;
+            outlineOffset: string;
+            outlineColor: string;
+            zIndex: string;
+        };
+    };
     p: {
         margin: string;
+        marginBottom: string;
+    };
+    ul: {
+        margin: string;
+        marginBottom: string;
+    };
+    ol: {
+        margin: string;
+        marginBottom: string;
+    };
+    "*, *::before, &::after": {
+        boxSizing: string;
     };
 };
 export default global;

package/dist/utils/utils.d.ts

@@ -20,3 +20,13 @@ export declare const getStorybookEnumValues: (enumObject: any, name: any) => {
     options: string[];
     getValue: (key: any) => any;
 };
+/**
+ * Given a pagination's pageCount, this will return (1) a page number,
+ * derived from the current URL, and (2) a function that, when passed to
+ * Pagination component, makes the URL change and refreshes the page.
+ * @NOTE this is only used for Storybook documentation.
+ */
+export declare const getStorybookHrefProps: (pageCount: any) => {
+    computedCurrentPage: number;
+    getPageHref: (selectedPage: any) => string;
+};