@nypl/design-system-react-components 4.0.0-remove-matchMedia-test → 4.0.1-rc

package/dist/src/components/TextInput/TextInput.d.ts

@@ -1,4 +1,4 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import type { AutoCompleteValues } from "../../utils/constantValues";
@@ -14,7 +14,13 @@ export declare const TextInputFormats: {
     url: string;
 };
 export type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+type InputElementProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "color" | "height" | "width">;
+type TextAreaElementProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "color" | "height" | "width">;
+interface BaseTextInputProps extends Pick<BoxProps, keyof ChakraProps> {
+    type?: TextInputTypes;
+}
+export type TextInputPropsWithHTML = BaseTextInputProps & (BaseTextInputProps["type"] extends "textarea" ? TextAreaElementProps : InputElementProps);
+export interface InputProps extends TextInputPropsWithHTML {
     /** FOR INTERNAL DS USE ONLY: Adds an aria-label or appends to an existing aria-label for screen readers.*/
     additionalAriaLabel?: string;
     /** FOR INTERNAL DS USE ONLY: additional helper text id(s) to be used for the input's `aria-describedby` value.
@@ -22,14 +28,8 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     additionalHelperTextIds?: string;
     /** String value used to set the autocomplete attribute. */
     autoComplete?: AutoCompleteValues;
-    /** A class name for the TextInput parent div. */
-    className?: string;
-    /** The starting value of the input field. */
-    defaultValue?: string;
     /** Populates the HelperErrorText for the standard state */
     helperText?: HelperErrorTextType;
-    /** ID that other components can cross reference for accessibility purposes */
-    id: string;
     /** Populates the HelperErrorText for the error state */
     invalidText?: HelperErrorTextType;
     /** Adds a button to clear existing text in the input field. */
@@ -45,25 +45,6 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     /** Provides text for a `Label` component if `showLabel` is set to true;
      * populates an `aria-label` attribute if `showLabel` is set to false. */
     labelText: string | JSX.Element;
-    /** The max number for a `number` TextInput type. */
-    max?: number;
-    /** The max length of the input field. This prop is for all input types
-     * except for the `number` type. */
-    maxLength?: number;
-    /** The min number for a `number` TextInput type. */
-    min?: number;
-    /** Used to reference the input element in forms. */
-    name?: string;
-    /** The action to perform on the `input`/`textarea`'s onChange function  */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
-    /** The action to perform on the `input`/`textarea`'s onClick function  */
-    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
-    /** The action to perform on the `input`/`textarea`'s onFocus function  */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /** Regex to query the user input against. */
-    pattern?: string;
-    /** Populates the placeholder for the input/textarea elements */
-    placeholder?: string;
     /** Allows the '(required)' text to be changed for language purposes
      * Note: Parenthesis will be added automatically by the component */
     requiredLabelText?: string;
@@ -75,14 +56,8 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     /** Whether or not to display the "(required)" text in the label text.
      * True by default. */
     showRequiredLabel?: boolean;
-    /** The amount to increase or decrease when using the number type. */
-    step?: number;
     /** FOR INTERNAL DS USE ONLY: the input variant to display. */
-    textInputType?: TextInputVariants;
-    /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
-    type?: TextInputTypes;
-    /** Populates the value of the input/textarea elements */
-    value?: string;
+    textInputVariant?: TextInputVariants;
 }
 /**
  * The type used for `ref`s. We want to extend both `input` and `textarea`

package/dist/src/components/Toggle/Toggle.d.ts

@@ -1,16 +1,14 @@
-import { ChakraComponent } from "@chakra-ui/react";
-import React from "react";
+import { BoxProps, ChakraComponent, ChakraProps } from "@chakra-ui/react";
+import React, { InputHTMLAttributes } from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare const toggleSizesArray: readonly ["default", "small"];
 export type ToggleSizes = typeof toggleSizesArray[number];
-export interface ToggleProps {
+export interface ToggleProps extends Pick<BoxProps, keyof ChakraProps>, Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "height" | "size" | "width"> {
     /** Used for uncontrolled scenarios.  Sets the state of the Toggle when the page first loads.
      *   If true, the toggle will be initially set to the "on" position. */
     defaultChecked?: boolean;
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;
-    /** ID that other components can cross reference for accessibility purposes */
-    id: string;
     /** Optional string to populate the HelperErrorText for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -28,11 +26,6 @@ export interface ToggleProps {
     isRequired?: boolean;
     /** The toggle's label. This will serve as the text content for the `<label>` element */
     labelText: string;
-    /** The name prop indicates the `Toggle`'s form element name. If none is
-     * specified, 'default' will be used. */
-    name?: string;
-    /** The action to perform on the `<input>`'s onChange function  */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /** The size of the Toggle. Defaults to "large". */
     size?: ToggleSizes;
 }

package/dist/src/components/Tooltip/Tooltip.d.ts

@@ -1,14 +1,8 @@
 import React from "react";
-import { ChakraComponent } from "@chakra-ui/react";
-export interface TooltipProps {
-    /** Any child node passed to the component. */
-    children: React.ReactNode;
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
+export interface TooltipProps extends Omit<BoxProps, "content"> {
     /** Value used to populate the tooltip content. */
     content: string | number | React.ReactNode;
-    /** A class name for the Tooltip parent div. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Adds the `disabled` prop to the Tooltip when true. */
     isDisabled?: boolean;
     /** Wraps the children of the tooltip in `ComponentWrapper` with `tabIndex=0` when true. */

package/dist/src/components/VideoPlayer/VideoPlayer.d.ts

@@ -1,16 +1,14 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare const VideoPlayerAspectRatiosArray: readonly ["fourByThree", "sixteenByNine", "square"];
 export declare const VideoPlayerTypesArray: readonly ["vimeo", "youtube"];
 export type VideoPlayerAspectRatios = typeof VideoPlayerAspectRatiosArray[number];
 export type VideoPlayerTypes = typeof VideoPlayerTypesArray[number];
-export interface VideoPlayerProps {
+export interface VideoPlayerProps extends BoxProps {
     /** Optional aspect ratio prop to control the sizing of the video player; if
      * omitted, the video player defaults to `sixteen-by-nine` */
     aspectRatio?: VideoPlayerAspectRatios;
-    /** Optional className you can add in addition to `video-player` */
-    className?: string;
     /** Optional string to set the text for a video description */
     descriptionText?: string;
     /** Optional string to set a code snippet provided by YouTube or Vimeo; the
@@ -23,8 +21,6 @@ export interface VideoPlayerProps {
     headingText?: string | JSX.Element;
     /** Optional string to set the text for a `HelperErrorText` component */
     helperText?: HelperErrorTextType;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** Optional title to be added to the `<iframe>` element for improved
      * accessibility; this title should describe in a few words the content of
      * the video; if omitted, a generic title will be added; if a `title`

package/dist/src/hooks/useMultiSelect.d.ts

@@ -12,7 +12,11 @@ export default function useMultiSelect(initialState?: SelectedItems): {
     selectedItems: {} | SelectedItems;
     setSelectedItems: (newState: SelectedItems) => void;
     onChange: (itemId: string, multiSelectId: string) => void;
-    onMixedStateChange: (parentId: string, multiSelectId: string, items: MultiSelectItem[]) => void;
+    onMixedStateChange: ({ parentId, multiSelectId, items, }: {
+        parentId: string;
+        multiSelectId: string;
+        items: MultiSelectItem[];
+    }) => void;
     onClear: (multiSelectId: string) => void;
     onClearAll: () => void;
 };

package/dist/src/hooks/useSafeId.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This function is used to generate a unique ID for the component.
+ * It uses the `useId` hook from React to generate a unique ID and
+ * sanitizes it using the `sanitizeString` function.
+ */
+export declare function useSafeId(userId?: string): string;

package/dist/src/index.d.ts

@@ -1,17 +1,17 @@
 export { Box, Center, chakra, Circle, ColorModeScript, cookieStorageManager, cookieStorageManagerSSR, FocusLock, Flex, Grid, GridItem, HStack, localStorageManager, Spacer, Square, Stack, useColorMode, useColorModeValue, useStyleConfig, useMediaQuery, useMultiStyleConfig, VStack, } from "@chakra-ui/react";
 export { default as DSProvider } from "./theme/provider";
 export { default as Accordion } from "./components/Accordion/Accordion";
-export type { AccordionTypes, AccordionDataProps, } from "./components/Accordion/Accordion";
+export type { AccordionVariants, AccordionDataProps, } from "./components/Accordion/Accordion";
 export { default as AlphabetFilter } from "./components/AlphabetFilter/AlphabetFilter";
 export type { AlphabetFilterProps } from "./components/AlphabetFilter/AlphabetFilter";
 export { default as AudioPlayer } from "./components/AudioPlayer/AudioPlayer";
 export type { AudioType, AudioPlayerProps, } from "./components/AudioPlayer/AudioPlayer";
 export { default as Banner } from "./components/Banner/Banner";
-export type { BannerTypes, BannerBgColors, BannerHighlightColors, BannerProps, } from "./components/Banner/Banner";
+export type { BannerVariants, BannerBgColors, BannerHighlightColors, BannerProps, } from "./components/Banner/Banner";
 export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
-export type { BreadcrumbsTypes, BreadcrumbProps, BreadcrumbsDataProps, } from "./components/Breadcrumbs/Breadcrumbs";
+export type { BreadcrumbsVariants, BreadcrumbProps, BreadcrumbsDataProps, } from "./components/Breadcrumbs/Breadcrumbs";
 export { default as Button } from "./components/Button/Button";
-export type { ButtonElementType, ButtonProps, ButtonSizes, ButtonTypes, } from "./components/Button/Button";
+export type { ButtonElementType, ButtonProps, ButtonSizes, ButtonVariants, } from "./components/Button/Button";
 export { default as ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
 export type { ButtonGroupProps } from "./components/ButtonGroup/ButtonGroup";
 export { default as Card, CardActions, CardContent, CardHeading, } from "./components/Card/Card";
@@ -40,20 +40,20 @@ export type { HeadingLevels, HeadingProps, HeadingSizes, } from "./components/He
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
 export type { HelperErrorTextProps } from "./components/HelperErrorText/HelperErrorText";
 export { default as Hero } from "./components/Hero/Hero";
-export type { HeroProps, HeroTypes } from "./components/Hero/Hero";
+export type { HeroProps, HeroVariants } from "./components/Hero/Hero";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
 export type { HorizontalRuleProps } from "./components/HorizontalRule/HorizontalRule";
 export { default as Icon } from "./components/Icons/Icon";
-export type { IconAlign, IconColors, IconNames, IconRotations, IconSizes, IconTypes, IconProps, } from "./components/Icons/Icon";
+export type { IconAlign, IconColors, IconNames, IconRotations, IconSizes, IconVariants, IconProps, } from "./components/Icons/Icon";
 export { default as Image } from "./components/Image/Image";
 export type { ComponentImageProps, ImageProps, ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/Image";
 export { default as Label } from "./components/Label/Label";
 export type { LabelProps } from "./components/Label/Label";
 export type { DimensionTypes, LayoutTypes, SectionTypes, } from "./helpers/types";
 export { default as Link } from "./components/Link/Link";
-export type { LinkProps, LinkTypes } from "./components/Link/Link";
+export type { LinkProps, LinkVariants } from "./components/Link/Link";
 export { default as List } from "./components/List/List";
-export type { DescriptionProps, ListProps, ListTypes, } from "./components/List/List";
+export type { DescriptionProps, ListProps, ListVariants, } from "./components/List/List";
 export { default as Logo } from "./components/Logo/Logo";
 export type { LogoNames, LogoProps, LogoSizes } from "./components/Logo/Logo";
 export { default as MatchMedia } from "../src/__tests__/mediaMatchMock";
@@ -68,7 +68,7 @@ export type { MultiSelectGroupProps } from "./components/MultiSelectGroup/MultiS
 export { default as NewsletterSignup } from "./components/NewsletterSignup/NewsletterSignup";
 export type { HighlightColorTypes, NewsletterSignupProps, NewsletterSignupViewType, } from "./components/NewsletterSignup/NewsletterSignup";
 export { default as Notification } from "./components/Notification/Notification";
-export type { NotificationProps, NotificationTypes, } from "./components/Notification/Notification";
+export type { NotificationProps, NotificationVariants, } from "./components/Notification/Notification";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export type { PaginationProps } from "./components/Pagination/Pagination";
 export { default as ProgressIndicator } from "./components/ProgressIndicator/ProgressIndicator";
@@ -80,7 +80,7 @@ export type { RadioGroupProps } from "./components/RadioGroup/RadioGroup";
 export { default as SearchBar } from "./components/SearchBar/SearchBar";
 export type { SearchBarProps } from "./components/SearchBar/SearchBar";
 export { default as Select } from "./components/Select/Select";
-export type { LabelPositions, SelectProps, SelectTypes, } from "./components/Select/Select";
+export type { LabelPositions, SelectProps, SelectVariants, } from "./components/Select/Select";
 export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
 export type { GridGaps, SimpleGridProps } from "./components/Grid/SimpleGrid";
 export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
@@ -92,21 +92,21 @@ export type { SliderProps } from "./components/Slider/Slider";
 export { default as SocialMediaLinks } from "./components/SocialMediaLinks/SocialMediaLinks";
 export type { SocialMediaLinkDataProps } from "./components/SocialMediaLinks/SocialMediaLinks";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
-export type { StatusBadgeProps, StatusBadgeTypes, } from "./components/StatusBadge/StatusBadge";
+export type { StatusBadgeProps, StatusBadgeVariants, } from "./components/StatusBadge/StatusBadge";
 export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
 export type { StructuredContentImagePosition, StructuredContentProps, } from "./components/StructuredContent/StructuredContent";
 export { default as StyledList } from "./components/StyledList/StyledList";
 export type { StyledListProps, StyledListTextSizes, } from "./components/StyledList/StyledList";
 export { default as SubNav, SubNavButton, SubNavLink, } from "./components/SubNav/SubNav";
 export { default as Table } from "./components/Table/Table";
-export type { TableBodyTextSizes, TableProps } from "./components/Table/Table";
+export type { TableProps } from "./components/Table/Table";
 export { default as Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
 export type { TabsDataProps, TabsProps } from "./components/Tabs/Tabs";
 export { default as TagSet } from "./components/TagSet/TagSet";
-export type { TagSetProps, TagSetTypeProps } from "./components/TagSet/TagSet";
+export type { TagSetProps } from "./components/TagSet/TagSet";
 export type { TagSetExploreDataProps, TagSetExploreProps, } from "./components/TagSet/TagSetExplore";
 export type { TagSetFilterDataProps, TagSetFilterProps, } from "./components/TagSet/TagSetFilter";
-export { Template, TemplateBreakout, TemplateTop, TemplateMain, TemplateMainNarrow, TemplateSidebar, TemplateBottom, } from "./components/Template/Template";
+export { Template, TemplateBreakout, TemplateContent, TemplateFooter, TemplateFull, TemplateHeader, TemplateMain, TemplateSidebar, } from "./components/Template/Template";
 export { default as Text } from "./components/Text/Text";
 export type { TextProps, TextSizes } from "./components/Text/Text";
 export { default as TextInput } from "./components/TextInput/TextInput";
@@ -117,7 +117,6 @@ export { default as Tooltip } from "./components/Tooltip/Tooltip";
 export type { TooltipProps } from "./components/Tooltip/Tooltip";
 export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
 export type { VideoPlayerAspectRatios, VideoPlayerProps, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";
-export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
 export { default as useCloseDropDown } from "./hooks/useCloseDropDown";
 export { default as useFormatNumber } from "./hooks/useFormatNumber";
 export { default as useMultiSelect } from "./hooks/useMultiSelect";
@@ -125,5 +124,4 @@ export { default as useNYPLBreakpoints } from "./hooks/useNYPLBreakpoints";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as useResponsiveSpacing } from "./hooks/useResponsiveSpacing";
 export { default as useScrollFadeStyles } from "./hooks/useScrollFadeStyles";
-export { default as useWindowSize } from "./hooks/useWindowSize";
 export type { AutoCompleteValues } from "./utils/constantValues";

package/dist/src/theme/components/breadcrumb.d.ts

@@ -1,5 +1,5 @@
 declare const Breadcrumb: {
-    baseStyle?: {
+    baseStyle?: () => {
         bg: string;
         color: string;
         fontSize: string;
@@ -21,8 +21,16 @@ declare const Breadcrumb: {
             };
             margin: string;
             maxWidth: string;
-            paddingStart: string;
-            paddingEnd: string;
+            paddingStart: {
+                base: string;
+                md: string;
+                xl: string;
+            };
+            paddingEnd: {
+                base: string;
+                md: string;
+                xl: string;
+            };
         };
         a: {
             _visited: {
@@ -85,7 +93,7 @@ declare const Breadcrumb: {
                     md: "none";
                 };
             };
-            "span:not(.breadcrumb-label)": {
+            "span:not(.ds-breadcrumbs-link-label)": {
                 clip: string;
                 height: {
                     base: string;
@@ -257,7 +265,7 @@ declare const Breadcrumb: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "blogs" | "booksAndMore" | "brand" | "connect" | "digitalCollections" | "education" | "locations" | "research" | "whatsOn";
+        variant?: "blogs" | "research" | "whatsOn" | "connect" | "booksAndMore" | "brand" | "digitalCollections" | "education" | "locations";
         colorScheme?: string;
     };
 };

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

@@ -10,7 +10,11 @@ export declare const baseButtonStyle: {
     lineHeight: string;
     minWidth: string;
     textDecoration: string;
+    transitionDuration: string;
     wordWrap: string;
+    "&:has(svg)": {
+        gap: string;
+    };
     svg: {
         fill: string;
     };
@@ -46,7 +50,11 @@ export declare const buttonBaseStyle: {
         lineHeight: string;
         minWidth: string;
         textDecoration: string;
+        transitionDuration: string;
         wordWrap: string;
+        "&:has(svg)": {
+            gap: string;
+        };
         svg: {
             fill: string;
         };
@@ -119,7 +127,11 @@ declare const Button: {
             lineHeight: string;
             minWidth: string;
             textDecoration: string;
+            transitionDuration: string;
             wordWrap: string;
+            "&:has(svg)": {
+                gap: string;
+            };
             svg: {
                 fill: string;
             };

package/dist/src/theme/components/datePicker.d.ts

@@ -1,6 +1,10 @@
 declare const DatePicker: {
     baseStyle?: {
         fieldset: {
+            /**
+             * In this instance, the legend element is mimicking a label element, so
+             * the label spacing is being used.
+             */
             legend: {
                 marginBottom: string;
             };

package/dist/src/theme/components/feedbackBox.d.ts

@@ -100,15 +100,27 @@ declare const FeedbackBox: {
                 zIndex: string;
             };
         };
+        radioGroup: {
+            ".ds-radioGroup-stack": {
+                flexDirection: {
+                    base: "column";
+                    md: "row";
+                };
+                gap: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
+            keys: ("radioGroup" | "closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
         }>;
     };
     variants?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
+            keys: ("radioGroup" | "closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
         }>;
     };
     defaultProps?: {
@@ -116,6 +128,6 @@ declare const FeedbackBox: {
         variant?: string | number;
         colorScheme?: string;
     };
-    parts: ("closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
+    parts: ("radioGroup" | "closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
 };
 export default FeedbackBox;

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

@@ -17,8 +17,8 @@ declare const Fieldset: {
             display: string;
             fontSize: string;
             fontWeight: string;
-            marginBottom: string;
             width: string;
+            mb: string;
         };
     };
     sizes?: {

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

@@ -106,7 +106,6 @@ declare const labelLegendText: {
     display: string;
     fontSize: string;
     fontWeight: string;
-    marginBottom: string;
     width: string;
     span: {
         fontWeight: string;
@@ -115,9 +114,6 @@ declare const labelLegendText: {
         color: string;
     };
 };
-declare const labelLegendTextSpecialSpacing: {
-    marginBottom: string;
-};
 declare const selectTextInputDisabledStyles: {
     bg: string;
     borderColor: string;
@@ -152,4 +148,21 @@ declare const textMargin: {
     margin: string;
     marginBottom: string;
 };
-export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioHoverStyles, checkboxRadioLabelStyles, customFocusColor, defaultElementSizes, labelLegendText, labelLegendTextSpecialSpacing, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };
+declare const responsiveSpacing: {
+    gridGap: {
+        base: string;
+        md: string;
+        xl: string;
+    };
+    margin: {
+        base: string;
+        md: string;
+        xl: string;
+    };
+    padding: {
+        base: string;
+        md: string;
+        xl: string;
+    };
+};
+export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioHoverStyles, checkboxRadioLabelStyles, customFocusColor, defaultElementSizes, labelLegendText, responsiveSpacing, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };

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

@@ -1,66 +1,4 @@
 export declare const headings: {
-    one: {
-        base: {
-            width: string;
-            a: {
-                textUnderlineOffset: string;
-            };
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-        };
-    };
-    two: {
-        base: {
-            width: string;
-            a: {
-                textUnderlineOffset: string;
-            };
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
-        };
-    };
-    three: {
-        base: {
-            width: string;
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
-        };
-    };
-    four: {
-        base: {
-            width: string;
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
-        };
-    };
-    fallback: {
-        base: {
-            width: string;
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
-        };
-    };
     display1: {
         base: {
             fontSize: {
@@ -210,7 +148,7 @@ export declare const headings: {
     };
 };
 declare const Heading: {
-    baseStyle?: ({ isCapitalized, isUppercase, isLowercase, noSpace }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+    baseStyle?: ({ isCapitalized, isUppercase, isLowercase }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
         base: {
             "a:only-child": {
                 textDecoration: string;
@@ -231,23 +169,19 @@ declare const Heading: {
                 color: string;
                 textUnderlineOffset: string;
             };
-            color: string;
             margin: string;
             textTransform: string;
+        };
+        defaultColorStyle: {
+            color: string;
             _dark: {
                 color: string;
             };
         };
-        headingWrapper: {
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            marginBottom: string;
-        };
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("base" | "headingWrapper")[];
+            keys: ("base" | "defaultColorStyle")[];
         }>;
     };
     variants?: {
@@ -506,6 +440,6 @@ declare const Heading: {
         variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "heading7" | "heading8";
         colorScheme?: string;
     };
-    parts: ("base" | "headingWrapper")[];
+    parts: ("base" | "defaultColorStyle")[];
 };
 export default Heading;

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

@@ -1,34 +1,25 @@
-import { StyleFunctionProps } from "@chakra-ui/system";
+import { StyleFunctionProps } from "@chakra-ui/react";
 interface HelperErrorTextBaseStyle extends StyleFunctionProps {
     isInvalid: boolean;
 }
-declare const helperErrorText: {
+declare const HelperErrorText: {
     baseStyle?: ({ isInvalid }: HelperErrorTextBaseStyle) => {
         fontSize: string;
         color: string;
         _dark: {
             color: string;
         };
-        innerChild: {
-            marginTop: string;
-            marginBottom: string;
-        };
     };
     sizes?: {
-        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: "innerChild"[];
-        }>;
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
     };
     variants?: {
-        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: "innerChild"[];
-        }>;
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
     };
     defaultProps?: {
         size?: string | number;
         variant?: string | number;
         colorScheme?: string;
     };
-    parts: "innerChild"[];
 };
-export default helperErrorText;
+export default HelperErrorText;