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

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

@@ -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/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

@@ -34,6 +34,9 @@ declare const _default: {
                 position: string;
                 right: string;
                 top: string;
+                svg: {
+                    marginTop: string;
+                };
                 _hover: {
                     bg: 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/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/textInput.d.ts

@@ -22,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;
@@ -65,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;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.11",
+  "version": "0.25.12",
   "description": "Design System React Components",
   "repository": {
     "type": "git",

package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -49,7 +49,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Breadcrumbs} />
 
@@ -160,6 +160,23 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
   </DSProvider>
 </Canvas>
 
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Three}>Education</Heading>
+    <Breadcrumbs
+      breadcrumbsData={[
+        { url: "#", text: "Parent" },
+        { url: "#", text: "Child" },
+        {
+          url: "#",
+          text: "Grandchild",
+        },
+      ]}
+      colorVariant={ColorVariants.Education}
+    />
+  </DSProvider>
+</Canvas>
+
 <Canvas>
   <DSProvider>
     <Heading level={HeadingLevels.Three}>Locations</Heading>

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -74,6 +74,15 @@ describe("Breadcrumbs Snapshot", () => {
         />
       )
       .toJSON();
+    const breadcrumbsEducationVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.Education}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
     const breadcrumbsAdditionalStyles = renderer
       .create(
         <Breadcrumbs
@@ -90,6 +99,7 @@ describe("Breadcrumbs Snapshot", () => {
     expect(breadcrumbsVariantColor).toMatchSnapshot();
     expect(breadcrumbsBlogsVariant).toMatchSnapshot();
     expect(breadcrumbsLocationsVariant).toMatchSnapshot();
+    expect(breadcrumbsEducationVariant).toMatchSnapshot();
     expect(breadcrumbsAdditionalStyles).toMatchSnapshot();
   });
 });

package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx

@@ -1,6 +1,7 @@
 export enum ColorVariants {
   Blogs = "blogs",
   BooksAndMore = "booksAndMore",
+  Education = "education",
   Locations = "locations",
   Research = "research",
   WhatsOn = "whatsOn",

package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap

@@ -397,6 +397,105 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
 `;
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 5`] = `
+<nav
+  aria-label="Breadcrumb"
+  className="chakra-breadcrumb css-0"
+  id="breadcrumbs-test"
+>
+  <ol
+    className="chakra-breadcrumb__list css-0"
+  >
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string1"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string1
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string2"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon breadcrumbs-icon css-onkibi"
+          focusable={false}
+          id="breadcrumbs-test__backarrow"
+          role="img"
+          title="arrow icon"
+          viewBox="0 0 24 24"
+        >
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+        <span
+          className="breadcrumb-label"
+        >
+          string2
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <span
+        aria-current="page"
+        className="chakra-breadcrumb__link css-0"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string3
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 6`] = `
 <nav
   aria-label="Breadcrumb"
   className="chakra-breadcrumb css-1f2fw9u"

package/src/components/Checkbox/Checkbox.stories.mdx

@@ -57,7 +57,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Checkbox} />
 

package/src/components/Checkbox/Checkbox.tsx

@@ -126,6 +126,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
                 defaultIsChecked: false,
               })}
           icon={icon}
+          alignItems="flex-start"
           __css={styles}
           {...ariaAttributes}
         >

package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Checkbox Renders the UI snapshot correctly 1`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   onClick={[Function]}
 >
   <input
@@ -65,7 +65,7 @@ exports[`Checkbox Renders the UI snapshot correctly 1`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 2`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   data-checked=""
   onClick={[Function]}
 >
@@ -131,7 +131,7 @@ exports[`Checkbox Renders the UI snapshot correctly 2`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 3`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   data-checked=""
   onClick={[Function]}
 >
@@ -219,7 +219,7 @@ exports[`Checkbox Renders the UI snapshot correctly 3`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 4`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   onClick={[Function]}
 >
   <input
@@ -282,7 +282,7 @@ exports[`Checkbox Renders the UI snapshot correctly 4`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 5`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   data-invalid=""
   onClick={[Function]}
 >
@@ -348,7 +348,7 @@ exports[`Checkbox Renders the UI snapshot correctly 5`] = `
 
 exports[`Checkbox Renders the UI snapshot correctly 6`] = `
 <label
-  className="chakra-checkbox css-1uiwwan"
+  className="chakra-checkbox css-g8du1g"
   data-disabled=""
   onClick={[Function]}
 >