@progressiveui/react 1.22.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressiveui/react",
-  "version": "1.22.1",
+  "version": "2.0.0",
   "description": "WFP UI Kit",
   "license": "Apache-2",
   "main": "lib/index.js",
@@ -45,126 +45,116 @@
     "react-docgen.json"
   ],
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/preset-typescript": "^7.27.0",
     "@carbon/feature-flags": "^0.6.0",
-    "classnames": "2.2.6",
+    "classnames": "2.5.1",
     "invariant": "^2.2.4",
     "react-datepicker": "^4.6.0",
     "react-frame-component": "^5.2.6",
-    "react-popper-tooltip": "^4.1.0",
-    "react-transition-state": "^2.1.0",
+    "react-popper-tooltip": "^4.4.2",
+    "react-transition-state": "^2.3.1",
     "warning": "^4.0.3",
-    "whatwg-fetch": "^3.6.19",
+    "whatwg-fetch": "^3.6.20",
     "window-or-global": "^1.0.1",
-    "ws": "^8.12.0"
+    "ws": "^8.18.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/traverse": "^7.23.2",
-    "@fontsource-variable/open-sans": "^5.0.13",
+    "@babel/traverse": "^7.27.0",
+    "@fontsource-variable/open-sans": "^5.2.5",
     "@progressiveui/icons-react": "^10.38.0",
-    "@progressiveui/styles": "^10.30.0",
+    "@progressiveui/styles": "^11.0.0",
     "@progressiveui/themes-core": "^0.4.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-docs": "^8.0.0-beta.4",
-    "@storybook/addon-essentials": "^8.0.0-beta.4",
-    "@storybook/addon-links": "^8.0.0-beta.4",
-    "@storybook/addon-mdx-gfm": "^8.0.0-beta.4",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.0.0-beta.4",
-    "@storybook/react": "^8.0.0-beta.4",
-    "@storybook/react-vite": "^8.0.0-beta.4",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
-    "@types/mdx": "^2.0.3",
-    "@types/mocha": "^10.0.6",
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
-    "@wfp/pictograms-react": "^11.18.1",
-    "all-contributors-cli": "^6.17.0",
-    "autoprefixer": "^9.8.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/mdx": "^2.0.13",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^20.14.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.2",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
+    "autoprefixer": "^10.4.21",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-dev-expression": "^0.2.2",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-dev-expression": "^0.2.3",
     "babel-plugin-named-exports-order": "^0.0.2",
-    "browserslist-config-carbon": "^10.6.1",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^5.2.4",
+    "browserslist-config-carbon": "^11.2.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^7.1.2",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "enzyme-to-json": "^3.5.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "gzip-size": "^5.1.1",
-    "handlebars": "^4.7.7",
-    "iframe-resizer": "^4.3.6",
+    "enzyme-adapter-react-16": "^1.15.8",
+    "eslint-plugin-storybook": "^0.12.0",
+    "handlebars": "^4.7.8",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lodash.isequal": "^4.5.0",
-    "moment": "^2.27.0",
     "object-assign": "^4.1.1",
-    "postcss": "^8.2.14",
-    "postcss-cli": "^8.3.1",
-    "postcss-custom-properties": "^11.0.0",
-    "postcss-loader": "4",
-    "prettier": "^2.8.7",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.1",
+    "postcss-custom-properties": "^14.0.4",
+    "postcss-loader": "8.1.1",
+    "prettier": "^3.5.3",
     "pretty": "^2.0.0",
-    "prismjs": "^1.20.0",
-    "promise": "^8.1.0",
+    "prismjs": "^1.30.0",
+    "promise": "^8.3.0",
     "prop-types": "^15.8.1",
-    "raw-loader": "^4.0.1",
-    "react": "18.2.0",
+    "raw-loader": "^4.0.2",
+    "react": "19.1.0",
     "react-dates": "^21.8.0",
-    "react-docgen": "^7.0.0",
+    "react-docgen": "^7.1.1",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "18.2.0",
-    "react-dropzone": "^11.0.2",
-    "react-final-form": "^6.5.1",
+    "react-dom": "19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-final-form": "^6.5.9",
     "react-hook-form": "^7.20.5",
     "react-markdown": "^9.0.0",
     "react-popper": "^2.2.3",
     "react-prism": "^4.3.2",
     "react-redux": "^7.2.1",
-    "react-select": "^3.1.0",
-    "react-table": "7.5.0",
-    "recharts": "^2.7.3",
+    "react-select": "^5.10.1",
+    "react-table": "7.8.0",
+    "recharts": "^2.15.2",
     "redux-form": "^8.3.10",
     "requestanimationframe": "^0.0.23",
-    "rimraf": "^3.0.2",
+    "rimraf": "^6.0.1",
     "rollup": "4.1.4",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-preserve-directives": "^0.2.0",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-strip-banner": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.66.1",
-    "sass-loader": "13.3.2",
-    "storybook": "^8.0.0-beta.4",
-    "style-loader": "^2.0.0",
-    "ts-jest": "^29.1.1",
-    "twig": "^1.15.4",
-    "typescript": "^4.8.3",
-    "vite": "^4.4.9"
+    "rollup-plugin-visualizer": "^5.14.0",
+    "sass": "^1.86.3",
+    "sass-loader": "16.0.5",
+    "storybook": "^8.6.12",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.3.1",
+    "twig": "^1.17.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.5"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/wfp/ui.git"
   },
   "bundleSizeThreshold": 80000,
-  "gitHead": "9c36893d901567f83003609c366c9da8ed2beb4d"
+  "gitHead": "d5135d857e06dd46b8cfad1d77b35a61aed8ce50"
 }

package/src/components/Accordion/hooks/useAccordion.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-
-import { HTMLAttributes, KeyboardEvent } from 'react';
-import { ACCORDION_ATTR, ACCORDION_BTN_ATTR } from '../utils/constants';
+import { HTMLAttributes, KeyboardEvent } from "react";
+import { ACCORDION_ATTR, ACCORDION_BTN_ATTR } from "../utils/constants";
 
 const getAccordion = (node: Element) => {
   do {
@@ -23,7 +22,7 @@ const moveFocus = (moveUp: boolean, e: KeyboardEvent<Element>) => {
     return;
 
   const nodes = e.currentTarget.querySelectorAll<HTMLElement>(
-    `[${ACCORDION_BTN_ATTR}]`
+    `[${ACCORDION_BTN_ATTR}]`,
   );
   const { length } = nodes;
   for (let i = 0; i < length; i++) {
@@ -40,13 +39,18 @@ const moveFocus = (moveUp: boolean, e: KeyboardEvent<Element>) => {
   }
 };
 
+// Extend HTMLAttributes to allow our custom data attribute
+interface AccordionHTMLAttributes<T> extends HTMLAttributes<T> {
+  "data-accordion"?: string;
+}
+
 const useAccordion = () => {
-  const accordionProps: HTMLAttributes<Element> = {
-    [ACCORDION_ATTR]: '',
-    onKeyDown: (e) =>
-      e.key === 'ArrowUp'
+  const accordionProps: AccordionHTMLAttributes<Element> = {
+    "data-accordion": "",
+    onKeyDown: (e: KeyboardEvent<Element>) =>
+      e.key === "ArrowUp"
         ? moveFocus(true, e)
-        : e.key === 'ArrowDown' && moveFocus(false, e),
+        : e.key === "ArrowDown" && moveFocus(false, e),
   };
   return {
     accordionProps,

package/src/components/BannerNavigation/BannerNavigation.stories.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import { action } from "@storybook/addon-actions";
 import { BannerNavigation, BannerNavigationItem } from "./BannerNavigation";
 import { BannerNavigationWithContent } from "./BannerNavigationWithContent";
-import Search from "../Search";
 import Link from "../Link";
 
 export default {

package/src/components/Button/Button.stories.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { buttonKinds } from "../../prop-types/types";
 import { AddCircle } from "@progressiveui/icons-react";
-import markdown from "./README.mdx";
 import Button from "./Button";
 
 const meta: Meta<typeof Button> = {
@@ -12,28 +11,13 @@ const meta: Meta<typeof Button> = {
   parameters: {
     componentSubtitle: "Component",
     status: "released",
-    mdx: markdown,
     // twig: buttonTwig,
   },
 };
 
-// export default {
-//   title: "Components/UI Elements/Button",
-//   component: Button,
-//   markdown: "hello",
-//   parameters: {
-//     componentSubtitle: "Component",
-//     status: "released",
-//     mdx: markdown,
-//     // twig: buttonTwig,
-//   },
-// };
-
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-//export const ButtonDefault = (args) => <Button {...args}>Default</Button>;
-
 export const ButtonDefault: Story = {
   render: (args) => <Button {...args} />,
   args: {

package/src/components/Button/Button.tsx

@@ -18,7 +18,6 @@ interface ButtonBaseProps {
    * Specify whether the Button should be a large variant
    */
   large?: boolean;
-
   /**
    * Specify btnSolid to buttons on solid background to make it stand out
    */
@@ -31,7 +30,6 @@ interface ButtonBaseProps {
    * Optionally specify an href for your Button to become an element
    */
   href?: string;
-  //target?: string; // TODO: Remove  " "
   /**
    * Specify an `icon` to include in the Button through an object representing the SVG data of the icon, similar to the `Icon` component @design
    */
@@ -40,7 +38,9 @@ interface ButtonBaseProps {
    * Optionally specify an href for your Button to become an element @design
    */
   iconReverse?: boolean;
-  // todo: revise iconDescription
+  /**
+   * Icon description for accessibility
+   */
   iconDescription?: string;
   /**
    * Specify whether the Button should be disabled, or not
@@ -51,7 +51,6 @@ interface ButtonBaseProps {
    */
   tabIndex?: number;
   target?: React.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
-  // type?: 'button' | 'reset' | 'submit';
   useFlexbox?: boolean;
   id?: string;
 }
@@ -69,8 +68,8 @@ type ConditionalProps<T> = T extends { href: string }
   : ButtonButtonProps;
 
 /**
- * Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience. */
-
+ * Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.
+ */
 export type ButtonRef<T extends React.ElementType> =
   React.ComponentPropsWithRef<T>["ref"];
 
@@ -78,8 +77,8 @@ export const Button = React.forwardRef(
   <T extends { href?: string }>(
     props: ConditionalProps<T>,
     ref: React.Ref<
-      T extends { href: string } ? HTMLLinkElement : HTMLButtonElement
-    >
+      T extends { href: string } ? HTMLAnchorElement : HTMLButtonElement
+    >,
   ) => {
     const {
       children,
@@ -92,6 +91,7 @@ export const Button = React.forwardRef(
       iconReverse,
       tabIndex,
       useFlexbox,
+      // Set the default to "button"
       type = "button",
       icon,
       iconDescription,
@@ -144,7 +144,9 @@ export const Button = React.forwardRef(
       setCount(false);
     };
 
-    const onClickAnimation = (e) => {
+    const onClickAnimation = (
+      e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+    ) => {
       if (onClick) {
         onClick(e);
       }
@@ -183,7 +185,8 @@ export const Button = React.forwardRef(
         {...buttonProps}
         {...commonProps}
         disabled={disabled}
-        type={type}
+        // Cast the type prop to the allowed union
+        type={type as "button" | "reset" | "submit"}
         onClick={onClickAnimation}
         ref={ref as React.Ref<HTMLButtonElement>}
         id={id}
@@ -193,7 +196,7 @@ export const Button = React.forwardRef(
         {!iconReverse && buttonImage}
       </button>
     );
-  }
+  },
 );
 
 Button.displayName = "Button";

package/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import markdown from "./README.mdx";
 import { ContextMenu, ContextMenuGroup, ContextMenuItem } from "./ContextMenu";
 import Link from "../Link";
 
@@ -9,7 +8,6 @@ export default {
   parameters: {
     componentSubtitle: "Component",
     status: "released",
-    mdx: markdown,
   },
 };
 

package/src/components/Empty/Empty.stories.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import markdown from "./README.mdx";
 import Empty from "./Empty";
 import Button from "../Button";
-//import { IllustrationsMovingVanWithBackground } from '@wfp/pictograms-react';
 
 export default {
   title: "Components/UI Elements/Empty",
@@ -32,7 +31,7 @@ EmptyDefault.args = {
 
 const emptysourcecode = `
 import { Empty, Button  } from "@progressiveui/react";
-import { IllustrationsMovingVanWithBackground } from '@wfp/pictograms-react';
+
 
 <Empty
   button={<Button kind="accent">New entry</Button>}

package/src/components/Footer/Footer.tsx

@@ -3,10 +3,6 @@ import classNames from "classnames";
 import Link from "../Link";
 import Wrapper from "../Wrapper";
 import { ScreenSize } from "../../utils";
-import {
-  WfpLogoStandardBlackEn,
-  WfpLogoVerticalEn,
-} from "@progressiveui/icons-react";
 import useSettings from "../../hooks/useSettings";
 
 /** A Footer is a section at the bottom of each page. It typically contains basic site information, copyright data or links to related pages. */
@@ -28,18 +24,11 @@ interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
    Optional WFP logo for mobile devices, can be used if the Logo should be provided by the CDN
  */
   logo?: string | React.ReactNode;
-  /**
-   Optional WFP logo for desktop devices, can be used if the Logo should be provided by the CDN
- */
-  logoExtended?: string | React.ReactNode;
   /**
    * Specify the max-width on desktop devices (same as \`Wrapper\` component)
    */
   pageWidth?: ScreenSize;
-  /**
-   Override the SDG icon
- */
-  sdgLogo?: React.ReactNode;
+
   /**
    The WFP logo, can be used if the SDG logo should be provided in a different way
  */
@@ -63,7 +52,6 @@ const Footer: React.FC<FooterProps> = ({
   linkTextTwo,
   linkHrefTwo,
   logo,
-  logoExtended,
   metaContent,
   metaLinks,
   secondary,
@@ -101,35 +89,7 @@ const Footer: React.FC<FooterProps> = ({
             </div>
           )}
           <div className={`${prefix}--footer__cta`}>
-            {logoExtended && typeof logoExtended === "string" ? (
-              <img
-                className={`${prefix}--footer__cta-logo`}
-                src={logoExtended}
-                alt="World Food Programme Logo"
-              />
-            ) : logoExtended ? (
-              logoExtended
-            ) : (
-              <WfpLogoStandardBlackEn
-                className={`${prefix}--footer__cta-logo`}
-                alt="WFP"
-              />
-            )}
-
-            {logo && typeof logo === "string" ? (
-              <img
-                className={`${prefix}--footer__cta-logo-small`}
-                src={logo}
-                alt="WFP Logo"
-              />
-            ) : logo ? (
-              logo
-            ) : (
-              <WfpLogoVerticalEn
-                description="WFP"
-                className={`${prefix}--footer__cta-logo-small`}
-              />
-            )}
+            {logo}
             {secondary && (
               <div className={`${prefix}--footer__secondary`}>{secondary}</div>
             )}

package/src/components/Footer/index.ts

@@ -1,2 +1,2 @@
-export { default as Footer } from './Footer';
-export { FooterExternal, LinksColumn, FooterMetaLink } from './FooterExternal';
+export { default as Footer } from "./Footer";
+export { FooterExternal, LinksColumn, FooterMetaLink } from "./FooterExternal";

package/src/components/Hero/Hero.stories.tsx

@@ -4,7 +4,6 @@ import markdown from "./README.mdx";
 
 import { Hero, HeroExternal } from ".";
 import Button from "../Button";
-import { WfpHumEmergencyResponsePos } from "@wfp/pictograms-react";
 //import heroTwig from './Hero.twig';
 
 export default {
@@ -240,7 +239,6 @@ Emergencies.args = {
   ...Regular.args,
   title: (
     <>
-      <WfpHumEmergencyResponsePos fill="#FFF" style={{ marginRight: "1rem" }} />
       <span>
         Curabitur ullamcorper ultricies nisi. Proin magna.{" "}
         <a>Etiam iaculis nunc ac metus</a>

package/src/components/MainNavigation/MainNavigation.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-//import markdown from './README.mdx';
 import { action } from "@storybook/addon-actions";
-import { MainNavigation, MainNavigationExternal } from ".";
+import { MainNavigation } from ".";
 import MainNavigationItem from "../MainNavigationItem";
 
 import {
@@ -23,7 +22,6 @@ import User from "../User";
 export default {
   title: "Components/Navigation/MainNavigation",
   component: MainNavigation,
-  subcomponents: { MainNavigationExternal },
   parameters: {
     componentSubtitle: "Component",
     status: "released",
@@ -183,7 +181,6 @@ You can customize the content by using \`MainNavigation\`.
 const sourcecode = (type) => {
   return `import { Button,User, Search } from "@progressiveui/react";
   import {
-    MainNavigationExternal,
     MainNavigationItem,
     SubNavigation,
     SubNavigationHeader,

package/src/components/MainNavigation/MainNavigation.tsx

@@ -7,10 +7,6 @@ import { ScreenSize } from "../../utils";
 import MainNavigationContext from "./MainNavigationContext";
 import MobileButtonDefault, { MobileButtonProps } from "./MobileButton";
 import { WrapperProps } from "../Wrapper/Wrapper";
-import {
-  WfpLogoVerticalEn,
-  WfpLogoStandardBlackEn,
-} from "@progressiveui/icons-react";
 
 /** The Main Navigation is a Horizontal Menu which consists of multiple clickable items placed at the top of the page. The navigation stays unchanged when browswing through the site and is present on every page. The currently selected item is usually highlighted. */
 
@@ -142,25 +138,7 @@ const MainNavigation = ({
             >
               Menu
             </MobileButton>
-            <div className={`${prefix}--main-navigation__logo`}>
-              {logoRibbon === "default" ? (
-                <div className={`${prefix}--main-navigation__logo__default`}>
-                  <div
-                    className={`${prefix}--main-navigation__logo__default__ribbon`}
-                  >
-                    <WfpLogoVerticalEn description="WFP" />
-                  </div>
-                  {logo}
-                </div>
-              ) : logoRibbon === "offShelf" ? (
-                <div className={`${prefix}--main-navigation__logo__offShelf`}>
-                  <WfpLogoStandardBlackEn description="WFP" />
-                  {logo}
-                </div>
-              ) : (
-                logo
-              )}
-            </div>
+            <div className={`${prefix}--main-navigation__logo`}>{logo}</div>
           </div>
           <ul className={listClasses}>{children}</ul>
         </Wrapper>

package/src/components/MainNavigation/index.ts

@@ -1,4 +1,3 @@
-export { default as MainNavigation } from './MainNavigation';
-export { default as MainNavigationExternal } from './MainNavigationExternal';
-export { default as MainNavigationContext } from './MainNavigationContext';
-export { default as useMainNavigation } from './useMainNavigation';
+export { default as MainNavigation } from "./MainNavigation";
+export { default as MainNavigationContext } from "./MainNavigationContext";
+export { default as useMainNavigation } from "./useMainNavigation";

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import markdown from "./README.mdx";
 import Pagination from ".";
 
 export default {
@@ -8,7 +7,6 @@ export default {
   parameters: {
     componentSubtitle: "Component",
     status: "released",
-    mdx: markdown,
   },
 };
 

package/src/components/Search/Search.tsx

@@ -97,7 +97,7 @@ const Search: React.FC<SearchProps> = React.forwardRef((props, ref) => {
     }
   };
 
-  const clearSearch = () => {
+  const clearSearch = (evt) => {
     setValue("");
     // setTimeout(() => {
     //   console.log("value", value);

package/src/components/Text/Text.tsx

@@ -30,7 +30,9 @@ interface TextProps extends React.AllHTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
-export const textLookup: Record<TextKind, keyof JSX.IntrinsicElements> = {
+export const textLookup: {
+  [key in NonNullable<TextProps["kind"]>]: React.ElementType;
+} = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -54,6 +56,7 @@ export const textLookup: Record<TextKind, keyof JSX.IntrinsicElements> = {
  */
 
 const Text: React.FC<TextProps> = ({
+  as,
   children,
   className,
   kind,
@@ -61,8 +64,8 @@ const Text: React.FC<TextProps> = ({
   spacingBottom,
 }) => {
   const { prefix } = useSettings();
-  const TagName: keyof JSX.IntrinsicElements =
-    kind && textLookup[kind] ? textLookup[kind] : "div";
+  const TagName: React.ElementType = kind ? textLookup[kind] : "div";
+
   const classes = classNames(
     {
       [`${prefix}--text`]: true,
@@ -71,7 +74,7 @@ const Text: React.FC<TextProps> = ({
       [`${prefix}--text__spacing-top-${spacingTop}`]: spacingTop,
       [`${prefix}--text__spacing-bottom-${spacingBottom}`]: spacingBottom,
     },
-    className
+    className,
   );
   return React.createElement(TagName, { className: classes }, children);
 };