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

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/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, 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/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;

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

@@ -54,8 +54,6 @@ export declare const unorderedStyles: (props?: ListBaseStyle) => {
             };
         };
     };
-    margin: string;
-    marginBottom: string;
 };
 export declare const descriptionStyles: (showRowDividers?: boolean) => {
     dl: {
@@ -173,14 +171,6 @@ declare const List: {
                         };
                     };
                 };
-                margin: string;
-                marginBottom: string;
-            };
-        };
-        ol: {
-            base: {
-                margin: string;
-                marginBottom: string;
             };
         };
         dl: ({ showRowDividers }: StyleFunctionProps) => {
@@ -251,7 +241,7 @@ declare const List: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "dl" | "ol" | "ul";
+        variant?: "dl" | "ul";
         colorScheme?: string;
     };
     parts: ("base" | "heading")[];

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

@@ -24,10 +24,10 @@ declare const RadioGroup: {
             };
             wordWrap?: string;
             display: string;
+            mb: string;
             color: string;
             fontSize: string;
             fontWeight: string;
-            marginBottom: string;
             span: {
                 fontWeight: string;
             };

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

@@ -6,68 +6,6 @@ interface StructuredContentBaseStyle extends StyleFunctionProps {
 }
 declare const StructuredContent: {
     baseStyle?: ({ hasFigureImage, imageAspectRatio, imagePosition, }: StructuredContentBaseStyle) => {
-        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: {
@@ -287,7 +225,6 @@ declare const StructuredContent: {
                 };
             };
             margin: string;
-            marginBottom: string;
             marginInlineStart: string;
             paddingStart: string;
             padding: string;

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

@@ -19,7 +19,6 @@ declare const StyledList: {
             };
         };
         margin: string;
-        marginBottom: string;
         marginInlineStart: string;
         paddingStart: string;
         padding: string;

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

@@ -5,15 +5,13 @@ interface TextBaseStyle extends Partial<StyleFunctionProps> {
     isCapitalized?: boolean;
     isUppercase?: boolean;
     isLowercase?: boolean;
-    noSpace?: boolean;
     variant?: string;
 }
 declare const Text: {
-    baseStyle?: ({ isBold, isItalic, isCapitalized, isUppercase, isLowercase, noSpace, variant, }: TextBaseStyle) => {
+    baseStyle?: ({ isBold, isItalic, isCapitalized, isUppercase, isLowercase, variant, }: TextBaseStyle) => {
         fontStyle: string;
         fontWeight: string;
         textTransform: string;
-        marginBottom: string;
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;

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

@@ -55,18 +55,6 @@ declare const global: {
             };
         };
     };
-    p: {
-        margin: string;
-        marginBottom: string;
-    };
-    ul: {
-        margin: string;
-        marginBottom: string;
-    };
-    ol: {
-        margin: string;
-        marginBottom: string;
-    };
     "*, *::before, &::after": {
         boxSizing: string;
     };