@nypl/design-system-react-components 2.1.2 → 2.2.0-react-chakra-rc-2

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

@@ -1,19 +1,9 @@
 import React from "react";
-interface SkipNavigationProps {
-    /** Additional CSS class name to render in the `nav` element. */
-    className?: string;
-    /** 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;
-}
 /**
  * SkipNavigation is a component that is used to provide a navigational list of
  * links. The first link is used to skip to the main content of the page using
  * 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<React.ForwardRefExoticComponent<SkipNavigationProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const SkipNavigation: React.FC<any>;
 export default SkipNavigation;

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

@@ -59,7 +59,5 @@ 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<React.ForwardRefExoticComponent<SliderProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const Slider: React.FC<any>;
 export default Slider;

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

@@ -38,5 +38,5 @@ export interface SocialMediaLinksProps {
 /**
  * The SocialMediaLinks component renders a list of links for accessing social media sites.
  */
-export declare const SocialMediaLinks: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SocialMediaLinksProps & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, {}>;
+export declare const SocialMediaLinks: React.FC<any>;
 export default SocialMediaLinks;

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

@@ -13,7 +13,5 @@ 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<React.ForwardRefExoticComponent<StatusBadgeProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const StatusBadge: React.FC<any>;
 export default StatusBadge;

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

@@ -24,7 +24,5 @@ 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<React.ForwardRefExoticComponent<StructuredContentProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const StructuredContent: React.FC<any>;
 export default StructuredContent;

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

@@ -299,7 +299,7 @@ export declare const cssVars: {
         dataBodyColor?: undefined;
     })[];
 };
-export declare const makeColorCard: (data: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const makeColorCard: (data: any) => import("react/jsx-runtime").JSX.Element;
 export declare const getColorCards: (category: any) => any[];
 export interface DataTableProps {
     /** Contrast and WCAG compliance data related to the color ui.bg.page when
@@ -343,6 +343,6 @@ export interface ColorCardProps extends DataTableProps {
     /** The name of the color that the current color is based on. */
     colorSource: string;
 }
-export declare const DataTable: (props: PropsWithChildren<DataTableProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const ColorCard: (props: PropsWithChildren<ColorCardProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DataTable: (props: PropsWithChildren<DataTableProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorCard: (props: PropsWithChildren<ColorCardProps>) => import("react/jsx-runtime").JSX.Element;
 export default ColorCard;

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

@@ -22,5 +22,5 @@ export interface StyledListProps {
  * adhere to traditional numbered and bulleted list styles. Unlike
  * the `List` component, `StyledList` only renders an unordered list.
  */
-export declare const StyledList: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StyledListProps & React.RefAttributes<HTMLDivElement & HTMLUListElement>>, {}>;
+export declare const StyledList: React.FC<any>;
 export default StyledList;

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

@@ -26,7 +26,5 @@ 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<React.ForwardRefExoticComponent<TableProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLTableElement>>, {}>;
+export declare const Table: React.FC<any>;
 export default Table;

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

@@ -21,8 +21,6 @@ export interface TabsProps {
  * Renders Chakra's `Tab` component with specific variants, props,
  * and controlled styling.
  */
-export declare const Tabs: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TabsProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const Tabs: React.FC<any>;
 export { TabList, Tab, TabPanels, TabPanel };
 export default Tabs;

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

@@ -20,5 +20,5 @@ export declare function isFilterType(type: TagSetProps["type"]): type is "filter
  * The full label text will be automatically revealed when the tag is hovered
  * with a DS `Tooltip` component.
  */
-export declare const TagSet: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TagSetProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const TagSet: React.FC<any>;
 export default TagSet;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconNames } from "../Icons/Icon";
 export interface TagSetExploreDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
@@ -24,5 +24,5 @@ export interface TagSetExploreProps {
  * The `label` property in the `tagSetData` prop should be set to a link-type
  * JSX component for linking to specific content.
  */
-export declare const TagSetExplore: import("@chakra-ui/react").ChakraComponent<(props: TagSetExploreProps) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+export declare const TagSetExplore: React.FC<any>;
 export default TagSetExplore;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { IconNames } from "../Icons/Icon";
 export interface TagSetFilterDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
@@ -21,5 +22,5 @@ export interface TagSetFilterProps {
  * The "filter" `TagSet` variant will display tags that can be removed when
  * `isDismissible` is true and they are clicked.
  */
-export declare const TagSetFilter: import("@chakra-ui/react").ChakraComponent<(props: TagSetFilterProps) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+export declare const TagSetFilter: React.FC<any>;
 export default TagSetFilter;

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

@@ -4,6 +4,4 @@ import React from "react";
  * long or a React fragment. This assumes that the `label` prop is a rather
  * simple single root JSX element, such as `<Link ...>....</Link>`.
  */
-export declare const TooltipWrapper: ({ label, children, }: React.PropsWithChildren<{
-    label: any;
-}>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TooltipWrapper: ({ label, children, }: React.PropsWithChildren<any>) => import("react/jsx-runtime").JSX.Element;

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

@@ -47,9 +47,7 @@ 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<React.ForwardRefExoticComponent<TemplateProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
+declare const Template: React.FC<any>;
 /**
  * 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
@@ -58,7 +56,7 @@ declare const Template: import("@chakra-ui/react").ChakraComponent<React.Forward
  * `role="complementary"` attribute. These elements should *not* be rendered
  * in the `header` HTML section since that's an accessibility violation.
  */
-declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TemplateAboveHeader: React.FC<any>;
 /**
  * This optional component should be the first child of the `Template`
  * component. This is rendered as an HTML `<header>` element. If an HTML
@@ -66,14 +64,14 @@ declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps
  * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
  * render an HTML `<header>` element.
  */
-declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWithChildren<TemplateHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TemplateHeader: React.FC<any>;
 /**
  * This component should be used inside the `Template` component to contain both
  * the `TemplateAboveHeader` and `TemplateHeader` components. This is meant to
  * render its children from edge to edge and is most useful for the headers,
  * `Breadcrumbs`, and `Hero` components or other banner-like components.
  */
-declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TemplateBreakout: React.FC<any>;
 /**
  * This component is most useful to render content on the page. This renders an
  * HTML `<main>` element with an id of "mainContent". The "mainContent" id should
@@ -84,20 +82,20 @@ declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>)
  * and `TemplateContentSidebar` must be ordered correctly as children elements
  * for the appropriate styles to take effect.
  */
-declare const TemplateContent: (props: React.PropsWithChildren<TemplateContentProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TemplateContent: React.FC<any>;
 /**
  * This optional component must be used inside the `TemplateContent` component.
  * This renders content in the main width of the container and will always render
  * above the primary component and the sidebar component (if any).
  */
-declare const TemplateContentTop: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TemplateContentTop: React.FC<any>;
 /**
  * This optional component must be used inside the `TemplateContent` component
  * and after the `TemplateContentPrimary` or `TemplateContentSidebar` component.
  * This renders content in the main width of the container and should always
  * render below the primary component and the sidebar component (if any).
  */
-declare const TemplateContentBottom: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TemplateContentBottom: React.FC<any>;
 /**
  * This component is used to render content in a column when there must be a
  * sidebar component on either its left or right side. It must go inside the
@@ -106,7 +104,7 @@ declare const TemplateContentBottom: (props: React.PropsWithChildren<TemplatePro
  * prop is used in the `TemplateContent` component, there is no need to pass
  * the `sidebar` prop to this component -- `TemplateContent` will handle it.
  */
-declare const TemplateContentPrimary: (props: React.PropsWithChildren<TemplateContentProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TemplateContentPrimary: React.FC<any>;
 /**
  * This component is used to render content in a sidebar column. It must go
  * inside the `TemplateContent` component and must be paired with the
@@ -118,14 +116,14 @@ declare const TemplateContentPrimary: (props: React.PropsWithChildren<TemplateCo
  * component, there is no need to pass the `sidebar` prop to this component --
  * `TemplateContent` will handle it.
  */
-declare const TemplateContentSidebar: (props: React.PropsWithChildren<TemplateContentProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TemplateContentSidebar: React.FC<any>;
 /**
  * This optional component should be the last child of the `Template`
  * component. This is rendered as an HTML `<footer>` element and spans the full
  * width of the page. If an HTML `<footer>` element is already passed in a
  * custom component, set `renderFooterElement` to `false`.
  */
-declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWithChildren<TemplateFooterProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TemplateFooter: React.FC<any>;
 /**
  * This single component can be used instead of all the individual template
  * components. Instead of importing and rendering the needed "template"
@@ -133,8 +131,6 @@ 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<React.ForwardRefExoticComponent<TemplateAppContainerProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const TemplateAppContainer: React.FC<any>;
 export { Template, TemplateAboveHeader, TemplateBreakout, TemplateContent, TemplateContentBottom, TemplateContentPrimary, TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, };
 export default TemplateAppContainer;

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

@@ -21,7 +21,5 @@ export interface TextProps {
     /** Optional prop to control the text styling */
     size?: TextSizes;
 }
-export declare const Text: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TextProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const Text: React.FC<any>;
 export default Text;

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

@@ -94,5 +94,5 @@ export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
  * element. All types will render an accessible `Label` component and an
  * optional `HelperErrorText` component.
  */
-export declare const TextInput: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>, {}>;
+export declare const TextInput: React.FC<any>;
 export default TextInput;

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

@@ -39,5 +39,5 @@ export declare const onChangeDefault: () => void;
 /**
  * Component that renders Chakra's `Switch` component along with NYPL defaults.
  */
-export declare const Toggle: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>, {}>;
+export declare const Toggle: React.FC<any>;
 export default Toggle;

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

@@ -13,5 +13,5 @@ export interface TooltipProps {
     /** Wraps the children of the tooltip in `ComponentWrapper` with `tabIndex=0` when true. */
     shouldWrapChildren?: boolean;
 }
-export declare const Tooltip: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const Tooltip: React.FC<any>;
 export default Tooltip;

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

@@ -36,7 +36,5 @@ export interface VideoPlayerProps {
     /** Required. Used to specify which video service is being used. */
     videoType?: VideoPlayerTypes;
 }
-export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<VideoPlayerProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
+export declare const VideoPlayer: React.FC<any>;
 export default VideoPlayer;

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

@@ -1,14 +1,37 @@
 export declare const buttonBaseStyle: {
-    alignItems: string;
-    borderRadius: string;
-    display: string;
-    cursor: string;
-    color: string;
-    fontWeight: string;
-    justifyContent: string;
-    lineHeight: string;
-    textDecoration: string;
-    wordWrap: string;
+    base: {
+        alignItems: string;
+        borderRadius: string;
+        display: string;
+        cursor: string;
+        color: string;
+        fontWeight: string;
+        justifyContent: string;
+        lineHeight: string;
+        textDecoration: string;
+        wordWrap: string;
+        svg: {
+            fill: string;
+        };
+        _hover: {
+            bg: string;
+        };
+        _visited: {
+            color: string;
+        };
+        _disabled: {
+            bg: string;
+            color: string;
+            opacity: string;
+            pointerEvents: string;
+        };
+        _dark: {
+            _disabled: {
+                bg: string;
+                color: string;
+            };
+        };
+    };
     /** The element will handle descriptive text added to aid
      * screen readers. */
     screenreaderOnly: {
@@ -28,56 +51,58 @@ export declare const buttonBaseStyle: {
         };
         wordWrap: string;
     };
-    svg: {
-        fill: string;
-    };
-    _hover: {
-        bg: string;
-    };
-    _visited: {
-        color: string;
-    };
-    _disabled: {
-        bg: string;
-        color: string;
-        opacity: string;
-        pointerEvents: string;
-    };
-    _dark: {
-        _disabled: {
-            bg: string;
-            color: string;
-        };
-    };
 };
-export declare const primary: ({ buttonSize }: {
-    buttonSize?: string;
-}) => any;
-export declare const secondary: ({ buttonSize }: {
-    buttonSize?: string;
-}) => any;
-export declare const pill: ({ buttonSize }: {
-    buttonSize?: string;
-}) => any;
-export declare const callout: ({ buttonSize }: {
-    buttonSize?: string;
-}) => any;
-export declare const noBrand: ({ buttonSize }: {
-    buttonSize?: string;
-}) => any;
+export declare const primary: ({ buttonSize }: any) => {
+    base: any;
+    screenreaderOnly: {};
+};
+export declare const secondary: ({ buttonSize }: any) => {
+    base: any;
+};
+export declare const pill: ({ buttonSize }: any) => {
+    base: any;
+};
+export declare const callout: ({ buttonSize }: any) => {
+    base: any;
+};
+export declare const noBrand: ({ buttonSize }: any) => {
+    base: any;
+};
 declare const Button: {
-    parts: string[];
-    baseStyle: {
-        alignItems: string;
-        borderRadius: string;
-        display: string;
-        cursor: string;
-        color: string;
-        fontWeight: string;
-        justifyContent: string;
-        lineHeight: string;
-        textDecoration: string;
-        wordWrap: string;
+    baseStyle?: {
+        base: {
+            alignItems: string;
+            borderRadius: string;
+            display: string;
+            cursor: string;
+            color: string;
+            fontWeight: string;
+            justifyContent: string;
+            lineHeight: string;
+            textDecoration: string;
+            wordWrap: string;
+            svg: {
+                fill: string;
+            };
+            _hover: {
+                bg: string;
+            };
+            _visited: {
+                color: string;
+            };
+            _disabled: {
+                bg: string;
+                color: string;
+                opacity: string;
+                pointerEvents: string;
+            };
+            _dark: {
+                _disabled: {
+                    bg: string;
+                    color: string;
+                };
+            };
+        };
         /** The element will handle descriptive text added to aid
          * screen readers. */
         screenreaderOnly: {
@@ -97,56 +122,44 @@ declare const Button: {
             };
             wordWrap: string;
         };
-        svg: {
-            fill: string;
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "screenreaderOnly")[];
+        }>;
+    };
+    variants?: {
+        primary: ({ buttonSize }: any) => {
+            base: any;
+            screenreaderOnly: {};
         };
-        _hover: {
-            bg: string;
+        secondary: ({ buttonSize }: any) => {
+            base: any;
         };
-        _visited: {
-            color: string;
+        text: ({ buttonSize }: any) => {
+            base: any;
         };
-        _disabled: {
-            bg: string;
-            color: string;
-            opacity: string;
-            pointerEvents: string;
+        link: ({ buttonSize }: any) => {
+            base: any;
         };
-        _dark: {
-            _disabled: {
-                bg: string;
-                color: string;
-            };
+        pill: ({ buttonSize }: any) => {
+            base: any;
+        };
+        iconOnly: ({ buttonSize }: any) => {
+            base: any;
+        };
+        callout: ({ buttonSize }: any) => {
+            base: any;
+        };
+        noBrand: ({ buttonSize }: any) => {
+            base: any;
         };
     };
-    variants: {
-        primary: ({ buttonSize }: {
-            buttonSize?: string;
-        }) => any;
-        secondary: ({ buttonSize }: {
-            buttonSize?: string;
-        }) => any;
-        text: ({ buttonSize }: {
-            buttonSize?: string;
-        }) => any;
-        link: ({ buttonSize }: {
-            buttonSize?: string;
-        }) => any;
-        pill: ({ buttonSize }: {
-            buttonSize?: string;
-        }) => any;
-        iconOnly: ({ buttonSize }: {
-            buttonSize?: string;
-        }) => any;
-        callout: ({ buttonSize }: {
-            buttonSize?: string;
-        }) => any;
-        noBrand: ({ buttonSize }: {
-            buttonSize?: string;
-        }) => any;
-    };
-    defaultProps: {
-        variant: string;
+    defaultProps?: {
+        size?: string | number;
+        variant?: "link" | "text" | "primary" | "secondary" | "pill" | "iconOnly" | "callout" | "noBrand";
+        colorScheme?: string;
     };
+    parts: ("base" | "screenreaderOnly")[];
 };
 export default Button;