@nypl/design-system-react-components 1.0.3 → 1.0.6

package/dist/components/Grid/SimpleGrid.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type GridGaps = "grid.xxs" | "grid.xs" | "grid.s" | "grid.m" | "grid.l" | "grid.xl" | "grid.xxl";
 export interface SimpleGridProps {
     /** Additional class name. */
@@ -13,5 +13,7 @@ export interface SimpleGridProps {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
 }
-export declare const SimpleGrid: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SimpleGridProps>) => JSX.Element, {}>;
+export declare const SimpleGrid: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SimpleGridProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default SimpleGrid;

package/dist/components/Heading/Heading.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type HeadingSizes = "primary" | "secondary" | "tertiary" | "callout";
 export declare type HeadingLevels = "one" | "two" | "three" | "four" | "five" | "six";
 export interface HeadingProps {
@@ -6,6 +6,12 @@ export interface HeadingProps {
     className?: string;
     /** Optional ID that other components can cross reference for accessibility purposes */
     id?: string;
+    /** Optional prop used to show capitalized text */
+    isCapitalized?: boolean;
+    /** Optional prop used to show upper case text */
+    isUppercase?: boolean;
+    /** Optional prop used to show lower case text */
+    isLowercase?: boolean;
     /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed,
      * `Heading` will default to `<h2>` */
     level?: HeadingLevels;
@@ -23,5 +29,7 @@ export interface HeadingProps {
     /** Optional className for the URL when the `url` prop is passed */
     urlClass?: string;
 }
-export declare const Heading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<HeadingProps>) => JSX.Element, {}>;
+export declare const Heading: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HeadingProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLHeadingElement>>, {}>;
 export default Heading;

package/dist/components/HelperErrorText/HelperErrorText.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare type AriaLiveValues = "assertive" | "off" | "polite";
 export declare type HelperErrorTextType = string | JSX.Element;
 interface HelperErrorTextProps {
@@ -25,5 +25,5 @@ interface HelperErrorTextProps {
 /**
  * Helper or error text for forms components.
  */
-export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<({ ariaAtomic, ariaLive, className, id, isInvalid, text, ...rest }: HelperErrorTextProps) => JSX.Element, {}>;
+export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HelperErrorTextProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default HelperErrorText;

package/dist/components/Hero/Hero.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ComponentImageProps } from "../Image/Image";
 export declare type HeroTypes = "primary" | "secondary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "tertiary" | "campaign" | "fiftyFifty";
 export declare const heroSecondaryTypes: string[];
@@ -36,5 +36,7 @@ export interface HeroProps {
      * underneath the heading element. */
     subHeaderText?: string | JSX.Element;
 }
-export declare const Hero: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<HeroProps>) => JSX.Element, {}>;
+export declare const Hero: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HeroProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Hero;

package/dist/components/HorizontalRule/HorizontalRule.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface HorizontalRuleProps {
     /** Optional alignment value to align the horizontal rule to one side or the
      * other when the width is less than 100%. If omitted, the horizontal rule
@@ -7,5 +7,5 @@ export interface HorizontalRuleProps {
     /** ClassName you can add in addition to `horizontal-rule` */
     className?: string;
 }
-export declare const HorizontalRule: import("@chakra-ui/react").ChakraComponent<(props: HorizontalRuleProps) => JSX.Element, {}>;
+export declare const HorizontalRule: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HorizontalRuleProps & React.RefAttributes<HTMLDivElement & HTMLHRElement>>, {}>;
 export default HorizontalRule;

package/dist/components/Icons/Icon.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 export declare type IconAlign = "left" | "right" | "none";
 export declare type IconColors = "ui.black" | "ui.white" | "brand.primary" | "brand.secondary" | "section.blogs.primary" | "section.blogs.secondary" | "section.books-and-more.primary" | "section.books-and-more.secondary" | "section.education.primary" | "section.education.secondary" | "section.locations.primary" | "section.locations.secondary" | "section.research.primary" | "section.research.secondary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.research-library.schwartzman" | "section.whats-on.primary" | "section.whats-on.secondary";
-export declare type IconNames = "accessibilityFull" | "accessibilityPartial" | "actionCheckCircle" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "alertNotificationImportant" | "arrow" | "check" | "clock" | "close" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "minus" | "plus" | "search" | "speakerNotes" | "utilityAccountFilled" | "utilityAccountUnfilled" | "utilityHamburger" | "utilitySearch";
+export declare type IconNames = "accessibilityFull" | "accessibilityPartial" | "actionCheckCircle" | "actionCheckCircleFilled" | "actionExit" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "actionPower" | "actionRegistration" | "actionSettings" | "alertNotificationImportant" | "alertWarningFilled" | "alertWarningOutline" | "arrow" | "building" | "check" | "clock" | "close" | "decorativeEnvelope" | "decorativeLibraryCard" | "decorativeShoppingBag" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "legacyAccountFilled" | "legacyAccountUnfilled" | "legacySocialFacebook" | "legacySocialInstagram" | "legacySocialTwitter" | "legacySocialYoutube" | "locator" | "minus" | "plus" | "search" | "socialFacebook" | "socialInstagram" | "socialTumblr" | "socialTwitter" | "socialYoutube" | "speakerNotes" | "utilityAccountFilled" | "utilityAccountUnfilled" | "utilityHamburger" | "utilitySearch";
 export declare type IconRotationTypes = "rotate0" | "rotate90" | "rotate180" | "rotate270";
 export declare type IconSizes = "default" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
 export declare type IconTypes = "default" | "breadcrumbs";
@@ -33,5 +33,7 @@ export interface IconProps {
 /**
  * Renders SVG-based icons.
  */
-export declare const Icon: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<IconProps>) => JSX.Element, {}>;
+export declare const Icon: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<IconProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & SVGSVGElement>>, {}>;
 export default Icon;

package/dist/components/Icons/IconSvgs.d.ts

@@ -2,14 +2,25 @@ declare const _default: {
     accessibilityFull: string;
     accessibilityPartial: string;
     actionCheckCircle: string;
+    actionCheckCircleFilled: string;
+    actionExit: string;
     actionHelpDefault: string;
     actionHelpOutline: string;
     actionLaunch: string;
+    actionPower: string;
+    actionRegistration: string;
+    actionSettings: string;
     alertNotificationImportant: string;
+    alertWarningFilled: string;
+    alertWarningOutline: string;
     arrow: string;
+    building: string;
     check: string;
     clock: string;
     close: string;
+    decorativeEnvelope: string;
+    decorativeLibraryCard: string;
+    decorativeShoppingBag: string;
     download: string;
     errorFilled: string;
     errorOutline: string;
@@ -21,9 +32,21 @@ declare const _default: {
     fileTypeSpreadsheet: string;
     fileTypeVideo: string;
     headset: string;
+    legacyAccountFilled: string;
+    legacyAccountUnfilled: string;
+    legacySocialFacebook: string;
+    legacySocialInstagram: string;
+    legacySocialTwitter: string;
+    legacySocialYoutube: string;
+    locator: string;
     minus: string;
     plus: string;
     search: string;
+    socialFacebook: string;
+    socialInstagram: string;
+    socialTumblr: string;
+    socialTwitter: string;
+    socialYoutube: string;
     speakerNotes: string;
     utilityAccountFilled: string;
     utilityAccountUnfilled: string;

package/dist/components/Image/Image.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare type ImageRatios = "fourByThree" | "oneByTwo" | "original" | "sixteenByNine" | "square" | "threeByFour" | "threeByTwo" | "twoByOne";
 export declare type ImageSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
 export declare type ImageTypes = "default" | "circle";
@@ -15,6 +15,8 @@ export interface ComponentImageProps {
     component?: JSX.Element;
     /** Optional value to render as a credit for the internal `Image` component. */
     credit?: string;
+    /** Flag to set the internal `Image` component to `isLazy` mode. */
+    isLazy?: boolean;
     /** Optional value to control the size of the internal `Image` component.
      * Defaults to `ImageSizes.Default`. */
     size?: ImageSizes;
@@ -54,8 +56,10 @@ export interface ImageProps extends ImageWrapperProps {
     credit?: string;
     /** Optional value for the image type */
     imageType?: ImageTypes;
+    /** Flag to set the internal `Image` component to `isLazy` mode. */
+    isLazy?: boolean;
     /** The src attribute is required, and contains the path to the image you want to embed. */
     src?: string;
 }
-export declare const Image: import("@chakra-ui/react").ChakraComponent<(props: ImageProps) => JSX.Element, {}>;
+export declare const Image: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Image;

package/dist/components/Label/Label.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 interface LabelProps {
     /** Additional CSS class name to render in the `label` element. */
     className?: string;
@@ -16,5 +16,7 @@ interface LabelProps {
 /**
  * A label for form inputs. It should never be used alone.
  */
-export declare const Label: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<LabelProps>) => JSX.Element, {}>;
+export declare const Label: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LabelProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & HTMLLabelElement>>, {}>;
 export default Label;

package/dist/components/Link/Link.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type LinkTypes = "action" | "backwards" | "button" | "default" | "external" | "forwards";
 export interface LinkProps {
     /** Any child node passed to the component. */
@@ -16,5 +16,5 @@ export interface LinkProps {
  * A component that uses an `href` prop or a child anchor element, to create
  * an anchor element with added styling and conventions.
  */
-export declare const Link: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>, {}>;
+export declare const Link: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLDivElement & HTMLAnchorElement>>, {}>;
 export default Link;

package/dist/components/List/List.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type ListTypes = "ol" | "ul" | "dl";
 interface DescriptionProps {
     term: string;
@@ -31,5 +31,7 @@ export interface ListProps {
  * and `dd` elements based on the `type` prop. Note that the `title` prop will
  * only display for the `Description` list type.
  */
-export declare const List: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<ListProps>) => any, {}>;
+export declare const List: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ListProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, {}>;
 export default List;

package/dist/components/Logo/Logo.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
+import React from "react";
+export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnColor" | "mlnWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
 export declare type LogoSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
 export interface LogoProps {
     /** Optional className that will be added to the parent element */
@@ -22,5 +22,7 @@ export interface LogoProps {
  * The `Logo` component renders SVG-based logos and color variants that are
  * commonly used by the New York Public Library.
  */
-export declare const Logo: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<LogoProps>) => JSX.Element, {}>;
+export declare const Logo: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<LogoProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement & SVGSVGElement>>, {}>;
 export default Logo;

package/dist/components/Logo/LogoSvgs.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     lpaColor: string;
     lpaWhite: string;
     mlnBlack: string;
+    mlnColor: string;
     mlnWhite: string;
     nyplFullBlack: string;
     nyplFullWhite: string;

package/dist/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 interface BaseModalProps {
     bodyContent?: string | JSX.Element;
     closeButtonLabel?: string;
@@ -19,7 +19,9 @@ export interface ModalProps {
  * internal `Modal` component. Note that props to update the internal `Modal`
  * component are passed through to the `modalProps` prop.
  */
-export declare const ModalTrigger: import("@chakra-ui/react").ChakraComponent<({ buttonText, id, modalProps, ...rest }: React.PropsWithChildren<ModalProps>) => JSX.Element, {}>;
+export declare const ModalTrigger: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ModalProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>, {}>;
 /**
  * This hook function can be used to render the `Modal` component with a custom
  * open button(s) and optional custom close button(s). You must render your own

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

@@ -46,5 +46,5 @@ export declare const NotificationContent: import("@chakra-ui/react").ChakraCompo
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.
  */
-export declare const Notification: import("@chakra-ui/react").ChakraComponent<(props: NotificationProps) => JSX.Element, {}>;
+export declare const Notification: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Notification;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface PaginationProps {
     /** Additional className. */
     className?: string;
@@ -23,5 +23,5 @@ export interface PaginationProps {
 /**
  * A component that provides a navigational list of page items.
  */
-export declare const Pagination: import("@chakra-ui/react").ChakraComponent<(props: PaginationProps) => JSX.Element, {}>;
+export declare const Pagination: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Pagination;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare type ProgressIndicatorSizes = "default" | "small";
 export declare type ProgressIndicatorTypes = "circular" | "linear";
 export interface ProgressIndicatorProps {
@@ -26,5 +26,5 @@ export interface ProgressIndicatorProps {
  * time to complete or consists of multiple steps. Examples include downloading,
  * uploading, or processing.
  */
-export declare const ProgressIndicator: import("@chakra-ui/react").ChakraComponent<(props: ProgressIndicatorProps) => JSX.Element, {}>;
+export declare const ProgressIndicator: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default ProgressIndicator;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface RadioProps {
     /** Additional class name. */

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { LayoutTypes } from "../../helpers/types";
 export interface RadioGroupProps {
@@ -47,5 +47,5 @@ export interface RadioGroupProps {
  */
 export declare const RadioGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<RadioGroupProps & {
     children?: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>>, {}>;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default RadioGroup;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 interface BaseProps {
     labelText: string;
@@ -57,5 +57,5 @@ export interface SearchBarProps {
  * Renders a wrapper `form` element to be used with `Select` (optional),
  * `Input`, and `Button` components together.
  */
-export declare const SearchBar: import("@chakra-ui/react").ChakraComponent<(props: SearchBarProps) => JSX.Element, {}>;
+export declare const SearchBar: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default SearchBar;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { LayoutTypes } from "../../helpers/types";
 export declare type SkeletonLoaderImageRatios = "landscape" | "portrait" | "square";
 export interface SkeletonLoaderProps {
@@ -35,5 +35,7 @@ export interface SkeletonLoaderProps {
  * The `SkeletonLoader` component renders a placeholder to be used while
  * dynamic content is loading.
  */
-export declare const SkeletonLoader: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SkeletonLoaderProps>) => JSX.Element, {}>;
+export declare const SkeletonLoader: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SkeletonLoaderProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default SkeletonLoader;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 interface SkipNavigationProps {
     /** Additional CSS class name to render in the `nav` element. */
     className?: string;
@@ -13,5 +13,7 @@ interface SkipNavigationProps {
  * the `#mainContent` id, and the second link points to accessibility information
  * on NYPL.org. These links are visually hidden but can be read by screenreaders.
  */
-export declare const SkipNavigation: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SkipNavigationProps>) => JSX.Element, {}>;
+export declare const SkipNavigation: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SkipNavigationProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default SkipNavigation;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface SliderProps {
     /** Additional class name for the Slider component. */
@@ -55,5 +55,7 @@ export interface SliderProps {
  * with a min and max value. The value(s) can be updated through the slider
  * thumb(s) or through the text input(s) elements.
  */
-export declare const Slider: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SliderProps>) => JSX.Element, {}>;
+export declare const Slider: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SliderProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Slider;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type StatusBadgeTypes = "low" | "medium" | "high";
 export interface StatusBadgeProps {
     /** Additional class for the component */
@@ -12,5 +12,7 @@ export interface StatusBadgeProps {
  * The `StatusBadge` component is used to display a visual badge for three
  * different status levels.
  */
-export declare const StatusBadge: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<StatusBadgeProps>) => JSX.Element, {}>;
+export declare const StatusBadge: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StatusBadgeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default StatusBadge;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ComponentImageProps } from "../Image/Image";
 export declare type StructuredContentImagePosition = "left" | "right" | "center";
 interface StructuredContentImageProps extends ComponentImageProps {
@@ -24,5 +24,7 @@ export interface StructuredContentProps {
  * The `StructuredContent` component that displays a heading, callout content,
  * an image, and body content. All are optional except for body content.
  */
-export declare const StructuredContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<StructuredContentProps>) => JSX.Element, {}>;
+export declare const StructuredContent: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StructuredContentProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default StructuredContent;

package/dist/components/StyleGuide/ColorCard.d.ts

@@ -1,12 +1,30 @@
 import * as React from "react";
 export interface ColorCardProps {
-    /** backgroundColor of the color card */
+    /** The backgroundColor of the color card. */
     backgroundColor: string;
-    /** name of the CSS var */
+    /** The name of a color's javascript theme object. */
     colorName: string;
+    /** The name of the color that the current color is based on. */
+    colorSource: string;
+    /** Contrast and WCAG compliance data related to the color black when used
+     * with the current color. */
+    dataBlack: string[];
+    /** Contrast and WCAG compliance data related to the color white when used
+     * with the current color. */
+    dataWhite: string[];
+    /** The color to use for text in the color card. */
+    textColor: string;
 }
-/**
- * ColorCard
- * Component only used for Storybook.
- */
-export default function ColorCard(props: React.PropsWithChildren<ColorCardProps>): JSX.Element;
+export interface DataTableProps {
+    /** Contrast and WCAG compliance data related to the color black when used
+     * with the current color. */
+    dataBlack: string[];
+    /** Contrast and WCAG compliance data related to the color white when used
+     * with the current color. */
+    dataWhite: string[];
+    /** color to use for text in color card */
+    textColor: string;
+}
+export declare const DataTable: (props: React.PropsWithChildren<DataTableProps>) => JSX.Element;
+export declare const ColorCard: (props: React.PropsWithChildren<ColorCardProps>) => JSX.Element;
+export default ColorCard;

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export interface TableProps {
     /** Additional class name for the `Table` component. */
     className?: string;
@@ -26,5 +26,7 @@ export interface TableProps {
  * Basic `Table` component used to organize and display tabular data in
  * rows and columns.
  */
-export declare const Table: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TableProps>) => JSX.Element, {}>;
+export declare const Table: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TableProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLTableElement>>, {}>;
 export default Table;

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

@@ -1,5 +1,5 @@
 import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
-import * as React from "react";
+import React from "react";
 export interface TabsDataProps {
     label: string;
     content: string | React.ReactNode;
@@ -21,6 +21,8 @@ export interface TabsProps {
  * Renders Chakra's `Tab` component with specific variants, props,
  * and controlled styling.
  */
-export declare const Tabs: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TabsProps>) => JSX.Element, {}>;
+export declare const Tabs: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TabsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export { TabList, Tab, TabPanels, TabPanel };
 export default Tabs;

package/dist/components/Template/Template.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export interface TemplateProps {
 }
 export interface TemplateHeaderProps {
@@ -45,7 +45,9 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
  * The main top-level parent component that wraps all template-related
  * components.
  */
-declare const Template: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TemplateProps>) => JSX.Element, {}>;
+declare const Template: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 /**
  * This optional component renders its children from edge-to-edge and should
  * be used for alerts or notifications that are typically site-wide. This must
@@ -121,6 +123,8 @@ declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWi
  * be rendered. For example, if you want to render content in the
  * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
  */
-export declare const TemplateAppContainer: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TemplateAppContainerProps>) => JSX.Element, {}>;
+export declare const TemplateAppContainer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateAppContainerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export { Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, };
 export default TemplateAppContainer;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type TextSizes = "default" | "caption" | "tag" | "mini";
 export interface TextProps {
     /** Additional class name to render in the `Text` component. */
@@ -7,10 +7,18 @@ export interface TextProps {
     isBold?: boolean;
     /** Optional prop used to show itlicized text */
     isItalic?: boolean;
+    /** Optional prop used to show capitalized text */
+    isCapitalized?: boolean;
+    /** Optional prop used to show upper case text */
+    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;
 }
-export declare const Text: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TextProps>) => JSX.Element, {}>;
+export declare const Text: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TextProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Text;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare type TextInputTypes = "email" | "hidden" | "number" | "password" | "text" | "textarea" | "tel" | "url";
 export declare const TextInputFormats: {

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare type ToggleSizes = "default" | "small";
 export interface ToggleProps {

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare type VideoPlayerTypes = "vimeo" | "youtube";
 export declare type VideoPlayerAspectRatios = "fourByThree" | "sixteenByNine" | "square";
@@ -34,5 +34,7 @@ export interface VideoPlayerProps {
     /** Required. Used to specify which video service is being used. */
     videoType?: VideoPlayerTypes;
 }
-export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<VideoPlayerProps>) => JSX.Element, {}>;
+export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<VideoPlayerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default VideoPlayer;