@nypl/design-system-react-components 0.25.13 → 0.26.0

package/dist/hooks/useCarouselStyles.d.ts

@@ -1,10 +1,11 @@
 /**
  * Custom hook that controls the sliding function for the carousel wrapper.
  * This returns functions to use for the "previous" and "next" buttons as well
- * as a CSS style object that should be use to transition between slides.
+ * as a CSS style object that should be use to transition between slides. There
+ * is also a function to programmatically slide to the first slide.
  * Inspired by: https://codesandbox.io/s/fxjeo
  */
-declare const useCarouselStyles: (slidesCount?: number, slideWidth?: number) => {
+export declare const useCarouselStyles: (slidesCount?: number, slideWidth?: number) => {
     prevSlide: () => void;
     nextSlide: () => void;
     carouselStyle: {

package/dist/hooks/useNYPLTheme.d.ts

@@ -28,12 +28,24 @@ declare function useNYPLTheme(): {
         2: any;
         3: any;
         4: any;
+        breadcrumbs: any;
+        button: any;
+        heading: any;
+        helper: any;
+        label: any;
+        text: any;
     };
     fontWeights: {
         light: any;
         regular: any;
         medium: any;
         bold: any;
+        breadcrumbs: any;
+        button: any;
+        heading: any;
+        helper: any;
+        label: any;
+        text: any;
     };
     fonts: {
         body: any;

package/dist/index.d.ts

@@ -44,6 +44,7 @@ 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";
@@ -52,7 +53,7 @@ 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 { Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
+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";
@@ -60,7 +61,9 @@ export { default as TextInput, TextInputRefType, } from "./components/TextInput/
 export { TextInputTypes } from "./components/TextInput/TextInputTypes";
 export { default as Toggle } from "./components/Toggle/Toggle";
 export { ToggleSizes } from "./components/Toggle/ToggleTypes";
+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 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-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-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}

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

@@ -6,6 +6,7 @@ declare const Button: {
         cursor: string;
         color: string;
         justifyContent: string;
+        maxHeight: string;
         py: string;
         px: string;
         textDecoration: string;
@@ -43,6 +44,10 @@ declare const Button: {
             fontSize: string;
             _hover: {
                 bg: string;
+                borderColor: string;
+            };
+            _disabled: {
+                bg: string;
             };
         };
         link: {
@@ -65,11 +70,14 @@ declare const Button: {
             color: string;
             borderRadius: string;
             py: string;
-            paddingInlineStart: string;
-            paddingInlineEnd: string;
+            px: string;
             fontSize: string;
             _hover: {
                 bg: string;
+                borderColor: string;
+            };
+            _disabled: {
+                bg: string;
             };
         };
         iconOnly: {

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

@@ -12,11 +12,10 @@ declare const _default: {
             alignItems: string;
             border: string;
             borderColor: string;
-            heading: {
-                marginBottom: string;
-                a: {
-                    color: string;
-                };
+            actions: {
+                width: string[];
+                marginLeft: string[];
+                marginTop: string[];
             };
             body: {
                 display: {
@@ -28,6 +27,12 @@ declare const _default: {
                 margin: any;
                 padding: any;
             };
+            heading: {
+                marginBottom: string;
+                a: {
+                    color: string;
+                };
+            };
         } | {
             display: string;
             flexFlow: string;
@@ -36,11 +41,10 @@ declare const _default: {
             alignItems: string;
             border: string;
             borderColor: string;
-            heading: {
-                marginBottom: string;
-                a: {
-                    color: string;
-                };
+            actions: {
+                width: string[];
+                marginLeft: string[];
+                marginTop: string[];
             };
             body: {
                 display: {
@@ -52,6 +56,12 @@ declare const _default: {
                 margin: any;
                 padding: any;
             };
+            heading: {
+                marginBottom: string;
+                a: {
+                    color: string;
+                };
+            };
         } | {
             display: string;
             flexFlow: {
@@ -63,11 +73,10 @@ declare const _default: {
             alignItems: string;
             border?: undefined;
             borderColor?: undefined;
-            heading: {
-                marginBottom: string;
-                a: {
-                    color: string;
-                };
+            actions: {
+                width: string[];
+                marginLeft: string[];
+                marginTop: string[];
             };
             body: {
                 display: {
@@ -79,6 +88,12 @@ declare const _default: {
                 margin: any;
                 padding: any;
             };
+            heading: {
+                marginBottom: string;
+                a: {
+                    color: string;
+                };
+            };
         } | {
             display: string;
             flexFlow: string;
@@ -87,11 +102,10 @@ declare const _default: {
             alignItems: string;
             border?: undefined;
             borderColor?: undefined;
-            heading: {
-                marginBottom: string;
-                a: {
-                    color: string;
-                };
+            actions: {
+                width: string[];
+                marginLeft: string[];
+                marginTop: string[];
             };
             body: {
                 display: {
@@ -103,6 +117,12 @@ declare const _default: {
                 margin: any;
                 padding: any;
             };
+            heading: {
+                marginBottom: string;
+                a: {
+                    color: string;
+                };
+            };
         };
     };
     CardActions: {
@@ -169,11 +189,11 @@ declare const _default: {
         };
     };
     CardImage: {
-        baseStyle: ({ imageIsAtEnd, isCentered, size, layout }: {
+        baseStyle: ({ imageIsAtEnd, isCentered, layout, size }: {
             imageIsAtEnd: any;
             isCentered: any;
-            size: any;
             layout: any;
+            size: any;
         }) => any;
     };
 };

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

@@ -25,7 +25,9 @@ declare const Checkbox: {
                 _disabled: {
                     bg: string;
                     borderColor: string;
-                    color: string;
+                    svg: {
+                        color: string;
+                    };
                 };
                 _indeterminate: {
                     color: string;
@@ -65,13 +67,12 @@ declare const Checkbox: {
                 color: string;
             };
         };
-        helper: {
+        helperErrorText: {
             marginLeft: string;
             _disabled: {
+                color: string;
                 fontStyle: string;
             };
-            marginTop: string;
-            marginBottom: string;
         };
     };
     sizes: {

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

@@ -3,7 +3,7 @@ declare const CheckboxGroup: {
     baseStyle: ({ isFullWidth }: {
         isFullWidth?: boolean;
     }) => {
-        helper: {
+        helperErrorText: {
             marginTop: string;
         };
         stack: {

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

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

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

@@ -1,3 +1,86 @@
+export declare const baseTHStyles: (showRowDividers?: boolean, columnHeadersTextColor?: boolean) => {
+    border: string;
+    borderBottom: string;
+    color: string | true;
+    fontSize: string;
+    fontWeight: string;
+    letterSpacing: string;
+    paddingLeft: number;
+    paddingRight: string;
+    textTransform: string;
+    _first: {
+        paddingLeft: string;
+    };
+    _last: {
+        paddingRight: string;
+    };
+};
+export declare const baseTDStyles: (showRowDividers?: boolean, useRowHeaders?: boolean) => {
+    border: string;
+    borderBottom: string;
+    letterSpacing: string;
+    paddingLeft: number;
+    paddingRight: string;
+    _first: {
+        paddingLeft: string;
+    };
+    _last: {
+        paddingRight: string;
+    };
+};
+export declare const baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: {
+    columnHeadersTextColor: any;
+    showRowDividers: any;
+    useRowHeaders: any;
+}) => {
+    tbody: {
+        th: {
+            color: string;
+        };
+    };
+    th: {
+        border: string;
+        borderBottom: string;
+        color: string | true;
+        fontSize: string;
+        fontWeight: string;
+        letterSpacing: string;
+        paddingLeft: number;
+        paddingRight: string;
+        textTransform: string;
+        _first: {
+            paddingLeft: string;
+        };
+        _last: {
+            paddingRight: string;
+        };
+    };
+    td: {
+        border: string;
+        borderBottom: string;
+        letterSpacing: string;
+        paddingLeft: number;
+        paddingRight: string;
+        _first: {
+            paddingLeft: string;
+        };
+        _last: {
+            paddingRight: string;
+        };
+    };
+    caption: {
+        captionSide: string;
+        color: string;
+        fontSize: string;
+        fontWeight: string;
+        marginBottom: string;
+        marginLeft: string;
+        marginRight: string;
+        marginTop: string;
+        padding: string;
+        textAlign: string;
+    };
+};
 declare const CustomTable: {
     baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: {
         columnHeadersTextColor: any;
@@ -12,7 +95,7 @@ declare const CustomTable: {
         th: {
             border: string;
             borderBottom: string;
-            color: any;
+            color: string | true;
             fontSize: string;
             fontWeight: string;
             letterSpacing: string;

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

@@ -1,29 +1,19 @@
 declare const Fieldset: {
-    parts: string[];
     baseStyle: ({ isLegendHidden }: {
         isLegendHidden: any;
     }) => {
         border: number;
         padding: number;
         legend: {
-            alignItems: string;
-            width: string;
-            marginBottom: string;
+            display: string;
             fontSize: string;
             fontWeight: string;
-            display: string;
-            justifyContent: string;
-            helper: {
-                marginLeft: string;
-                fontSize: string;
+            marginBottom: string;
+            width: string;
+            span: {
                 fontWeight: string;
             };
         };
-        helper: {
-            marginLeft: string;
-            fontSize: string;
-            fontWeight: string;
-        };
     };
 };
 export default Fieldset;

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

@@ -2,15 +2,12 @@
 export { wrapperStyles } from "./globalMixins";
 /** Reusable component styles. */
 declare const activeFocus: (darkMode?: boolean) => {
+    boxShadow: string;
     outline: string;
     outlineOffset: string;
     outlineColor: string;
     zIndex: string;
 };
-declare const helperTextMargin: {
-    marginTop: string;
-    marginBottom: string;
-};
 declare const checkboxRadioLabelStyles: {
     userSelect: string;
     fontWeight: string;
@@ -30,16 +27,15 @@ declare const checkboxRadioControlSize: {
     h: string;
     w: string;
 };
-declare const checkboxRadioHelperStyle: {
+declare const checkboxRadioHelperErrorTextStyle: {
     marginLeft: string;
     _disabled: {
+        color: string;
         fontStyle: string;
     };
-    marginTop: string;
-    marginBottom: string;
 };
 declare const checkboxRadioGroupStyles: (isFullWidth?: boolean) => {
-    helper: {
+    helperErrorText: {
         marginTop: string;
     };
     stack: {
@@ -47,21 +43,31 @@ declare const checkboxRadioGroupStyles: (isFullWidth?: boolean) => {
     };
 };
 declare const labelLegendText: {
-    alignItems: string;
-    width: string;
-    marginBottom: string;
+    display: string;
     fontSize: string;
     fontWeight: string;
-    display: string;
-    justifyContent: string;
-    helper: {
-        marginLeft: string;
-        fontSize: string;
+    marginBottom: string;
+    width: string;
+    span: {
         fontWeight: string;
     };
 };
+declare const selectTextInputDisabledStyles: {
+    bg: string;
+    borderColor: string;
+    color: string;
+    opacity: string;
+};
+declare const selectTextInputFocusStyles: {
+    borderColor: string;
+    boxShadow: string;
+    outline: string;
+    outlineOffset: string;
+    outlineColor: string;
+    zIndex: string;
+};
 declare const textMargin: {
     margin: string;
     marginBottom: string;
 };
-export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperStyle, checkboxRadioLabelStyles, helperTextMargin, labelLegendText, textMargin, };
+export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioLabelStyles, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };

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

@@ -1,3 +1,56 @@
+export declare const headings: {
+    h1: {
+        width: string;
+        marginTop: string;
+        marginLeft: string;
+        marginRight: string;
+        marginBottom: string;
+        fontSize: string;
+        fontWeight: string;
+        letterSpacing: string;
+        lineHeight: string;
+    };
+    h2: {
+        width: string;
+        marginTop: string;
+        marginLeft: string;
+        marginRight: string;
+        marginBottom: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    h3: {
+        width: string;
+        marginTop: string;
+        marginLeft: string;
+        marginRight: string;
+        marginBottom: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    h4: {
+        width: string;
+        marginTop: string;
+        marginLeft: string;
+        marginRight: string;
+        marginBottom: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    fallback: {
+        width: string;
+        marginTop: string;
+        marginLeft: string;
+        marginRight: string;
+        marginBottom: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+};
 declare const Heading: {
     baseStyle: {
         a: {

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

@@ -2,6 +2,7 @@ declare const helperErrorText: {
     baseStyle: ({ isInvalid }: {
         isInvalid: any;
     }) => {
+        marginTop: string;
         marginBottom: string;
         fontSize: string;
         color: string;

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

@@ -91,8 +91,9 @@ declare const Hero: {
                 width: string;
             };
             bodyText: {
-                marginTop: string;
-                marginRight: {
+                paddingBottom: string;
+                paddingTop: string;
+                paddingRight: {
                     md: string;
                 };
                 flex: {
@@ -156,8 +157,9 @@ declare const Hero: {
                 width: string;
             };
             bodyText: {
-                marginTop: string;
-                marginRight: {
+                paddingBottom: string;
+                paddingTop: string;
+                paddingRight: {
                     md: string;
                 };
                 flex: {
@@ -221,8 +223,9 @@ declare const Hero: {
                 width: string;
             };
             bodyText: {
-                marginTop: string;
-                marginRight: {
+                paddingBottom: string;
+                paddingTop: string;
+                paddingRight: {
                     md: string;
                 };
                 flex: {
@@ -286,8 +289,9 @@ declare const Hero: {
                 width: string;
             };
             bodyText: {
-                marginTop: string;
-                marginRight: {
+                paddingBottom: string;
+                paddingTop: string;
+                paddingRight: {
                     md: string;
                 };
                 flex: {
@@ -351,8 +355,9 @@ declare const Hero: {
                 width: string;
             };
             bodyText: {
-                marginTop: string;
-                marginRight: {
+                paddingBottom: string;
+                paddingTop: string;
+                paddingRight: {
                     md: string;
                 };
                 flex: {
@@ -369,10 +374,7 @@ declare const Hero: {
                 color: string;
                 display: string;
                 flexFlow: string;
-                paddingTop: string;
-                paddingBottom: string;
-                paddingRight: string;
-                paddingLeft: string;
+                padding: string;
                 p: {
                     marginBottom: string;
                     marginTop: string;
@@ -380,6 +382,10 @@ declare const Hero: {
                 marginY: string;
                 marginX: string;
                 maxWidth: string;
+                paddingTop: string;
+                paddingBottom: string;
+                paddingRight: string;
+                paddingLeft: string;
                 width: string;
             };
             heading: {