@digigov/react-core 0.25.2 → 0.25.4

package/esm/TextInput/index.test.js

@@ -105,8 +105,8 @@ it('renders the TextInput with cellWidth=full', function () {
 });
 
 var _ref14 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 2,
-  cellWidth: 'one-quarter'
+  cellWidth: 'one-quarter',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=one-quarter', function () {
@@ -114,8 +114,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=one-quarter',
 });
 
 var _ref15 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 3,
-  cellWidth: 'one-quarter'
+  cellWidth: 'one-quarter',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=one-quarter', function () {
@@ -123,8 +123,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=one-quarter',
 });
 
 var _ref16 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 4,
-  cellWidth: 'one-quarter'
+  cellWidth: 'one-quarter',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=one-quarter', function () {
@@ -132,8 +132,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=one-quarter',
 });
 
 var _ref17 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 5,
-  cellWidth: 'one-quarter'
+  cellWidth: 'one-quarter',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=one-quarter', function () {
@@ -141,8 +141,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=one-quarter
 });
 
 var _ref18 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 20,
-  cellWidth: 'one-quarter'
+  cellWidth: 'one-quarter',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=one-quarter', function () {
@@ -150,8 +150,8 @@ it('renders the TextInput with characterWidth=20 and with cellWidth=one-quarter'
 });
 
 var _ref19 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 2,
-  cellWidth: 'one-third'
+  cellWidth: 'one-third',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=one-third', function () {
@@ -159,8 +159,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=one-third', f
 });
 
 var _ref20 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 3,
-  cellWidth: 'one-third'
+  cellWidth: 'one-third',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=one-third', function () {
@@ -168,8 +168,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=one-third', f
 });
 
 var _ref21 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 4,
-  cellWidth: 'one-third'
+  cellWidth: 'one-third',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=one-third', function () {
@@ -177,8 +177,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=one-third', f
 });
 
 var _ref22 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 5,
-  cellWidth: 'one-third'
+  cellWidth: 'one-third',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=one-third', function () {
@@ -186,8 +186,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=one-third',
 });
 
 var _ref23 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 20,
-  cellWidth: 'one-third'
+  cellWidth: 'one-third',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=one-third', function () {
@@ -195,8 +195,8 @@ it('renders the TextInput with characterWidth=20 and with cellWidth=one-third',
 });
 
 var _ref24 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 2,
-  cellWidth: 'one-half'
+  cellWidth: 'one-half',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=one-half', function () {
@@ -204,8 +204,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=one-half', fu
 });
 
 var _ref25 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 3,
-  cellWidth: 'one-half'
+  cellWidth: 'one-half',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=one-half', function () {
@@ -213,8 +213,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=one-half', fu
 });
 
 var _ref26 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 4,
-  cellWidth: 'one-half'
+  cellWidth: 'one-half',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=one-half', function () {
@@ -222,8 +222,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=one-half', fu
 });
 
 var _ref27 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 5,
-  cellWidth: 'one-half'
+  cellWidth: 'one-half',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=one-half', function () {
@@ -231,8 +231,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=one-half',
 });
 
 var _ref28 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 20,
-  cellWidth: 'one-half'
+  cellWidth: 'one-half',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=one-half', function () {
@@ -240,8 +240,8 @@ it('renders the TextInput with characterWidth=20 and with cellWidth=one-half', f
 });
 
 var _ref29 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 2,
-  cellWidth: 'two-thirds'
+  cellWidth: 'two-thirds',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=two-thirds', function () {
@@ -249,8 +249,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=two-thirds',
 });
 
 var _ref30 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 3,
-  cellWidth: 'two-thirds'
+  cellWidth: 'two-thirds',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=two-thirds', function () {
@@ -258,8 +258,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=two-thirds',
 });
 
 var _ref31 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 4,
-  cellWidth: 'two-thirds'
+  cellWidth: 'two-thirds',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=two-thirds', function () {
@@ -267,8 +267,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=two-thirds',
 });
 
 var _ref32 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 5,
-  cellWidth: 'two-thirds'
+  cellWidth: 'two-thirds',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=two-thirds', function () {
@@ -276,8 +276,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=two-thirds'
 });
 
 var _ref33 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 20,
-  cellWidth: 'two-thirds'
+  cellWidth: 'two-thirds',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=two-thirds', function () {
@@ -285,8 +285,8 @@ it('renders the TextInput with characterWidth=20 and with cellWidth=two-thirds',
 });
 
 var _ref34 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 2,
-  cellWidth: 'three-quarters'
+  cellWidth: 'three-quarters',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=three-quarters', function () {
@@ -294,8 +294,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=three-quarter
 });
 
 var _ref35 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 3,
-  cellWidth: 'three-quarters'
+  cellWidth: 'three-quarters',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=three-quarters', function () {
@@ -303,8 +303,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=three-quarter
 });
 
 var _ref36 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 4,
-  cellWidth: 'three-quarters'
+  cellWidth: 'three-quarters',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=three-quarters', function () {
@@ -312,8 +312,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=three-quarter
 });
 
 var _ref37 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 5,
-  cellWidth: 'three-quarters'
+  cellWidth: 'three-quarters',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=three-quarters', function () {
@@ -321,8 +321,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=three-quart
 });
 
 var _ref38 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 20,
-  cellWidth: 'three-quarters'
+  cellWidth: 'three-quarters',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=three-quarters', function () {
@@ -330,8 +330,8 @@ it('renders the TextInput with characterWidth=20 and with cellWidth=three-quarte
 });
 
 var _ref39 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 2,
-  cellWidth: 'full'
+  cellWidth: 'full',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=full', function () {
@@ -339,8 +339,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=full', functi
 });
 
 var _ref40 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 3,
-  cellWidth: 'full'
+  cellWidth: 'full',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=full', function () {
@@ -348,8 +348,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=full', functi
 });
 
 var _ref41 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 4,
-  cellWidth: 'full'
+  cellWidth: 'full',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=full', function () {
@@ -357,8 +357,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=full', functi
 });
 
 var _ref42 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 5,
-  cellWidth: 'full'
+  cellWidth: 'full',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=full', function () {
@@ -366,8 +366,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=full', func
 });
 
 var _ref43 = /*#__PURE__*/React.createElement(TextInput, {
-  characterWidth: 20,
-  cellWidth: 'full'
+  cellWidth: 'full',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=full', function () {

package/esm/Top/index.js

@@ -1,22 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["children", "className"];
 import React from 'react';
-import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base from '@digigov/react-core/Base';
 
 /**
  * Top is used inside the Layout component and it must be the first component in order.
  */
 export var Top = /*#__PURE__*/React.forwardRef(function Top(_ref, ref) {
-  var className = _ref.className,
-      children = _ref.children,
+  var children = _ref.children,
+      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
-    ref: ref,
-    className: clsx(className, true && 'govgr-top')
+    className: clsx(className, true && 'govgr-top'),
+    ref: ref
   }, props), children);
 });
 export default Top;

package/esm/UncheckIcon/index.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "variant", "className"];
+var _excluded = ["className", "size", "variant"];
 import React from 'react';
-import SvgIcon from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
+import SvgIcon from '@digigov/react-core/SvgIcon';
 
 var _ref2 = /*#__PURE__*/React.createElement("polygon", {
   points: "20.59 5.74 18.26 3.41 12 9.67 5.742 3.41 3.41 5.74 9.67 12 3.41 18.26 5.74 20.6 12 14.33 18.26 20.59 20.59 18.26 14.33 12 20.59 5.74"
@@ -13,16 +13,16 @@ var _ref2 = /*#__PURE__*/React.createElement("polygon", {
  * Use UnUncheckIcon component when you need a uncheck/decline icon.
  */
 export var UncheckIcon = /*#__PURE__*/React.forwardRef(function UncheckIcon(_ref, ref) {
-  var size = _ref.size,
+  var className = _ref.className,
+      size = _ref.size,
       variant = _ref.variant,
-      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(SvgIcon, _extends({
-    size: size,
-    variant: variant,
     className: clsx(className, true && 'govgr-svg-icon--check'),
-    ref: ref
+    ref: ref,
+    size: size,
+    variant: variant
   }, props), _ref2);
 });
 export default UncheckIcon;

package/esm/UncheckIcon/index.test.js

@@ -105,8 +105,8 @@ it('renders the UncheckIcon with prop variant=focus', function () {
 });
 
 var _ref14 = /*#__PURE__*/React.createElement(UncheckIcon, {
-  variant: "warning",
-  size: "s"
+  size: "s",
+  variant: "warning"
 });
 
 it('renders the UncheckIcon with prop variant=warning and size=s', function () {
@@ -114,8 +114,8 @@ it('renders the UncheckIcon with prop variant=warning and size=s', function () {
 });
 
 var _ref15 = /*#__PURE__*/React.createElement(UncheckIcon, {
-  variant: "warning",
-  size: "xl"
+  size: "xl",
+  variant: "warning"
 });
 
 it('renders the UncheckIcon with prop variant=error and size= xl', function () {

package/esm/VisuallyHidden/index.js

@@ -1,23 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["children", "className"];
 import React from 'react';
-import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base from '@digigov/react-core/Base';
 
 /**
  * Details for the VisuallyHidden.
  * VisuallyHidden component provides text for screen readers that is visually hidden.
  */
 export var VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(_ref, ref) {
-  var className = _ref.className,
-      children = _ref.children,
+  var children = _ref.children,
+      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "span",
-    ref: ref,
-    className: clsx(className, true && 'govgr-visually-hidden')
+    className: clsx(className, true && 'govgr-visually-hidden'),
+    ref: ref
   }, props), children);
 });
 export default VisuallyHidden;

package/esm/WarningText/index.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["children", "className"];
 import React from 'react';
-import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base from '@digigov/react-core/Base';
 
 /**
  * WarningText.
@@ -11,14 +11,14 @@ import clsx from 'clsx';
  * The component is used with a text inside it.
  */
 export var WarningText = /*#__PURE__*/React.forwardRef(function WarningText(_ref, ref) {
-  var className = _ref.className,
-      children = _ref.children,
+  var children = _ref.children,
+      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
-    ref: ref,
-    className: clsx(className, true && 'govgr-warning-text')
+    className: clsx(className, true && 'govgr-warning-text'),
+    ref: ref
   }, props), /*#__PURE__*/React.createElement("span", {
     className: clsx(true && 'govgr-warning-text__icon')
   }, "!"), /*#__PURE__*/React.createElement("strong", {

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.25.2
+/** @license Digigov v0.25.4
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "0.25.2",
+  "version": "0.25.4",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -11,7 +11,7 @@
     "directory": "dist"
   },
   "peerDependencies": {
-    "@digigov/css": "0.38.0",
+    "@digigov/css": "0.38.2",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/src/AccessibilityIcon/index.test.tsx

@@ -46,8 +46,8 @@ it('renders the AccessibilityIcon with prop variant=focus', () => {
   expect(mount(<AccessibilityIcon variant="focus" />)).toMatchSnapshot();
 });
 it('renders the AccessibilityIcon with prop variant=warning and size=s', () => {
-  expect(mount(<AccessibilityIcon variant="warning" size="s" />)).toMatchSnapshot();
+  expect(mount(<AccessibilityIcon size="s" variant="warning" />)).toMatchSnapshot();
 });
 it('renders the AccessibilityIcon with prop variant=error and size= xl', () => {
-  expect(mount(<AccessibilityIcon variant="warning" size="xl" />)).toMatchSnapshot();
+  expect(mount(<AccessibilityIcon size="xl" variant="warning" />)).toMatchSnapshot();
 });

package/src/AccessibilityIcon/index.tsx

@@ -1,22 +1,29 @@
 import React from 'react';
-import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
 import clsx from 'clsx';
-export interface AccessibilityIconProps extends SvgIconProps {}
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+export interface AccessibilityIconProps extends SvgIconProps {
+  /**
+   * ref is optional.
+   * ref prop declares the reference of the svg icon component.
+   * It can be used to to access the DOM element and the React element.
+   */
+  ref?: React.Ref<SVGSVGElement>;
+}
 /**
  * Use AccessibilityIcon component when you need to show web accessibility options.
  */
 export const AccessibilityIcon: React.FC<AccessibilityIconProps> = React.forwardRef<
   SVGSVGElement,
   AccessibilityIconProps
->(function AccessibilityIcon({ size, variant, className, ...props }, ref) {
+>(function AccessibilityIcon({ className, size, variant, ...props }, ref) {
   return (
     <SvgIcon
-      size={size}
-      variant={variant}
       className={clsx(className, {
         'govgr-svg-icon--accessibility': true,
       })}
       ref={ref}
+      size={size}
+      variant={variant}
       {...props}
     >
       <title>Μενού Προσβασιμότητας</title>

package/src/AccessibilityTextIcon/index.test.tsx

@@ -43,8 +43,8 @@ it('renders the AccessibilityTextIcon with prop variant=focus', () => {
   expect(mount(<AccessibilityTextIcon variant="focus" />)).toMatchSnapshot();
 });
 it('renders the AccessibilityTextIcon with prop variant=warning and size=s', () => {
-  expect(mount(<AccessibilityTextIcon variant="warning" size="s" />)).toMatchSnapshot();
+  expect(mount(<AccessibilityTextIcon size="s" variant="warning" />)).toMatchSnapshot();
 });
 it('renders the AccessibilityTextIcon with prop variant=error and size= xl', () => {
-  expect(mount(<AccessibilityTextIcon variant="warning" size="xl" />)).toMatchSnapshot();
+  expect(mount(<AccessibilityTextIcon size="xl" variant="warning" />)).toMatchSnapshot();
 });

package/src/Accordion/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface AccordionProps extends BaseProps<'div'> {}
 /**
@@ -8,14 +8,14 @@ export interface AccordionProps extends BaseProps<'div'> {}
  * Inside this component must be a list of AccordionSection components.
  */
 export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
-  function Accordion({ className, children, ...props }, ref) {
+  function Accordion({ children, className, ...props }, ref) {
     return (
       <Base
         as="div"
-        ref={ref}
         className={clsx(className, {
           'govgr-accordion': true,
         })}
+        ref={ref}
         {...props}
       >
         {children}

package/src/AccordionControls/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface AccordionControlsProps extends BaseProps<'div'> {}
 /**
@@ -9,12 +9,12 @@ export interface AccordionControlsProps extends BaseProps<'div'> {}
 export const AccordionControls = React.forwardRef<
   HTMLDivElement,
   AccordionControlsProps
->(function AccordionControls({ className, children, ...props }, ref) {
+>(function AccordionControls({ children, className, ...props }, ref) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, { 'govgr-accordion__controls': true })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/AccordionSection/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 export interface AccordionSectionProps extends BaseProps<'details'> {
   /*
    * border is optional. The default value is true.
@@ -18,17 +18,17 @@ export const AccordionSection = React.forwardRef<
   HTMLDetailsElement,
   AccordionSectionProps
 >(function AccordionSection(
-  { className, border = true, children, ...props },
+  { border = true, children, className, ...props },
   ref
 ) {
   return (
     <Base
       as="details"
-      ref={ref}
       className={clsx(className, {
         'govgr-accordion__section': true,
         'govgr-accordion__section--no-border': !border,
       })}
+      ref={ref}
       {...props}
     >
       {children}

package/src/AccordionSectionContent/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface AccordionSectionContentProps extends BaseProps<'div'> {}
 /**
@@ -10,14 +10,14 @@ export interface AccordionSectionContentProps extends BaseProps<'div'> {}
 export const AccordionSectionContent = React.forwardRef<
   HTMLDivElement,
   AccordionSectionContentProps
->(function AccordionSectionContent({ className, children, ...props }, ref) {
+>(function AccordionSectionContent({ children, className, ...props }, ref) {
   return (
     <Base
       as="div"
-      ref={ref}
       className={clsx(className, {
         'govgr-accordion__section-content': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}