@digigov/react-core 2.0.0-2a26e869 → 2.0.0-44e7106a

package/registry/index.js

@@ -1,12 +1,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_AccordionSection from "@digigov/react-core/AccordionSection";
+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_AccordionSectionSummary from "@digigov/react-core/AccordionSectionSummary";
 import * as _digigov_react_core_AccordionSectionContent from "@digigov/react-core/AccordionSectionContent";
 import * as _digigov_react_core_AccordionSectionSummaryHeading from "@digigov/react-core/AccordionSectionSummaryHeading";
-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_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_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";
@@ -24,7 +26,7 @@ import * as _digigov_react_core_AutoCompleteResultList from "@digigov/react-core
 import * as _digigov_react_core_AutoCompleteResultListItem from "@digigov/react-core/AutoCompleteResultListItem";
 import * as _digigov_react_core_AutoCompleteStatus from "@digigov/react-core/AutoCompleteStatus";
 import * as _digigov_react_core_AutoCompleteStatusContainer from "@digigov/react-core/AutoCompleteStatusContainer";
-import * as _digigov_react_core_BackLink from "@digigov/react-core/BackLink";
+import * as _digigov_react_core_BackLinkBase from "@digigov/react-core/BackLinkBase";
 import * as _digigov_react_core_BackToTopContainer from "@digigov/react-core/BackToTopContainer";
 import * as _digigov_react_core_BackToTopLimit from "@digigov/react-core/BackToTopLimit";
 import * as _digigov_react_core_BackToTopLink from "@digigov/react-core/BackToTopLink";
@@ -39,12 +41,12 @@ 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_BreadcrumbsListItem from "@digigov/react-core/BreadcrumbsListItem";
-import * as _digigov_react_core_BreadcrumbsListItemLink from "@digigov/react-core/BreadcrumbsListItemLink";
+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_Button from "@digigov/react-core/Button";
 import * as _digigov_react_core_ButtonGroup from "@digigov/react-core/ButtonGroup";
-import * as _digigov_react_core_ButtonLink from "@digigov/react-core/ButtonLink";
-import * as _digigov_react_core_CallToAction from "@digigov/react-core/CallToAction";
+import * as _digigov_react_core_ButtonLinkBase from "@digigov/react-core/ButtonLinkBase";
+import * as _digigov_react_core_CallToActionBase from "@digigov/react-core/CallToActionBase";
 import * as _digigov_react_core_Card from "@digigov/react-core/Card";
 import * as _digigov_react_core_CardAction from "@digigov/react-core/CardAction";
 import * as _digigov_react_core_CardContent from "@digigov/react-core/CardContent";
@@ -105,24 +107,24 @@ import * as _digigov_react_core_FooterHeading from "@digigov/react-core/FooterHe
 import * as _digigov_react_core_FooterImage from "@digigov/react-core/FooterImage";
 import * as _digigov_react_core_FooterInfo from "@digigov/react-core/FooterInfo";
 import * as _digigov_react_core_FooterInfoSection from "@digigov/react-core/FooterInfoSection";
-import * as _digigov_react_core_FooterLink from "@digigov/react-core/FooterLink";
+import * as _digigov_react_core_FooterLinkBase from "@digigov/react-core/FooterLinkBase";
 import * as _digigov_react_core_FooterList from "@digigov/react-core/FooterList";
 import * as _digigov_react_core_FooterListItem from "@digigov/react-core/FooterListItem";
 import * as _digigov_react_core_FooterNavigation from "@digigov/react-core/FooterNavigation";
 import * as _digigov_react_core_FooterNavigationSection from "@digigov/react-core/FooterNavigationSection";
 import * as _digigov_react_core_Form from "@digigov/react-core/Form";
 import * as _digigov_react_core_FullPageBackground from "@digigov/react-core/FullPageBackground";
-import * as _digigov_react_core_GovGRLogo_govgr_logo_base64 from "@digigov/react-core/GovGRLogo/govgr-logo-base64";
-import * as _digigov_react_core_GovGRLogo_govgr_logo_blue_base64 from "@digigov/react-core/GovGRLogo/govgr-logo-blue-base64";
-import * as _digigov_react_core_GovGRLogo from "@digigov/react-core/GovGRLogo";
+import * as _digigov_react_core_GovGRLogoBase_govgr_logo_base64 from "@digigov/react-core/GovGRLogoBase/govgr-logo-base64";
+import * as _digigov_react_core_GovGRLogoBase_govgr_logo_blue_base64 from "@digigov/react-core/GovGRLogoBase/govgr-logo-blue-base64";
+import * as _digigov_react_core_GovGRLogoBase from "@digigov/react-core/GovGRLogoBase";
 import * as _digigov_react_core_Grid from "@digigov/react-core/Grid";
 import * as _digigov_react_core_Header from "@digigov/react-core/Header";
 import * as _digigov_react_core_HeaderContent from "@digigov/react-core/HeaderContent";
-import * as _digigov_react_core_HeaderLogo from "@digigov/react-core/HeaderLogo";
+import * as _digigov_react_core_HeaderLogoBase from "@digigov/react-core/HeaderLogoBase";
 import * as _digigov_react_core_HeaderNavMenuContent from "@digigov/react-core/HeaderNavMenuContent";
-import * as _digigov_react_core_HeaderSecondaryLogo from "@digigov/react-core/HeaderSecondaryLogo";
+import * as _digigov_react_core_HeaderSecondaryLogoBase from "@digigov/react-core/HeaderSecondaryLogoBase";
 import * as _digigov_react_core_HeaderSection from "@digigov/react-core/HeaderSection";
-import * as _digigov_react_core_HeaderTitle from "@digigov/react-core/HeaderTitle";
+import * as _digigov_react_core_HeaderTitleBase from "@digigov/react-core/HeaderTitleBase";
 import * as _digigov_react_core_Heading from "@digigov/react-core/Heading";
 import * as _digigov_react_core_HeadingCaption from "@digigov/react-core/HeadingCaption";
 import * as _digigov_react_core_HellenicRepublicLogo from "@digigov/react-core/HellenicRepublicLogo";
@@ -160,12 +162,12 @@ import * as _digigov_react_core_ModalContent from "@digigov/react-core/ModalCont
 import * as _digigov_react_core_ModalHeading from "@digigov/react-core/ModalHeading";
 import * as _digigov_react_core_Nav from "@digigov/react-core/Nav";
 import * as _digigov_react_core_NavList from "@digigov/react-core/NavList";
-import * as _digigov_react_core_NavListItemAction from "@digigov/react-core/NavListItemAction";
+import * as _digigov_react_core_NavListItemActionBase from "@digigov/react-core/NavListItemActionBase";
 import * as _digigov_react_core_NavListItemActionContainer from "@digigov/react-core/NavListItemActionContainer";
 import * as _digigov_react_core_NavListItemActionContainer_index_web from "@digigov/react-core/NavListItemActionContainer/index.web";
 import * as _digigov_react_core_NavListItemBadge from "@digigov/react-core/NavListItemBadge";
 import * as _digigov_react_core_NavListItemButton from "@digigov/react-core/NavListItemButton";
-import * as _digigov_react_core_NavListItemLink from "@digigov/react-core/NavListItemLink";
+import * as _digigov_react_core_NavListItemLinkBase from "@digigov/react-core/NavListItemLinkBase";
 import * as _digigov_react_core_NavMenuContainer from "@digigov/react-core/NavMenuContainer";
 import * as _digigov_react_core_NavMenuContent from "@digigov/react-core/NavMenuContent";
 import * as _digigov_react_core_NavMenuContentListBase from "@digigov/react-core/NavMenuContentListBase";
@@ -283,12 +285,14 @@ function lazyImport(pkgImport) {
 export default {
   '@digigov/react-core': lazyImport(_digigov_react_core),
   '@digigov/react-core/Accordion': lazyImport(_digigov_react_core_Accordion),
-  '@digigov/react-core/AccordionSection': lazyImport(_digigov_react_core_AccordionSection),
+  '@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/AccordionSectionSummary': lazyImport(_digigov_react_core_AccordionSectionSummary),
   '@digigov/react-core/AccordionSectionContent': lazyImport(_digigov_react_core_AccordionSectionContent),
   '@digigov/react-core/AccordionSectionSummaryHeading': lazyImport(_digigov_react_core_AccordionSectionSummaryHeading),
-  '@digigov/react-core/AccordionSectionSummary': lazyImport(_digigov_react_core_AccordionSectionSummary),
   '@digigov/react-core/AdminAside': lazyImport(_digigov_react_core_AdminAside),
+  '@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/AdminContainer': lazyImport(_digigov_react_core_AdminContainer),
   '@digigov/react-core/AdminHeader': lazyImport(_digigov_react_core_AdminHeader),
   '@digigov/react-core/AdminHeaderContent': lazyImport(_digigov_react_core_AdminHeaderContent),
@@ -306,7 +310,7 @@ export default {
   '@digigov/react-core/AutoCompleteResultListItem': lazyImport(_digigov_react_core_AutoCompleteResultListItem),
   '@digigov/react-core/AutoCompleteStatus': lazyImport(_digigov_react_core_AutoCompleteStatus),
   '@digigov/react-core/AutoCompleteStatusContainer': lazyImport(_digigov_react_core_AutoCompleteStatusContainer),
-  '@digigov/react-core/BackLink': lazyImport(_digigov_react_core_BackLink),
+  '@digigov/react-core/BackLinkBase': lazyImport(_digigov_react_core_BackLinkBase),
   '@digigov/react-core/BackToTopContainer': lazyImport(_digigov_react_core_BackToTopContainer),
   '@digigov/react-core/BackToTopLimit': lazyImport(_digigov_react_core_BackToTopLimit),
   '@digigov/react-core/BackToTopLink': lazyImport(_digigov_react_core_BackToTopLink),
@@ -321,12 +325,12 @@ 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/BreadcrumbsListItem': lazyImport(_digigov_react_core_BreadcrumbsListItem),
-  '@digigov/react-core/BreadcrumbsListItemLink': lazyImport(_digigov_react_core_BreadcrumbsListItemLink),
+  '@digigov/react-core/BreadcrumbsListItemLinkBase': lazyImport(_digigov_react_core_BreadcrumbsListItemLinkBase),
+  '@digigov/react-core/BreadcrumbsListItemWrapper': lazyImport(_digigov_react_core_BreadcrumbsListItemWrapper),
   '@digigov/react-core/Button': lazyImport(_digigov_react_core_Button),
   '@digigov/react-core/ButtonGroup': lazyImport(_digigov_react_core_ButtonGroup),
-  '@digigov/react-core/ButtonLink': lazyImport(_digigov_react_core_ButtonLink),
-  '@digigov/react-core/CallToAction': lazyImport(_digigov_react_core_CallToAction),
+  '@digigov/react-core/ButtonLinkBase': lazyImport(_digigov_react_core_ButtonLinkBase),
+  '@digigov/react-core/CallToActionBase': lazyImport(_digigov_react_core_CallToActionBase),
   '@digigov/react-core/Card': lazyImport(_digigov_react_core_Card),
   '@digigov/react-core/CardAction': lazyImport(_digigov_react_core_CardAction),
   '@digigov/react-core/CardContent': lazyImport(_digigov_react_core_CardContent),
@@ -387,24 +391,24 @@ export default {
   '@digigov/react-core/FooterImage': lazyImport(_digigov_react_core_FooterImage),
   '@digigov/react-core/FooterInfo': lazyImport(_digigov_react_core_FooterInfo),
   '@digigov/react-core/FooterInfoSection': lazyImport(_digigov_react_core_FooterInfoSection),
-  '@digigov/react-core/FooterLink': lazyImport(_digigov_react_core_FooterLink),
+  '@digigov/react-core/FooterLinkBase': lazyImport(_digigov_react_core_FooterLinkBase),
   '@digigov/react-core/FooterList': lazyImport(_digigov_react_core_FooterList),
   '@digigov/react-core/FooterListItem': lazyImport(_digigov_react_core_FooterListItem),
   '@digigov/react-core/FooterNavigation': lazyImport(_digigov_react_core_FooterNavigation),
   '@digigov/react-core/FooterNavigationSection': lazyImport(_digigov_react_core_FooterNavigationSection),
   '@digigov/react-core/Form': lazyImport(_digigov_react_core_Form),
   '@digigov/react-core/FullPageBackground': lazyImport(_digigov_react_core_FullPageBackground),
-  '@digigov/react-core/GovGRLogo/govgr-logo-base64': lazyImport(_digigov_react_core_GovGRLogo_govgr_logo_base64),
-  '@digigov/react-core/GovGRLogo/govgr-logo-blue-base64': lazyImport(_digigov_react_core_GovGRLogo_govgr_logo_blue_base64),
-  '@digigov/react-core/GovGRLogo': lazyImport(_digigov_react_core_GovGRLogo),
+  '@digigov/react-core/GovGRLogoBase/govgr-logo-base64': lazyImport(_digigov_react_core_GovGRLogoBase_govgr_logo_base64),
+  '@digigov/react-core/GovGRLogoBase/govgr-logo-blue-base64': lazyImport(_digigov_react_core_GovGRLogoBase_govgr_logo_blue_base64),
+  '@digigov/react-core/GovGRLogoBase': lazyImport(_digigov_react_core_GovGRLogoBase),
   '@digigov/react-core/Grid': lazyImport(_digigov_react_core_Grid),
   '@digigov/react-core/Header': lazyImport(_digigov_react_core_Header),
   '@digigov/react-core/HeaderContent': lazyImport(_digigov_react_core_HeaderContent),
-  '@digigov/react-core/HeaderLogo': lazyImport(_digigov_react_core_HeaderLogo),
+  '@digigov/react-core/HeaderLogoBase': lazyImport(_digigov_react_core_HeaderLogoBase),
   '@digigov/react-core/HeaderNavMenuContent': lazyImport(_digigov_react_core_HeaderNavMenuContent),
-  '@digigov/react-core/HeaderSecondaryLogo': lazyImport(_digigov_react_core_HeaderSecondaryLogo),
+  '@digigov/react-core/HeaderSecondaryLogoBase': lazyImport(_digigov_react_core_HeaderSecondaryLogoBase),
   '@digigov/react-core/HeaderSection': lazyImport(_digigov_react_core_HeaderSection),
-  '@digigov/react-core/HeaderTitle': lazyImport(_digigov_react_core_HeaderTitle),
+  '@digigov/react-core/HeaderTitleBase': lazyImport(_digigov_react_core_HeaderTitleBase),
   '@digigov/react-core/Heading': lazyImport(_digigov_react_core_Heading),
   '@digigov/react-core/HeadingCaption': lazyImport(_digigov_react_core_HeadingCaption),
   '@digigov/react-core/HellenicRepublicLogo': lazyImport(_digigov_react_core_HellenicRepublicLogo),
@@ -442,12 +446,12 @@ export default {
   '@digigov/react-core/ModalHeading': lazyImport(_digigov_react_core_ModalHeading),
   '@digigov/react-core/Nav': lazyImport(_digigov_react_core_Nav),
   '@digigov/react-core/NavList': lazyImport(_digigov_react_core_NavList),
-  '@digigov/react-core/NavListItemAction': lazyImport(_digigov_react_core_NavListItemAction),
+  '@digigov/react-core/NavListItemActionBase': lazyImport(_digigov_react_core_NavListItemActionBase),
   '@digigov/react-core/NavListItemActionContainer': lazyImport(_digigov_react_core_NavListItemActionContainer),
   '@digigov/react-core/NavListItemActionContainer/index.web': lazyImport(_digigov_react_core_NavListItemActionContainer_index_web),
   '@digigov/react-core/NavListItemBadge': lazyImport(_digigov_react_core_NavListItemBadge),
   '@digigov/react-core/NavListItemButton': lazyImport(_digigov_react_core_NavListItemButton),
-  '@digigov/react-core/NavListItemLink': lazyImport(_digigov_react_core_NavListItemLink),
+  '@digigov/react-core/NavListItemLinkBase': lazyImport(_digigov_react_core_NavListItemLinkBase),
   '@digigov/react-core/NavMenuContainer': lazyImport(_digigov_react_core_NavMenuContainer),
   '@digigov/react-core/NavMenuContent': lazyImport(_digigov_react_core_NavMenuContent),
   '@digigov/react-core/NavMenuContentListBase': lazyImport(_digigov_react_core_NavMenuContentListBase),

package/src/Accordion/index.native.tsx

@@ -0,0 +1,19 @@
+import CoreAccordion from '@digigov/react-core/Accordion/index.web';
+import extend, {
+  enablePseudoclass,
+} from '@digigov/react-core/utils/index.native';
+
+export const Accordion = enablePseudoclass(
+  extend(CoreAccordion, ({ className, ...props }) => ({
+    ...props,
+    multiline: true,
+    className,
+  })),
+  {
+    children: {
+      'first-child': ['ds-accordion__section__first-child'],
+    },
+  }
+);
+
+export default Accordion;

package/src/Accordion/index.tsx

@@ -1,71 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface AccordionProps extends BaseProps<'div'> {
-  /*
-   * horizontalBorders is optional.
-   * If 'none', Accordion will have no borders.
-   * If 'top', Accordion will have a border on top.
-   * If 'bottom', Accordion will have a border on bottom.
-   * @value none
-   * @value top
-   * @value bottom
-   * @default top
-   */
-  horizontalBorders?: 'none' | 'top' | 'bottom';
-  /**
-   * summaryColor is optional.
-   * 'primary' color gives AccordionSectionSummary the default color.
-   * 'secondary' color gives AccordionSectionSummary a gray background.
-   * @value primary
-   * @value secondary
-   * @default primary
-   * */
-  summaryColor?: 'primary' | 'secondary';
-  /**
-   * dense is optional.
-   * If true, AccordionSection will have a smaller padding.
-   * @value true
-   * @value false
-   * @default false
-   * */
-  dense?: boolean;
-}
-/**
- * Accordion is the main component for an accordion.
- * Inside this component must be a list of AccordionSection components.
- */
-export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
-  function Accordion(
-    {
-      className,
-      horizontalBorders = 'top',
-      summaryColor = 'primary',
-      dense,
-      children,
-      ...props
-    },
-    ref
-  ) {
-    return (
-      <Base
-        as="div"
-        ref={ref}
-        className={clsx(className, {
-          'ds-accordion': true,
-          'ds-accordion--no-border': horizontalBorders === 'none',
-          'ds-accordion--border-top': horizontalBorders === 'top',
-          'ds-accordion--border-bottom': horizontalBorders === 'bottom',
-          'ds-accordion--dense': dense,
-          'ds-accordion--secondary': summaryColor === 'secondary',
-        })}
-        {...props}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
-
-export default Accordion;
+export * from '@digigov/react-core/Accordion/index.web';
+export { default as default } from '@digigov/react-core/Accordion/index.web';

package/src/Accordion/index.web.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AccordionProps extends BaseProps<'div'> {
+  /*
+   * horizontalBorders is optional.
+   * If 'none', Accordion will have no borders.
+   * If 'top', Accordion will have a border on top.
+   * If 'bottom', Accordion will have a border on bottom.
+   * @value none
+   * @value top
+   * @value bottom
+   * @default top
+   */
+  horizontalBorders?: 'none' | 'top' | 'bottom';
+  /**
+   * summaryColor is optional.
+   * 'primary' color gives AccordionSectionSummary the default color.
+   * 'secondary' color gives AccordionSectionSummary a gray background.
+   * @value primary
+   * @value secondary
+   * @default primary
+   * */
+  summaryColor?: 'primary' | 'secondary';
+  /**
+   * dense is optional.
+   * If true, AccordionSection will have a smaller padding.
+   * @value true
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
+}
+/**
+ * Accordion is the main component for an accordion.
+ * Inside this component must be a list of AccordionSection components.
+ */
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  function Accordion(
+    {
+      className,
+      horizontalBorders = 'top',
+      summaryColor = 'primary',
+      dense,
+      children,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'ds-accordion': true,
+          'ds-accordion--no-border': horizontalBorders === 'none',
+          'ds-accordion--border-top': horizontalBorders === 'top',
+          'ds-accordion--border-bottom': horizontalBorders === 'bottom',
+          'ds-accordion--dense': dense,
+          'ds-accordion--secondary': summaryColor === 'secondary',
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Accordion;

package/src/AccordionSection/index.native.tsx

@@ -0,0 +1,18 @@
+import CoreAccordionSection from '@digigov/react-core/AccordionSection/index.web';
+import { extend } from '@digigov/react-core/utils/index.native';
+
+export const AccordionSection = extend(
+  CoreAccordionSection,
+  ({ className, ...props }) => {
+    return {
+      className: className,
+      iconClassName: 'ds-accordion__section-button-icon',
+      openIcon: '–',
+      closeIcon: '+',
+      placement: 'after',
+      ...props,
+    };
+  }
+);
+
+export default AccordionSection;

package/src/AccordionSection/index.tsx

@@ -1,28 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-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<
-  HTMLDetailsElement,
-  AccordionSectionProps
->(function AccordionSection({ className, children, ...props }, ref) {
-  return (
-    <Base
-      as="details"
-      ref={ref}
-      className={clsx(className, {
-        'ds-accordion__section': true,
-      })}
-      {...props}
-    >
-      {children}
-    </Base>
-  );
-});
-
-export default AccordionSection;
+export * from '@digigov/react-core/AccordionSection/index.web';
+export { default as default } from '@digigov/react-core/AccordionSection/index.web';

package/src/AccordionSection/index.web.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+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<
+  HTMLDetailsElement,
+  AccordionSectionProps
+>(function AccordionSection({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="details"
+      ref={ref}
+      className={clsx(className, {
+        'ds-accordion__section': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AccordionSection;

package/src/AccordionSectionSummaryHeading/index.tsx

@@ -23,13 +23,14 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
       {...props}
       role="button"
     >
-      <span
+      <Base
+        as="span"
         className={clsx({
           'ds-accordion__section-button': true,
         })}
       >
         {children}
-      </span>
+      </Base>
     </Base>
   );
 });

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

@@ -4,7 +4,7 @@ exports[`renders the AdminAside with no prop 1`] = `
 <body>
   <div>
     <aside
-      class="ds-admin-aside ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4 lg:ds-grid__col-span-3"
+      class="ds-admin-aside ds-aside ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-4 lg:ds-grid__col-span-3"
     >
       hello
     </aside>

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

@@ -4,7 +4,7 @@ exports[`renders the AdminContainer with no grid 1`] = `
 <body>
   <div>
     <div
-      class="ds-admin-container ds-container ds-container--full-width"
+      class="ds-admin-container ds-container ds-container--full-width ds-grid-item"
     >
       hello
     </div>
@@ -16,7 +16,7 @@ exports[`renders the AdminContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-admin-container ds-container ds-container--full-width ds-grid ds-gap-sm-12"
+      class="ds-admin-container ds-container ds-container--full-width ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

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

@@ -4,7 +4,7 @@ exports[`renders the AdminMain with no prop 1`] = `
 <body>
   <div>
     <main
-      class="ds-admin-main ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8 lg:ds-grid__col-span-9"
+      class="ds-admin-main ds-main ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-8 lg:ds-grid__col-span-9"
       id="main-content"
     >
       hello

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

@@ -4,7 +4,7 @@ exports[`renders the AdminTopSection no prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-admin-top-section"
+      class="ds-admin-top-section ds-grid-item"
     >
       hello
     </div>

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

@@ -4,7 +4,7 @@ exports[`renders the Aside with no props 1`] = `
 <body>
   <div>
     <aside
-      class="ds-aside ds-aside--sticky xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
+      class="ds-aside ds-aside--sticky ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
     >
       hello
     </aside>

package/src/{BackLink → BackLinkBase}/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the BackLink with href="#" 1`] = `
+exports[`renders the BackLinkBase with href="#" 1`] = `
 <body>
   <div>
     <a
@@ -27,7 +27,7 @@ exports[`renders the BackLink with href="#" 1`] = `
 </body>
 `;
 
-exports[`renders the BackLink with no props 1`] = `
+exports[`renders the BackLinkBase with no props 1`] = `
 <body>
   <div>
     <a

package/src/BackLinkBase/index.test.tsx

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

package/src/BackLinkBase/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import clsx from 'clsx';
+import { LinkBase, LinkBaseProps } from '@digigov/react-core/LinkBase';
+import { CaretIcon } from '@digigov/react-icons';
+
+export interface BackLinkBaseProps extends LinkBaseProps {}
+/**
+ * Use BackLinkBase component to help users go back to the previous page in a multi-page transaction.
+ */
+export const BackLinkBase = React.forwardRef<
+  HTMLAnchorElement,
+  BackLinkBaseProps
+>(function BackLinkBase(
+  { href, printHidden = true, className, children, ...props },
+  ref
+) {
+  return (
+    <LinkBase
+      href={href}
+      printHidden={printHidden}
+      defaultStyle={false}
+      onClick={() => !href && window.history.back()}
+      ref={ref}
+      className={clsx(className, {
+        'ds-back-link': true,
+      })}
+      tabIndex={0}
+      {...props}
+    >
+      <CaretIcon direction={'left'} />
+      {children}
+    </LinkBase>
+  );
+});
+
+export default BackLinkBase;

package/src/Base/compat/details.native.tsx

@@ -16,6 +16,7 @@ type HTMLElementProps = Omit<
 > & {
   closeIcon?: string;
   openIcon?: string;
+  iconClassName?: string;
   placement?: 'before' | 'after';
 };
 
@@ -25,6 +26,7 @@ const CompatDetails = ({
   placement,
   closeIcon,
   openIcon,
+  iconClassName,
   ...props
 }: HTMLElementProps) => {
   const [isExpanded, setIsExpanded] = useState(open);
@@ -41,7 +43,7 @@ const CompatDetails = ({
 
   const toggleIcon =
     closeIcon && openIcon ? (
-      <Text>{isExpanded ? openIcon : closeIcon}</Text>
+      <Text className={iconClassName}>{isExpanded ? openIcon : closeIcon}</Text>
     ) : null;
 
   return (

package/src/Base/index.web.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { basePropGenerator } from '@digigov/react-core/Base/utils';
 interface AsProp<C extends React.ElementType> {
-  as?: C;
+  as?: C | React.ElementType<any>;
 }
 
 type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);

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

@@ -4,7 +4,7 @@ exports[`renders the BottomInfo with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info ds-container ds-grid ds-gap-sm-12"
+      class="ds-bottom-info ds-container ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

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

@@ -4,7 +4,7 @@ exports[`renders the BottomInfoContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info__container ds-container ds-grid ds-gap-sm-12"
+      class="ds-bottom-info__container ds-container ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

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

@@ -4,7 +4,7 @@ exports[`renders the BottomInfoContent with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info__content xs:ds-grid__col-span-12"
+      class="ds-bottom-info__content ds-grid-item xs:ds-grid__col-span-12"
     >
       hello
     </div>