@nypl/design-system-react-components 4.0.0-alpha-rc3 → 4.0.0-alpha-rc5

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

@@ -2,13 +2,11 @@ import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const notificationVariantsArray: readonly ["standard", "announcement", "warning"];
 export type NotificationVariants = typeof notificationVariantsArray[number];
-interface BaseProps {
+interface BaseProps extends BoxProps {
     /** Optional prop to control text alignment in `NotificationContent` */
     alignText?: boolean;
     /** Optional custom `Icon` that will override the default `Icon`. */
     icon?: JSX.Element;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Optional prop to control horizontal alignment of the `Notification` content */
     isCentered?: boolean;
     /** Optional content to be rendered in a `NotificationHeading` component. A
@@ -22,9 +20,9 @@ interface BaseProps {
     /** Prop to display the `Notification` icon. Defaults to `true`. */
     showIcon?: boolean;
 }
+type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
 type NotificationHeadingProps = Omit<BasePropsWithoutAlignText, "showIcon">;
 type NotificationContentProps = Omit<BaseProps, "icon">;
-type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
 export interface NotificationProps extends BasePropsWithoutAlignText, BoxProps {
     /** Optional prop to control whether a `Notification` can be dismissed
      * (closed) by a user. */
@@ -43,8 +41,8 @@ export declare const NotificationHeading: ChakraComponent<React.ForwardRefExotic
  */
 export declare const NotificationContent: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<NotificationContentProps> & React.RefAttributes<HTMLDivElement>>, NotificationContentProps>;
 /**
- * Component used to present users with three different levels of notifications:
- * standard, announcement, and warning.
+ * `Notification` is a component used to present users with three different levels
+ * of notifications: standard, announcement, and warning.
  */
 export declare const Notification: ChakraComponent<React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>, NotificationProps>;
 export default Notification;

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

@@ -9,8 +9,6 @@ export interface PaginationProps extends BoxProps {
      * to use for a link's `href` attribute. This is used when the current
      * page should refresh when navigating. */
     getPageHref?: undefined | ((pageNumber: number) => string);
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** The initially selected page (default value is 1). */
     initialPage?: number;
     /** The callback function called when an item is selected and the current

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

@@ -7,8 +7,6 @@ export type ProgressIndicatorSizes = typeof progressIndicatorSizesArray[number];
 export type ProgressIndicatorTypes = typeof progressIndicatorTypesArray[number];
 export type ProgressIndicatorLabelPlacements = typeof progressIndicatorLabelPlacementsArray[number];
 interface BaseProgressIndicatorProps extends BoxProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id: string;
     /** Whether the `ProgressIndicator` should be linear or circular. */
     indicatorType?: ProgressIndicatorTypes;
     /** Whether the progress animation should display because the `value` prop is
@@ -35,7 +33,7 @@ interface CircularProgressIndicatorProps extends BaseProgressIndicatorProps {
 }
 export type ProgressIndicatorProps = LinearProgressIndicatorProps | CircularProgressIndicatorProps;
 /**
- * A component that displays a progress status for any task that takes a long
+ * `ProgressIndicator` displays a progress status for any task that takes a long
  * time to complete or consists of multiple steps. Examples include downloading,
  * uploading, or processing.
  */

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

@@ -4,11 +4,8 @@ import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface RadioProps extends Pick<BoxProps, keyof ChakraProps>, Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "height" | "width"> {
     /** Optional string to populate the HelperErrorText for the 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.
-     */
+     * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
     /** When using the Radio as a "controlled" form element, you can specify the
      * `Radio`'s checked state using this prop. You must also pass an onChange prop.

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

@@ -7,8 +7,6 @@ export interface RadioGroupProps extends Omit<BoxProps, "onChange"> {
     defaultValue?: string;
     /** 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 error state */
     invalidText?: HelperErrorTextType;
     /** Adds the 'disabled' prop to the input when true. */

package/dist/src/components/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface RadioGroupContextValue {
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isRequired: boolean;
+    name: string;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue>;
+export declare const useRadioGroup: () => RadioGroupContextValue;
+export {};

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

@@ -22,8 +22,6 @@ export interface SearchBarProps extends Pick<BoxProps, keyof ChakraProps>, Omit<
     headingText?: string | JSX.Element;
     /** The text to display below the form in a `HelperErrorText` component. */
     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;

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

@@ -10,8 +10,6 @@ export interface SelectProps extends Pick<BoxProps, keyof ChakraProps>, Omit<Rea
     defaultValue?: string;
     /** Optional string to populate the `HelperErrorText` for the 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;

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

@@ -10,8 +10,6 @@ export interface SkeletonLoaderProps extends BoxProps {
     /** Optional numeric value to control the number of lines for heading
      * placeholder; default value is `1`. */
     headingSize?: number;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Optional value to control the aspect ratio of the image placeholder;
      * default value is `"square"`. */
     imageAspectRatio?: SkeletonLoaderImageRatios;

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

@@ -1,8 +1,6 @@
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface SkipNavigationProps extends BoxProps {
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** The anchor target for the main skip link. The default is "#mainContent". */
     target?: string;
 }

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

@@ -7,8 +7,6 @@ export interface SliderProps extends Pick<BoxProps, keyof ChakraProps>, Omit<Inp
     defaultValue?: number | number[];
     /** 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;

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

@@ -19,8 +19,6 @@ export interface SocialMediaLinkDataProps {
 interface BaseSocialMediaLinksProps extends BoxProps {
     /** Any of three optional values that will change the color of the svg and label text (if any). */
     color?: ColorType;
-    /** ID that other components can cross-reference for accessibility purposes. */
-    id?: string;
     /** Optional desktop layout. Smaller viewports are always in a column if there are labels and
      * in a row if there are no labels. */
     layout?: LayoutTypes;

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

@@ -4,8 +4,6 @@ import { messageVariantsArray } from "../../theme/sharedTypes";
 export declare const statusBadgeFontSizeArray: readonly ["desktop.body.body1", "desktop.body.body2", "desktop.caption"];
 export type StatusBadgeVariants = typeof messageVariantsArray[number];
 export interface StatusBadgeProps extends BoxProps {
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** Semantic type of the status badge. */
     variant?: StatusBadgeVariants;
 }

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

@@ -14,8 +14,6 @@ export interface StructuredContentProps extends BoxProps {
      * a DS Heading component that can be passed in.
      */
     headingText?: string | JSX.Element;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Object used to create and render the `Image` component. */
     imageProps?: StructuredContentImageProps;
     /** Required value to set the text for the body content. */

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

@@ -3,8 +3,6 @@ import React from "react";
 export declare const textSizesArray: readonly ["default", "body1", "body2", "caption"];
 export type StyledListTextSizes = typeof textSizesArray[number];
 export interface StyledListProps extends Omit<BoxProps, "style"> {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Data to render if `li` children elements are not passed. It must be an
      * array of strings or JSX elements. */
     listItems?: (string | JSX.Element)[];

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

@@ -14,11 +14,6 @@ export interface SubNavProps extends BoxProps {
      * Custom color for SubNavLink, SubNavButton, and icons.
      */
     highlightColor?: highlightColors;
-    /**
-     * Optional unique ID for accessibility, allowing other components
-     * to reference this element.
-     */
-    id?: string;
     /**
      * Primary actions displayed on the left side of the SubNav.
      * Use SubNavButton and SubNavLink components, which mirror

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

@@ -7,8 +7,6 @@ export interface TabsDataProps {
 export interface TabsProps extends Omit<BoxProps, "onChange"> {
     /** The index of the tab to display on the initial render. */
     defaultIndex?: number;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
     /** The callback function invoked after every tab change event. The argument passed to the callback is the index of the tab just selected. */
     onChange?: (index: number) => any;
     /** Array of data to display */

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

@@ -1,13 +1,8 @@
-import { BoxProps, ChakraComponent } from "@chakra-ui/react";
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { TagSetExploreProps } from "./TagSetExplore";
 import { TagSetFilterProps } from "./TagSetFilter";
-export interface BaseTagSetProps extends BoxProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-}
-export type TagSetTypeProps = TagSetFilterProps | TagSetExploreProps;
-export type TagSetProps = BaseTagSetProps & TagSetTypeProps;
+export type TagSetProps = TagSetFilterProps | TagSetExploreProps;
 export declare function isFilterVariant(variant: TagSetProps["variant"]): variant is "filter";
 /**
  * The `TagSet` component renders a group of individual tags which have two

package/dist/src/components/TagSet/TagSetExplore.d.ts

@@ -1,3 +1,4 @@
+import { BoxProps } from "@chakra-ui/react";
 import React from "react";
 import { IconNames } from "../Icons/Icon";
 export interface TagSetExploreDataProps {
@@ -8,7 +9,7 @@ export interface TagSetExploreDataProps {
     /** The content to display; should be a link-type component. */
     label: JSX.Element;
 }
-export interface TagSetExploreProps {
+export interface TagSetExploreProps extends BoxProps {
     /** Whether the tags should be removable. This prop is not used in the
      * "explore" variant. */
     isDismissible?: never;
@@ -21,7 +22,7 @@ export interface TagSetExploreProps {
     /** The array of data to display as tags. */
     tagSetData: TagSetExploreDataProps[];
     /** The `TagSet` variant to render; "filter" by default. */
-    variant: "explore";
+    variant?: "explore";
 }
 /**
  * The "explore" `TagSet` variant will always display the tags passed as data.

package/dist/src/components/TagSet/TagSetFilter.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { BoxProps } from "@chakra-ui/react";
 import { IconNames } from "../Icons/Icon";
 export interface TagSetFilterDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
@@ -10,9 +11,7 @@ export interface TagSetFilterDataProps {
     /** Any other properties the consuming app may need for app logic filtering. */
     [key: string]: string;
 }
-export interface TagSetFilterProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+export interface TagSetFilterProps extends Omit<BoxProps, "onClick"> {
     /** Whether the tags should be removable. */
     isDismissible?: boolean;
     /** The function to perform when a tag is clicked when `isDismissible` is true. */
@@ -20,7 +19,7 @@ export interface TagSetFilterProps {
     /** The array of data to display as tags. */
     tagSetData: TagSetFilterDataProps[];
     /** The `TagSet` variant to render; "filter" by default. */
-    variant: "filter";
+    variant?: "filter";
 }
 /**
  * The "filter" `TagSet` variant will display tags that can be removed when

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

@@ -3,8 +3,6 @@ import React from "react";
 export declare const textSizesArray: readonly ["default", "body1", "body2", "caption", "tag", "mini", "overline1", "overline2", "subtitle1", "subtitle2"];
 export type TextSizes = typeof textSizesArray[number];
 export interface TextProps extends BoxProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Optional prop used to show bolded text */
     isBold?: boolean;
     /** Optional prop used to show itlicized text */
@@ -15,8 +13,6 @@ export interface TextProps extends BoxProps {
     isUppercase?: boolean;
     /** Optional prop used to show lower case text */
     isLowercase?: boolean;
-    /** Optional prop used to remove default spacing */
-    noSpace?: boolean;
     /** Optional prop to control the text styling */
     size?: TextSizes;
 }

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

@@ -30,8 +30,6 @@ export interface InputProps extends TextInputPropsWithHTML {
     autoComplete?: AutoCompleteValues;
     /** 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. */

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

@@ -9,8 +9,6 @@ export interface ToggleProps extends Pick<BoxProps, keyof ChakraProps>, Omit<Inp
     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;

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

@@ -3,8 +3,6 @@ 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;
-    /** 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

@@ -21,8 +21,6 @@ export interface VideoPlayerProps extends BoxProps {
     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/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

@@ -103,10 +103,10 @@ 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, TemplateMain, TemplateSidebar, } 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";

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

@@ -85,7 +85,7 @@ declare const Breadcrumb: {
                     md: "none";
                 };
             };
-            "span:not(.breadcrumb-label)": {
+            "span:not(.ds-breadcrumbs-link-label)": {
                 clip: string;
                 height: {
                     base: string;

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

@@ -12,6 +12,9 @@ export declare const baseButtonStyle: {
     textDecoration: string;
     transitionDuration: string;
     wordWrap: string;
+    "&:has(svg)": {
+        gap: string;
+    };
     svg: {
         fill: string;
     };
@@ -49,6 +52,9 @@ export declare const buttonBaseStyle: {
         textDecoration: string;
         transitionDuration: string;
         wordWrap: string;
+        "&:has(svg)": {
+            gap: string;
+        };
         svg: {
             fill: string;
         };
@@ -123,6 +129,9 @@ declare const Button: {
             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

@@ -101,7 +101,7 @@ declare const FeedbackBox: {
             };
         };
         radioGroup: {
-            ".radioGroupStack": {
+            ".ds-radioGroup-stack": {
                 flexDirection: {
                     base: "column";
                     md: "row";

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,4 @@ declare const textMargin: {
     margin: string;
     marginBottom: string;
 };
-export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioHoverStyles, checkboxRadioLabelStyles, customFocusColor, defaultElementSizes, labelLegendText, labelLegendTextSpecialSpacing, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };
+export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioHoverStyles, checkboxRadioLabelStyles, customFocusColor, defaultElementSizes, labelLegendText, 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;