@digigov/react-core 2.0.0-87b6232d → 2.0.0-8bbad051

package/lazy/index.js

@@ -152,7 +152,6 @@ 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'] }))),
@@ -192,7 +191,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'] }))),
-  'CircularProgress': lazy(() => import('@digigov/react-core/CircularProgress').then((module) => ({ default: module['CircularProgress'] }))),
+  'CircularProgressBase': lazy(() => import('@digigov/react-core/CircularProgressBase').then((module) => ({ default: module['CircularProgressBase'] }))),
   '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-87b6232d",
+  "version": "2.0.0-8bbad051",
   "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-87b6232d",
-    "@digigov/react-icons": "2.0.0-87b6232d",
+    "@digigov/css": "2.0.0-8bbad051",
+    "@digigov/react-icons": "2.0.0-8bbad051",
     "clsx": "1.1.1",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0",
+    "react": "^18.3.0 || ^19.1.0",
+    "react-dom": "^18.3.0 || ^19.1.0",
     "react-native-svg": "^15.2.0",
     "expo-router": "^3.5.14",
     "nativewind": "^4.1.1"

package/registry/index.js

@@ -7,8 +7,8 @@ import * as _digigov_react_core_AccordionSection from "@digigov/react-core/Accor
 import * as _digigov_react_core_AccordionSection_index_web from "@digigov/react-core/AccordionSection/index.web";
 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_AdminAside from "@digigov/react-core/AdminAside";
 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_AdminHeader from "@digigov/react-core/AdminHeader";
 import * as _digigov_react_core_AdminHeaderContent from "@digigov/react-core/AdminHeaderContent";
@@ -19,7 +19,6 @@ 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";
@@ -41,8 +40,8 @@ import * as _digigov_react_core_BottomInfoContainer from "@digigov/react-core/Bo
 import * as _digigov_react_core_BottomInfoContent from "@digigov/react-core/BottomInfoContent";
 import * as _digigov_react_core_Breadcrumbs from "@digigov/react-core/Breadcrumbs";
 import * as _digigov_react_core_BreadcrumbsList from "@digigov/react-core/BreadcrumbsList";
-import * as _digigov_react_core_BreadcrumbsListItemLinkBase from "@digigov/react-core/BreadcrumbsListItemLinkBase";
 import * as _digigov_react_core_BreadcrumbsListItemWrapper from "@digigov/react-core/BreadcrumbsListItemWrapper";
+import * as _digigov_react_core_BreadcrumbsListItemLinkBase from "@digigov/react-core/BreadcrumbsListItemLinkBase";
 import * as _digigov_react_core_Button from "@digigov/react-core/Button";
 import * as _digigov_react_core_ButtonGroup from "@digigov/react-core/ButtonGroup";
 import * as _digigov_react_core_ButtonLinkBase from "@digigov/react-core/ButtonLinkBase";
@@ -61,7 +60,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_CircularProgress from "@digigov/react-core/CircularProgress";
+import * as _digigov_react_core_CircularProgressBase from "@digigov/react-core/CircularProgressBase";
 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";
@@ -291,8 +290,8 @@ export default {
   '@digigov/react-core/AccordionSection/index.web': lazyImport(_digigov_react_core_AccordionSection_index_web),
   '@digigov/react-core/AccordionSectionContent': lazyImport(_digigov_react_core_AccordionSectionContent),
   '@digigov/react-core/AccordionSectionSummary': lazyImport(_digigov_react_core_AccordionSectionSummary),
-  '@digigov/react-core/AdminAside': lazyImport(_digigov_react_core_AdminAside),
   '@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/AdminHeader': lazyImport(_digigov_react_core_AdminHeader),
   '@digigov/react-core/AdminHeaderContent': lazyImport(_digigov_react_core_AdminHeaderContent),
@@ -303,7 +302,6 @@ 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),
@@ -325,8 +323,8 @@ export default {
   '@digigov/react-core/BottomInfoContent': lazyImport(_digigov_react_core_BottomInfoContent),
   '@digigov/react-core/Breadcrumbs': lazyImport(_digigov_react_core_Breadcrumbs),
   '@digigov/react-core/BreadcrumbsList': lazyImport(_digigov_react_core_BreadcrumbsList),
-  '@digigov/react-core/BreadcrumbsListItemLinkBase': lazyImport(_digigov_react_core_BreadcrumbsListItemLinkBase),
   '@digigov/react-core/BreadcrumbsListItemWrapper': lazyImport(_digigov_react_core_BreadcrumbsListItemWrapper),
+  '@digigov/react-core/BreadcrumbsListItemLinkBase': lazyImport(_digigov_react_core_BreadcrumbsListItemLinkBase),
   '@digigov/react-core/Button': lazyImport(_digigov_react_core_Button),
   '@digigov/react-core/ButtonGroup': lazyImport(_digigov_react_core_ButtonGroup),
   '@digigov/react-core/ButtonLinkBase': lazyImport(_digigov_react_core_ButtonLinkBase),
@@ -345,7 +343,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/CircularProgress': lazyImport(_digigov_react_core_CircularProgress),
+  '@digigov/react-core/CircularProgressBase': lazyImport(_digigov_react_core_CircularProgressBase),
   '@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/Accordion/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,41 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`renders the Accordion with all the props 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-accordion ds-accordion--no-border ds-accordion--dense ds-accordion--secondary"
+    >
+      hello
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders the Accordion with dense=true prop 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-accordion ds-accordion--border-top ds-accordion--dense"
+    >
+      hello
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders the Accordion with horizontalBorders=bottom prop 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-accordion ds-accordion--border-bottom"
+    >
+      hello
+    </div>
+  </div>
+</body>
+`;
+
 exports[`renders the Accordion with no props 1`] = `
 <body>
   <div>
@@ -11,3 +47,15 @@ exports[`renders the Accordion with no props 1`] = `
   </div>
 </body>
 `;
+
+exports[`renders the Accordion with summaryColor=secondary prop 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-accordion ds-accordion--border-top ds-accordion--secondary"
+    >
+      hello
+    </div>
+  </div>
+</body>
+`;

package/src/Accordion/index.test.tsx

@@ -6,3 +6,27 @@ import Accordion from '@digigov/react-core/Accordion';
 it('renders the Accordion with no props', () => {
   expect(render(<Accordion>hello</Accordion>).baseElement).toMatchSnapshot();
 });
+it('renders the Accordion with horizontalBorders=bottom prop', () => {
+  expect(
+    render(<Accordion horizontalBorders="bottom">hello</Accordion>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the Accordion with summaryColor=secondary prop', () => {
+  expect(
+    render(<Accordion summaryColor="secondary">hello</Accordion>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the Accordion with dense=true prop', () => {
+  expect(
+    render(<Accordion dense={true}>hello</Accordion>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the Accordion with all the props', () => {
+  expect(
+    render(
+      <Accordion horizontalBorders="none" summaryColor="secondary" dense={true}>
+        hello
+      </Accordion>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/AccordionSection/index.web.tsx

@@ -4,7 +4,6 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 export interface AccordionSectionProps extends BaseProps<'details'> {}
 /**
  * AccordionSection should be inside the Accordion component.
- *
  * Inside this component must place the Accordion and the AccordionSectionContent components.
  */
 export const AccordionSection = React.forwardRef<

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

@@ -16,3 +16,20 @@ exports[`renders the AccordionSectionSummaryHeading with no props 1`] = `
   </div>
 </body>
 `;
+
+exports[`renders the AccordionSectionSummaryHeading with variant=arrows prop 1`] = `
+<body>
+  <div>
+    <h2
+      class="ds-accordion__section-heading"
+      role="button"
+    >
+      <span
+        class="ds-accordion__section-button ds-accordion__section-button--arrows"
+      >
+        hello
+      </span>
+    </h2>
+  </div>
+</body>
+`;

package/src/AccordionSectionSummaryHeading/index.test.tsx

@@ -10,3 +10,12 @@ it('renders the AccordionSectionSummaryHeading with no props', () => {
     ).baseElement
   ).toMatchSnapshot();
 });
+it('renders the AccordionSectionSummaryHeading with variant=arrows prop', () => {
+  expect(
+    render(
+      <AccordionSectionSummaryHeading variant="arrows">
+        hello
+      </AccordionSectionSummaryHeading>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/AccordionSectionSummaryHeading/index.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AccordionSectionSummaryHeadingProps extends BaseProps<'h2'> {}
+export interface AccordionSectionSummaryHeadingProps extends BaseProps<'h2'> {
+  /*
+   * The type of the icon to be displayed on the right side of the heading.
+   * @default 'default'
+   */
+  variant?: 'default' | 'arrows';
+}
 /**
  * AccordionSectionSummaryHeading should be placed inside AccordionSectionSummary.
  */
@@ -10,7 +16,7 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
   HTMLHeadingElement,
   AccordionSectionSummaryHeadingProps
 >(function AccordionSectionSummaryHeading(
-  { className, children, ...props },
+  { variant, className, children, ...props },
   ref
 ) {
   return (
@@ -27,6 +33,7 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
         as="span"
         className={clsx({
           'ds-accordion__section-button': true,
+          'ds-accordion__section-button--arrows': variant === 'arrows',
         })}
       >
         {children}

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

@@ -4,7 +4,7 @@ exports[`renders the BannerContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-cookie-banner"
+      class="ds-banner-container"
     >
       hello
     </div>

package/src/BannerContainer/index.tsx

@@ -13,7 +13,7 @@ export const BannerContainer = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-cookie-banner': true,
+        'ds-banner-container': true,
       })}
       {...props}
     >

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

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

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

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

package/src/Base/index.native.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, type JSX } 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 = 'span',
+  C extends React.ElementType,
 >(
   {
     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 = 'span',
+  C extends React.ElementType,
 >(
   {
     as,

package/src/Base/mapping.native.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } 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,7 +16,6 @@ exports[`renders the Checkbox with dense prop and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -30,7 +29,6 @@ exports[`renders the Checkbox with dense prop and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -55,7 +53,6 @@ exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -69,7 +66,6 @@ exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
           <input
             class="ds-checkboxes__input"
             type="checkbox"
-            value=""
           />
         </label>
       </div>
@@ -106,7 +102,6 @@ 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,7 +14,6 @@ exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
           class="ds-checkboxes__input"
           disabled=""
           type="checkbox"
-          value=""
         />
       </label>
     </div>
@@ -40,7 +39,6 @@ exports[`renders the CheckboxItem with \`divider\` prop 1`] = `
         <input
           class="ds-checkboxes__input"
           type="checkbox"
-          value=""
         />
       </label>
     </div>
@@ -62,7 +60,6 @@ exports[`renders the CheckboxItem with \`name\` prop 1`] = `
           class="ds-checkboxes__input"
           name="example"
           type="checkbox"
-          value=""
         />
       </label>
     </div>
@@ -155,7 +152,6 @@ exports[`renders the CheckboxItem with no props 1`] = `
         <input
           class="ds-checkboxes__input"
           type="checkbox"
-          value=""
         />
       </label>
     </div>

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

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

package/src/CircularProgressBase/index.test.tsx

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

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

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

package/src/DetailsContent/index.tsx

@@ -2,7 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface DetailsContentProps extends BaseProps<'div'> {}
+export interface DetailsContentProps extends BaseProps<'div'> {
+  /*
+   ** color is optional. Default value is 'primary'.
+   * @value 'primary'
+   * @value 'secondary'
+   * @default 'primary'
+   * */
+  color?: 'primary' | 'secondary';
+}
 /**
  *DetailsContent component wraps the content text.
  *It is used inside Details component as children
@@ -10,13 +18,14 @@ export interface DetailsContentProps extends BaseProps<'div'> {}
 export const DetailsContent = React.forwardRef<
   HTMLDivElement,
   DetailsContentProps
->(function DetailsContent({ className, children, ...props }, ref) {
+>(function DetailsContent({ color, className, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
         'ds-details__content': true,
+        'ds-details__content--secondary': color === 'secondary',
       })}
       {...props}
     >

package/src/Grid/index.tsx

@@ -32,13 +32,7 @@ export interface GridProps extends BaseProps<'div' | 'aside' | 'main'> {
   inline?: boolean;
   /**
    * Defines the space between the type item components. It can only be used on a type container component.
-   * @value 1
-   * @value 2
-   * @value 4
-   * @value 6
-   * @value 8
-   * @value 10
-   * @value 12
+   * @value 1 - 12
    * @value object
    * @default undefined
    */

package/src/LinkBase/index.tsx

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

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

@@ -36,7 +36,6 @@ exports[`renders the NavListItemActionBase with arrow, badgeText and label props
       class="ds-nav__list-item"
     >
       <button
-        badgetext="hello"
         class="ds-print-hidden ds-nav__list-item-btn ds-link"
       >
         hello

package/src/NavListItemActionBase/index.tsx

@@ -35,7 +35,7 @@ export const NavListItemActionBase = React.forwardRef<
   HTMLButtonElement | HTMLAnchorElement,
   NavListItemActionBaseProps
 >(function NavListItemActionBase(
-  { label, arrow = false, href, className, children, ...props },
+  { label, arrow = false, href, className, children, badgeText, ...props },
   ref
 ) {
   return (
@@ -59,7 +59,7 @@ export const NavListItemActionBase = React.forwardRef<
           {children || label}
         </NavListItemButton>
       )}
-      {props.badgeText && <NavListItemBadge text={props.badgeText} />}
+      {badgeText && <NavListItemBadge text={badgeText} />}
     </NavListItemActionContainer>
   );
 });