@nypl/design-system-react-components 4.0.0-alpha-rc2 → 4.0.0-alpha-rc4

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

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

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

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/Template/Template.d.ts

@@ -1,18 +1,14 @@
 /// <reference types="react" />
 import { BoxProps, ChakraComponent } from "@chakra-ui/react";
-export declare const sidebarPlacementArray: readonly ["none", "left", "right"];
-export type SidebarPlacement = typeof sidebarPlacementArray[number];
-export interface TemplateProps extends BoxProps {
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Renders the `TemplateSidebar` component either on the left or
-     * right side of the `TemplateMain` component. */
-    sidebar?: SidebarPlacement;
+export declare const templateVariantArray: readonly ["full", "narrow", "sidebarLeft", "sidebarRight"];
+export type TemplateVariant = typeof templateVariantArray[number];
+export interface TemplateProps {
+    /** Specifies the layout and DOM structure related to the content region. */
+    variant?: TemplateVariant;
 }
-export interface TemplateMainProps extends BoxProps {
-    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
-     * anchor for the application skip navigation. */
-    id?: string;
+export interface TemplateChildProps extends BoxProps {
+}
+export interface TemplateMainProps extends TemplateChildProps {
 }
 /**
  * The main top-level parent component that wraps all template-related
@@ -20,43 +16,37 @@ export interface TemplateMainProps extends BoxProps {
  */
 declare const Template: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<TemplateProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<TemplateProps>>;
 /**
- * This optional component renders its children above the main content
- * and spans edge-to-edge. It is most useful for `Breadcrumbs`, `Hero`,
- * or other banner-like components.
+ * This component renders an HTML `<header>` element.
+ */
+declare const TemplateHeader: React.FC<React.PropsWithChildren<TemplateChildProps>>;
+/**
+ * This component renders an HTML `<footer>` element.
  */
-declare const TemplateBreakout: React.FC<React.PropsWithChildren<BoxProps>>;
+declare const TemplateFooter: React.FC<React.PropsWithChildren<TemplateChildProps>>;
 /**
- * This optional component renders content at a max width of 1280px and
- * will render below `TemplateBreakout` (if being used) and above the
- * main content and sidebar (if one exists).
+ * This component renders an HTML `<main>` element.
  */
-declare const TemplateTop: React.FC<React.PropsWithChildren<BoxProps>>;
+declare const TemplateMain: React.FC<React.PropsWithChildren<TemplateChildProps>>;
 /**
- * This component renders an HTML `<main>` element with an id of "mainContent".
- * The "mainContent" id should be used as the consuming application's skip
- * navigation link. The component should not be used in conjunction with
- * `TemplateMainNarrow`.
+ * This optional component spans the full width of the browser window
+ * (edge-to-edge). It is most useful for `Breadcrumbs`, `Hero`, or other
+ * banner-like components.
  */
-declare const TemplateMain: React.FC<React.PropsWithChildren<TemplateMainProps>>;
+declare const TemplateBreakout: React.FC<React.PropsWithChildren<TemplateChildProps>>;
 /**
- * This component renders an HTML `<main>` element with an id of "mainContent".
- * The "mainContent" id should be used as the consuming application's skip
- * navigation link. It provides a narrower container for better readability if
- * the main content includes long text. This component is meant to be used in
- * lieu of `TemplateMain`, and should not be used in conjunction with
- * `TemplateSidebar`.
+ * This optional component will span the full width of the content area and will
+ * render content at a max width of 1280px.
  */
-declare const TemplateMainNarrow: React.FC<React.PropsWithChildren<TemplateMainProps>>;
+declare const TemplateFull: React.FC<React.PropsWithChildren<TemplateChildProps>>;
 /**
- * This optional component is used to render content in a sidebar column.
- * It must be paired with the `TemplateMain` component. An optional `sidebar`
- * prop value of "left" or "right" must be passed to the `Template` wrapper
- * to render the correct CSS styles.
+ * The width of this component is dependent on the value of the `variant` prop.
  */
-declare const TemplateSidebar: React.FC<React.PropsWithChildren<BoxProps>>;
+declare const TemplateContent: React.FC<React.PropsWithChildren<TemplateMainProps>>;
 /**
- * This optional component renders content at a max width of 1280px and
- * will always render below the main content and sidebar (if one exists).
+ * This optional component is used to render content in a sidebar column. For
+ * proper rendering, this component must be paired with the `TemplateMain`
+ * component and the `variant` prop must be set to "sidebarLeft" or
+ * "sidebarRight".
  */
-declare const TemplateBottom: React.FC<React.PropsWithChildren<BoxProps>>;
-export { Template, TemplateBreakout, TemplateTop, TemplateMain, TemplateMainNarrow, TemplateSidebar, TemplateBottom, };
+declare const TemplateSidebar: React.FC<React.PropsWithChildren<TemplateChildProps>>;
+export { Template, TemplateBreakout, TemplateContent, TemplateFooter, TemplateFull, TemplateHeader, TemplateMain, TemplateSidebar, };

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

@@ -106,7 +106,7 @@ export { default as TagSet } from "./components/TagSet/TagSet";
 export type { TagSetProps, TagSetTypeProps } 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";

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/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;
@@ -238,12 +176,6 @@ declare const Heading: {
                 color: string;
             };
         };
-        headingWrapper: {
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            marginBottom: string;
-        };
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{

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;

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

@@ -7,8 +7,6 @@ declare const HorizontalRule: {
         bg: string;
         border: string;
         height: string;
-        marginBottom: string;
-        marginTop: string;
         marginStart: string | number;
         marginEnd: string | number;
         _dark: {

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

@@ -13,7 +13,6 @@ declare const Label: {
         display: string;
         fontSize: string;
         fontWeight: string;
-        marginBottom: string;
         width: string;
         _dark: {
             color: string;