@digigov/react-core 2.0.0-e7d30530 → 2.0.0-eaf330f5

package/lazy/index.js

@@ -152,6 +152,7 @@ export default {
   'AdminMain': lazy(() => import('@digigov/react-core/AdminMain').then((module) => ({ default: module['AdminMain'] }))),
   'AdminTopSection': lazy(() => import('@digigov/react-core/AdminTopSection').then((module) => ({ default: module['AdminTopSection'] }))),
   'AutoCompleteInputBase': lazy(() => import('@digigov/react-core/AutoCompleteInputBase').then((module) => ({ default: module['AutoCompleteInputBase'] }))),
+  'AutoCompleteInputTypeahead': lazy(() => import('@digigov/react-core/AutoCompleteInputTypeahead').then((module) => ({ default: module['AutoCompleteInputTypeahead'] }))),
   'AutoCompleteResultList': lazy(() => import('@digigov/react-core/AutoCompleteResultList').then((module) => ({ default: module['AutoCompleteResultList'] }))),
   'AutoCompleteResultListItem': lazy(() => import('@digigov/react-core/AutoCompleteResultListItem').then((module) => ({ default: module['AutoCompleteResultListItem'] }))),
   'AutoCompleteContainer': lazy(() => import('@digigov/react-core/AutoCompleteContainer').then((module) => ({ default: module['AutoCompleteContainer'] }))),
@@ -191,7 +192,7 @@ export default {
   'PaginationListItem': lazy(() => import('@digigov/react-core/PaginationListItem').then((module) => ({ default: module['PaginationListItem'] }))),
   'PaginationLabelContainer': lazy(() => import('@digigov/react-core/PaginationLabelContainer').then((module) => ({ default: module['PaginationLabelContainer'] }))),
   'LoaderContainer': lazy(() => import('@digigov/react-core/LoaderContainer').then((module) => ({ default: module['LoaderContainer'] }))),
-  'CircularProgressBase': lazy(() => import('@digigov/react-core/CircularProgressBase').then((module) => ({ default: module['CircularProgressBase'] }))),
+  'CircularProgress': lazy(() => import('@digigov/react-core/CircularProgress').then((module) => ({ default: module['CircularProgress'] }))),
   'FullPageBackground': lazy(() => import('@digigov/react-core/FullPageBackground').then((module) => ({ default: module['FullPageBackground'] }))),
   'StepNavCircleNumber': lazy(() => import('@digigov/react-core/StepNavCircleNumber').then((module) => ({ default: module['StepNavCircleNumber'] }))),
   'StepNav': lazy(() => import('@digigov/react-core/StepNav').then((module) => ({ default: module['StepNav'] }))),

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@digigov/react-core",
-  "version": "2.0.0-e7d30530",
+  "version": "2.0.0-eaf330f5",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "peerDependencies": {
-    "@digigov/css": "2.0.0-e7d30530",
-    "@digigov/react-icons": "2.0.0-e7d30530",
+    "@digigov/css": "2.0.0-eaf330f5",
+    "@digigov/react-icons": "2.0.0-eaf330f5",
     "clsx": "1.1.1",
-    "react": "^18.3.0 || ^19.1.0",
-    "react-dom": "^18.3.0 || ^19.1.0",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0",
     "react-native-svg": "^15.2.0",
     "expo-router": "^3.5.14",
     "nativewind": "^4.1.1"

package/registry/index.js

@@ -2,14 +2,14 @@
 import * as _digigov_react_core from "@digigov/react-core";
 import * as _digigov_react_core_Accordion from "@digigov/react-core/Accordion";
 import * as _digigov_react_core_Accordion_index_web from "@digigov/react-core/Accordion/index.web";
+import * as _digigov_react_core_AccordionControls from "@digigov/react-core/AccordionControls";
 import * as _digigov_react_core_AccordionSection from "@digigov/react-core/AccordionSection";
 import * as _digigov_react_core_AccordionSection_index_web from "@digigov/react-core/AccordionSection/index.web";
-import * as _digigov_react_core_AccordionControls from "@digigov/react-core/AccordionControls";
 import * as _digigov_react_core_AccordionSectionContent from "@digigov/react-core/AccordionSectionContent";
 import * as _digigov_react_core_AccordionSectionSummary from "@digigov/react-core/AccordionSectionSummary";
 import * as _digigov_react_core_AccordionSectionSummaryHeading from "@digigov/react-core/AccordionSectionSummaryHeading";
-import * as _digigov_react_core_AdminAside from "@digigov/react-core/AdminAside";
 import * as _digigov_react_core_AdminContainer from "@digigov/react-core/AdminContainer";
+import * as _digigov_react_core_AdminAside from "@digigov/react-core/AdminAside";
 import * as _digigov_react_core_AdminHeader from "@digigov/react-core/AdminHeader";
 import * as _digigov_react_core_AdminHeaderContent from "@digigov/react-core/AdminHeaderContent";
 import * as _digigov_react_core_AdminLayout from "@digigov/react-core/AdminLayout";
@@ -19,6 +19,7 @@ import * as _digigov_react_core_Aside from "@digigov/react-core/Aside";
 import * as _digigov_react_core_AutoCompleteAssistiveHint from "@digigov/react-core/AutoCompleteAssistiveHint";
 import * as _digigov_react_core_AutoCompleteContainer from "@digigov/react-core/AutoCompleteContainer";
 import * as _digigov_react_core_AutoCompleteInputBase from "@digigov/react-core/AutoCompleteInputBase";
+import * as _digigov_react_core_AutoCompleteInputTypeahead from "@digigov/react-core/AutoCompleteInputTypeahead";
 import * as _digigov_react_core_AutoCompleteMultipleInput from "@digigov/react-core/AutoCompleteMultipleInput";
 import * as _digigov_react_core_AutoCompleteMultipleInputContainer from "@digigov/react-core/AutoCompleteMultipleInputContainer";
 import * as _digigov_react_core_AutoCompleteResultList from "@digigov/react-core/AutoCompleteResultList";
@@ -60,7 +61,7 @@ import * as _digigov_react_core_ChipContainer from "@digigov/react-core/ChipCont
 import * as _digigov_react_core_ChipHeading from "@digigov/react-core/ChipHeading";
 import * as _digigov_react_core_ChipKeyValue from "@digigov/react-core/ChipKeyValue";
 import * as _digigov_react_core_ChoiceDividerText from "@digigov/react-core/ChoiceDividerText";
-import * as _digigov_react_core_CircularProgressBase from "@digigov/react-core/CircularProgressBase";
+import * as _digigov_react_core_CircularProgress from "@digigov/react-core/CircularProgress";
 import * as _digigov_react_core_CloseButton from "@digigov/react-core/CloseButton";
 import * as _digigov_react_core_Code from "@digigov/react-core/Code";
 import * as _digigov_react_core_CodeBlockContainer from "@digigov/react-core/CodeBlockContainer";
@@ -285,14 +286,14 @@ export default {
   '@digigov/react-core': lazyImport(_digigov_react_core),
   '@digigov/react-core/Accordion': lazyImport(_digigov_react_core_Accordion),
   '@digigov/react-core/Accordion/index.web': lazyImport(_digigov_react_core_Accordion_index_web),
+  '@digigov/react-core/AccordionControls': lazyImport(_digigov_react_core_AccordionControls),
   '@digigov/react-core/AccordionSection': lazyImport(_digigov_react_core_AccordionSection),
   '@digigov/react-core/AccordionSection/index.web': lazyImport(_digigov_react_core_AccordionSection_index_web),
-  '@digigov/react-core/AccordionControls': lazyImport(_digigov_react_core_AccordionControls),
   '@digigov/react-core/AccordionSectionContent': lazyImport(_digigov_react_core_AccordionSectionContent),
   '@digigov/react-core/AccordionSectionSummary': lazyImport(_digigov_react_core_AccordionSectionSummary),
   '@digigov/react-core/AccordionSectionSummaryHeading': lazyImport(_digigov_react_core_AccordionSectionSummaryHeading),
-  '@digigov/react-core/AdminAside': lazyImport(_digigov_react_core_AdminAside),
   '@digigov/react-core/AdminContainer': lazyImport(_digigov_react_core_AdminContainer),
+  '@digigov/react-core/AdminAside': lazyImport(_digigov_react_core_AdminAside),
   '@digigov/react-core/AdminHeader': lazyImport(_digigov_react_core_AdminHeader),
   '@digigov/react-core/AdminHeaderContent': lazyImport(_digigov_react_core_AdminHeaderContent),
   '@digigov/react-core/AdminLayout': lazyImport(_digigov_react_core_AdminLayout),
@@ -302,6 +303,7 @@ export default {
   '@digigov/react-core/AutoCompleteAssistiveHint': lazyImport(_digigov_react_core_AutoCompleteAssistiveHint),
   '@digigov/react-core/AutoCompleteContainer': lazyImport(_digigov_react_core_AutoCompleteContainer),
   '@digigov/react-core/AutoCompleteInputBase': lazyImport(_digigov_react_core_AutoCompleteInputBase),
+  '@digigov/react-core/AutoCompleteInputTypeahead': lazyImport(_digigov_react_core_AutoCompleteInputTypeahead),
   '@digigov/react-core/AutoCompleteMultipleInput': lazyImport(_digigov_react_core_AutoCompleteMultipleInput),
   '@digigov/react-core/AutoCompleteMultipleInputContainer': lazyImport(_digigov_react_core_AutoCompleteMultipleInputContainer),
   '@digigov/react-core/AutoCompleteResultList': lazyImport(_digigov_react_core_AutoCompleteResultList),
@@ -343,7 +345,7 @@ export default {
   '@digigov/react-core/ChipHeading': lazyImport(_digigov_react_core_ChipHeading),
   '@digigov/react-core/ChipKeyValue': lazyImport(_digigov_react_core_ChipKeyValue),
   '@digigov/react-core/ChoiceDividerText': lazyImport(_digigov_react_core_ChoiceDividerText),
-  '@digigov/react-core/CircularProgressBase': lazyImport(_digigov_react_core_CircularProgressBase),
+  '@digigov/react-core/CircularProgress': lazyImport(_digigov_react_core_CircularProgress),
   '@digigov/react-core/CloseButton': lazyImport(_digigov_react_core_CloseButton),
   '@digigov/react-core/Code': lazyImport(_digigov_react_core_Code),
   '@digigov/react-core/CodeBlockContainer': lazyImport(_digigov_react_core_CodeBlockContainer),

package/src/AutoCompleteInputTypeahead/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the AutoCompleteInputTypeahead with no props 1`] = `
+<body>
+  <div>
+    <span>
+      <input
+        class="ds-autocomplete__hint"
+        readonly=""
+        tabindex="-1"
+        type="text"
+      />
+    </span>
+  </div>
+</body>
+`;

package/src/AutoCompleteInputTypeahead/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import AutoCompleteInputTypeahead from '@digigov/react-core/AutoCompleteInputTypeahead';
+
+it('renders the AutoCompleteInputTypeahead with no props', () => {
+  expect(render(<AutoCompleteInputTypeahead />).baseElement).toMatchSnapshot();
+});

package/src/AutoCompleteInputTypeahead/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AutoCompleteInputTypeaheadProps extends BaseProps<'input'> {}
+/**
+ * AutoCompleteInputTypeahead component is used to display the hole search value
+ * in the background.
+ *
+ */
+export const AutoCompleteInputTypeahead = React.forwardRef<
+  HTMLInputElement,
+  AutoCompleteInputTypeaheadProps
+>(function AutoCompleteInputTypeahead({ className, ...props }, ref) {
+  return (
+    <span>
+      <Base
+        as="input"
+        type="text"
+        readOnly
+        ref={ref}
+        tabIndex={-1}
+        className={clsx(className, {
+          'ds-autocomplete__hint': true,
+        })}
+        {...props}
+      />
+    </span>
+  );
+});
+
+export default AutoCompleteInputTypeahead;

package/src/Base/compat/Input/CheckboxInput.native.tsx

@@ -1,4 +1,8 @@
-import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
+import React, {
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  LegacyRef,
+} from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 export type CheckboxInputProps = Omit<
@@ -24,7 +28,7 @@ export const CheckboxInput = React.forwardRef<
   return (
     // @ts-ignore
     <TouchableOpacity
-      ref={ref as Ref<TouchableOpacity>}
+      ref={ref as LegacyRef<TouchableOpacity>}
       onPress={handlePress}
       {...props}
     >

package/src/Base/compat/Input/RadioInput.native.tsx

@@ -1,4 +1,8 @@
-import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
+import React, {
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  LegacyRef,
+} from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 export type RadioInputProps = Omit<
@@ -22,7 +26,7 @@ export const RadioInput = React.forwardRef<HTMLInputElement, RadioInputProps>(
 
     return (
       <TouchableOpacity
-        ref={ref as Ref<typeof TouchableOpacity>}
+        ref={ref as LegacyRef<typeof TouchableOpacity>}
         onPress={handlePress}
         {...(props as any)}
       >

package/src/Base/index.native.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, type JSX } from 'react';
+import React, { useMemo } from 'react';
 import { Text, View, ViewProps } from 'react-native';
 import { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';
 import { mapping } from '@digigov/react-core/Base/mapping.native';
@@ -22,7 +22,7 @@ const BooleanMapper = {
 const textHtmlTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'];
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType,
+  C extends React.ElementType = 'span',
 >(
   {
     as,

package/src/Base/index.web.tsx

@@ -162,7 +162,7 @@ type BaseComponent = <C extends React.ElementType = 'span'>(
 ) => React.ReactNode | null;
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType,
+  C extends React.ElementType = 'span',
 >(
   {
     as,

package/src/Base/mapping.native.tsx

@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import React from 'react';
 import { Link } from 'expo-router';
 import { cssInterop } from 'nativewind';
 import { Image, View } from 'react-native';

package/src/Checkbox/__snapshots__/index.test.tsx.snap

@@ -16,6 +16,7 @@ exports[`renders the Checkbox with dense prop and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
+            value=""
           />
         </label>
       </div>
@@ -29,6 +30,7 @@ exports[`renders the Checkbox with dense prop and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
+            value=""
           />
         </label>
       </div>
@@ -53,6 +55,7 @@ exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
+            value=""
           />
         </label>
       </div>
@@ -66,6 +69,7 @@ exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
+            value=""
           />
         </label>
       </div>
@@ -102,6 +106,7 @@ exports[`renders the Checkbox with no props and CheckboxItem 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
+            value=""
           />
         </label>
       </div>

package/src/CheckboxItem/__snapshots__/index.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
           class="ds-checkboxes__input"
           disabled=""
           type="checkbox"
+          value=""
         />
       </label>
     </div>
@@ -39,6 +40,7 @@ exports[`renders the CheckboxItem with \`divider\` prop 1`] = `
         <input
           class="ds-checkboxes__input"
           type="checkbox"
+          value=""
         />
       </label>
     </div>
@@ -60,6 +62,7 @@ exports[`renders the CheckboxItem with \`name\` prop 1`] = `
           class="ds-checkboxes__input"
           name="example"
           type="checkbox"
+          value=""
         />
       </label>
     </div>
@@ -152,6 +155,7 @@ exports[`renders the CheckboxItem with no props 1`] = `
         <input
           class="ds-checkboxes__input"
           type="checkbox"
+          value=""
         />
       </label>
     </div>

package/src/{CircularProgressBase → CircularProgress}/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the CircularProgressBase 1`] = `
+exports[`renders the CircularProgress 1`] = `
 <body>
   <div>
     <svg
@@ -22,7 +22,7 @@ exports[`renders the CircularProgressBase 1`] = `
 </body>
 `;
 
-exports[`renders the CircularProgressBase with color=secondary and size lg props 1`] = `
+exports[`renders the CircularProgress with color=secondary and size lg props 1`] = `
 <body>
   <div>
     <svg
@@ -44,7 +44,7 @@ exports[`renders the CircularProgressBase with color=secondary and size lg props
 </body>
 `;
 
-exports[`renders the CircularProgressBase with color=secondary and size sm props 1`] = `
+exports[`renders the CircularProgress with color=secondary and size sm props 1`] = `
 <body>
   <div>
     <svg
@@ -66,7 +66,7 @@ exports[`renders the CircularProgressBase with color=secondary and size sm props
 </body>
 `;
 
-exports[`renders the CircularProgressBase with color=secondary prop 1`] = `
+exports[`renders the CircularProgress with color=secondary prop 1`] = `
 <body>
   <div>
     <svg
@@ -88,7 +88,7 @@ exports[`renders the CircularProgressBase with color=secondary prop 1`] = `
 </body>
 `;
 
-exports[`renders the CircularProgressBase with size lg 1`] = `
+exports[`renders the CircularProgress with size lg 1`] = `
 <body>
   <div>
     <svg
@@ -110,7 +110,7 @@ exports[`renders the CircularProgressBase with size lg 1`] = `
 </body>
 `;
 
-exports[`renders the CircularProgressBase with size sm 1`] = `
+exports[`renders the CircularProgress with size sm 1`] = `
 <body>
   <div>
     <svg

package/src/CircularProgress/index.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import CircularProgress from '@digigov/react-core/CircularProgress';
+
+it('renders the CircularProgress', () => {
+  expect(render(<CircularProgress />).baseElement).toMatchSnapshot();
+});
+
+it('renders the CircularProgress with size sm', () => {
+  expect(render(<CircularProgress size="sm" />).baseElement).toMatchSnapshot();
+});
+
+it('renders the CircularProgress with size lg', () => {
+  expect(render(<CircularProgress size="lg" />).baseElement).toMatchSnapshot();
+});
+
+it('renders the CircularProgress with color=secondary prop', () => {
+  expect(
+    render(<CircularProgress color={'secondary'} />).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the CircularProgress with color=secondary and size sm props', () => {
+  expect(
+    render(<CircularProgress color={'secondary'} size="sm" />).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the CircularProgress with color=secondary and size lg props', () => {
+  expect(
+    render(<CircularProgress color={'secondary'} size="lg" />).baseElement
+  ).toMatchSnapshot();
+});

package/src/{CircularProgressBase → CircularProgress}/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CircularProgressBaseProps extends BaseProps<'svg'> {
+export interface CircularProgressProps extends BaseProps<'svg'> {
   /**
    * color prop is optional.
    * color prop is used to change the color of the loader.
@@ -22,12 +22,12 @@ export interface CircularProgressBaseProps extends BaseProps<'svg'> {
   size?: 'sm' | 'md' | 'lg';
 }
 /**
- * Use CircularProgressBase component as an animated loader.
- *  CircularProgressBase can be used inside LoaderContainer component.
+ * Use CircularProgress component as an animated loader.
+ *  CircularProgress can be used inside LoaderContainer component.
  */
-export const CircularProgressBase = React.forwardRef<
-  SVGElement,
-  CircularProgressBaseProps
+export const CircularProgress = React.forwardRef<
+  SVGSVGElement,
+  CircularProgressProps
 >(function CircularProgress(
   { color = 'primary', size = 'md', className, ...props },
   ref
@@ -60,4 +60,4 @@ export const CircularProgressBase = React.forwardRef<
   );
 });
 
-export default CircularProgressBase;
+export default CircularProgress;

package/src/LinkBase/index.tsx

@@ -35,7 +35,7 @@ export const LinkBase = React.forwardRef<HTMLAnchorElement, LinkBaseProps>(
           'ds-link': defaultStyle,
           'ds-link--no-underline': !underline,
         })}
-        {...(props.as && { defaultStyle: defaultStyle, underline: underline })}
+        defaultStyle={defaultStyle}
         {...props}
       >
         {children}

package/src/RadioItem/__snapshots__/index.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`renders the RadioItem  \`dividerText\` props 1`] = `
         <input
           class="ds-radios__input"
           type="radio"
+          value=""
         />
       </label>
     </div>
@@ -88,6 +89,7 @@ exports[`renders the RadioItem with disabled prop 1`] = `
           class="ds-radios__input"
           disabled=""
           type="radio"
+          value=""
         />
       </label>
     </div>
@@ -109,6 +111,7 @@ exports[`renders the RadioItem with name  props 1`] = `
           class="ds-radios__input"
           name="name"
           type="radio"
+          value=""
         />
       </label>
     </div>
@@ -174,6 +177,7 @@ exports[`renders the RadioItem with no props 1`] = `
         <input
           class="ds-radios__input"
           type="radio"
+          value=""
         />
       </label>
     </div>

package/src/TableDataCell/__snapshots__/index.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`renders the Table with dataType numeric prop 1`] = `
           class="ds-table__row"
         >
           <td
-            class="ds-table__cell ds-table__cell--border ds-table__cell--numeric"
+            class="ds-table__cell ds-table__cell--numeric"
           >
             hello
           </td>
@@ -37,7 +37,7 @@ exports[`renders the Table with no props 1`] = `
           class="ds-table__row"
         >
           <td
-            class="ds-table__cell ds-table__cell--border"
+            class="ds-table__cell"
           >
             hello
           </td>

package/src/Typography/index.tsx

@@ -29,26 +29,25 @@ export interface TypographyProps
  * Typography component is used as generic component for typography.
  * Use Typography component to extend components such as Heading, NormalText Paragraph etc.
  */
-export const Typography = React.forwardRef<
-  HTMLSpanElement | HTMLParagraphElement | HTMLHeadingElement,
-  TypographyProps
->(function Typography(
-  { as, fontSize, fontWeight, className, children, ...props },
-  ref
-) {
-  return (
-    <Base
-      as={as}
-      ref={ref}
-      className={clsx(className, {
-        [`ds-!-font-size-${fontSize}`]: fontSize !== undefined,
-        [`ds-!-font-weight-${fontWeight}`]: fontWeight !== undefined,
-      })}
-      {...props}
-    >
-      {children}
-    </Base>
-  );
-});
+export const Typography = React.forwardRef<HTMLHeadingElement, TypographyProps>(
+  function Typography(
+    { as, fontSize, fontWeight, className, children, ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as={as}
+        ref={ref}
+        className={clsx(className, {
+          [`ds-!-font-size-${fontSize}`]: fontSize !== undefined,
+          [`ds-!-font-weight-${fontWeight}`]: fontWeight !== undefined,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
 
 export default Typography;

package/src/index.ts

@@ -151,6 +151,7 @@ export * from '@digigov/react-core/AdminLayout';
 export * from '@digigov/react-core/AdminMain';
 export * from '@digigov/react-core/AdminTopSection';
 export * from '@digigov/react-core/AutoCompleteInputBase';
+export * from '@digigov/react-core/AutoCompleteInputTypeahead';
 export * from '@digigov/react-core/AutoCompleteResultList';
 export * from '@digigov/react-core/AutoCompleteResultListItem';
 export * from '@digigov/react-core/AutoCompleteContainer';
@@ -190,7 +191,7 @@ export * from '@digigov/react-core/PaginationList';
 export * from '@digigov/react-core/PaginationListItem';
 export * from '@digigov/react-core/PaginationLabelContainer';
 export * from '@digigov/react-core/LoaderContainer';
-export * from '@digigov/react-core/CircularProgressBase';
+export * from '@digigov/react-core/CircularProgress';
 export * from '@digigov/react-core/FullPageBackground';
 export * from '@digigov/react-core/StepNavCircleNumber';
 export * from '@digigov/react-core/StepNav';

package/src/lazy.js

@@ -152,6 +152,7 @@ export default {
   'AdminMain': lazy(() => import('@digigov/react-core/AdminMain').then((module) => ({ default: module['AdminMain'] }))),
   'AdminTopSection': lazy(() => import('@digigov/react-core/AdminTopSection').then((module) => ({ default: module['AdminTopSection'] }))),
   'AutoCompleteInputBase': lazy(() => import('@digigov/react-core/AutoCompleteInputBase').then((module) => ({ default: module['AutoCompleteInputBase'] }))),
+  'AutoCompleteInputTypeahead': lazy(() => import('@digigov/react-core/AutoCompleteInputTypeahead').then((module) => ({ default: module['AutoCompleteInputTypeahead'] }))),
   'AutoCompleteResultList': lazy(() => import('@digigov/react-core/AutoCompleteResultList').then((module) => ({ default: module['AutoCompleteResultList'] }))),
   'AutoCompleteResultListItem': lazy(() => import('@digigov/react-core/AutoCompleteResultListItem').then((module) => ({ default: module['AutoCompleteResultListItem'] }))),
   'AutoCompleteContainer': lazy(() => import('@digigov/react-core/AutoCompleteContainer').then((module) => ({ default: module['AutoCompleteContainer'] }))),
@@ -191,7 +192,7 @@ export default {
   'PaginationListItem': lazy(() => import('@digigov/react-core/PaginationListItem').then((module) => ({ default: module['PaginationListItem'] }))),
   'PaginationLabelContainer': lazy(() => import('@digigov/react-core/PaginationLabelContainer').then((module) => ({ default: module['PaginationLabelContainer'] }))),
   'LoaderContainer': lazy(() => import('@digigov/react-core/LoaderContainer').then((module) => ({ default: module['LoaderContainer'] }))),
-  'CircularProgressBase': lazy(() => import('@digigov/react-core/CircularProgressBase').then((module) => ({ default: module['CircularProgressBase'] }))),
+  'CircularProgress': lazy(() => import('@digigov/react-core/CircularProgress').then((module) => ({ default: module['CircularProgress'] }))),
   'FullPageBackground': lazy(() => import('@digigov/react-core/FullPageBackground').then((module) => ({ default: module['FullPageBackground'] }))),
   'StepNavCircleNumber': lazy(() => import('@digigov/react-core/StepNavCircleNumber').then((module) => ({ default: module['StepNavCircleNumber'] }))),
   'StepNav': lazy(() => import('@digigov/react-core/StepNav').then((module) => ({ default: module['StepNav'] }))),