@digigov/react-core 0.25.2 → 0.25.4

package/Tabs/index.js

@@ -13,24 +13,24 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _excluded = ["className", "children"];
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+
+var _excluded = ["children", "className"];
 
 /**
  * Tabs is the main component for tabs.
  * This component must contain TabsHeading, TabsList, and a list of TabsPanel component.
  */
 var Tabs = /*#__PURE__*/_react["default"].forwardRef(function Tabs(_ref, ref) {
-  var className = _ref.className,
-      children = _ref.children,
+  var children = _ref.children,
+      className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
     as: "div",
-    ref: ref,
-    className: (0, _clsx["default"])(className, true && 'govgr-tabs')
+    className: (0, _clsx["default"])(className, true && 'govgr-tabs'),
+    ref: ref
   }, props), children);
 });
 

package/TabsHeading/index.js

@@ -13,25 +13,25 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _excluded = ["size", "className", "children"];
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+
+var _excluded = ["children", "className", "size"];
 
 /**
  * TabsHeading should be inside the Tabs component. This heading is hidden on desktop screens, but it is always usefull for accessibility.
  */
 var TabsHeading = /*#__PURE__*/_react["default"].forwardRef(function TabsHeading(_ref, ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 's' : _ref$size,
+  var children = _ref.children,
       className = _ref.className,
-      children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 's' : _ref$size,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
     as: "h6",
-    ref: ref,
-    className: (0, _clsx["default"])(className, size === 'm' && 'govgr-heading-m', size === 's' && 'govgr-heading-s', true && 'govgr-tabs__title')
+    className: (0, _clsx["default"])(className, size === 'm' && 'govgr-heading-m', size === 's' && 'govgr-heading-s', true && 'govgr-tabs__title'),
+    ref: ref
   }, props), children);
 });
 

package/TabsList/index.js

@@ -13,25 +13,25 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _excluded = ["className", "children"];
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+
+var _excluded = ["children", "className"];
 
 /**
  * TabsList should be inside the Tabs component.
  * Inside the TabsList should be a list of TabsListItem components.
  */
 var TabsList = /*#__PURE__*/_react["default"].forwardRef(function TabsList(_ref, ref) {
-  var className = _ref.className,
-      children = _ref.children,
+  var children = _ref.children,
+      className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
     as: "ul",
-    role: "tablist",
+    className: (0, _clsx["default"])(className, true && 'govgr-tabs__list'),
     ref: ref,
-    className: (0, _clsx["default"])(className, true && 'govgr-tabs__list')
+    role: "tablist"
   }, props), children);
 });
 

package/TabsListItem/index.js

@@ -13,30 +13,30 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _excluded = ["selected", "className", "children"];
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+
+var _excluded = ["children", "className", "selected"];
 
 /**
  * TabsListItem should be inside the TabsList.
  * In here we declare the title of the tab.
  */
 var TabsListItem = /*#__PURE__*/_react["default"].forwardRef(function TabsListItem(_ref, ref) {
-  var selected = _ref.selected,
+  var children = _ref.children,
       className = _ref.className,
-      children = _ref.children,
+      selected = _ref.selected,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement("li", {
-    role: "presentation",
-    className: (0, _clsx["default"])(className, selected === true && 'govgr-tabs__list-item-selected', true && 'govgr-tabs__list-item')
+    className: (0, _clsx["default"])(className, selected === true && 'govgr-tabs__list-item-selected', true && 'govgr-tabs__list-item'),
+    role: "presentation"
   }, /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
+    "aria-selected": selected,
     as: "a",
+    className: (0, _clsx["default"])(true && 'govgr-tabs__tab'),
     ref: ref,
-    role: "tab",
-    "aria-selected": selected,
-    className: (0, _clsx["default"])(true && 'govgr-tabs__tab')
+    role: "tab"
   }, props), children));
 });
 

package/TabsPanel/index.js

@@ -13,11 +13,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _excluded = ["active", "className", "children"];
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+
+var _excluded = ["active", "children", "className"];
 
 /**
  * TabsPanel is inside the Tabs component.
@@ -25,15 +25,15 @@ var _excluded = ["active", "className", "children"];
  */
 var TabsPanel = /*#__PURE__*/_react["default"].forwardRef(function TabsPanel(_ref, ref) {
   var active = _ref.active,
-      className = _ref.className,
       children = _ref.children,
+      className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
+    "aria-hidden": !active,
     as: "div",
+    className: (0, _clsx["default"])(className, active === true && 'govgr-tabs__panel-visible', true && 'govgr-tabs__panel'),
     ref: ref,
-    role: "tabpanel",
-    "aria-hidden": !active,
-    className: (0, _clsx["default"])(className, active === true && 'govgr-tabs__panel-visible', true && 'govgr-tabs__panel')
+    role: "tabpanel"
   }, props), children);
 });
 

package/TextArea/index.js

@@ -13,30 +13,30 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _excluded = ["name", "rows", "error", "className", "children"];
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+
+var _excluded = ["children", "className", "error", "name", "rows"];
 
 /**
  * Textarea component is used when you need to let users enter an
  * amount of text that’s longer than a single line.
  */
 var TextArea = /*#__PURE__*/_react["default"].forwardRef(function TextArea(_ref, ref) {
-  var name = _ref.name,
+  var children = _ref.children,
+      className = _ref.className,
+      error = _ref.error,
+      name = _ref.name,
       _ref$rows = _ref.rows,
       rows = _ref$rows === void 0 ? 6 : _ref$rows,
-      error = _ref.error,
-      className = _ref.className,
-      children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
     as: "textarea",
+    className: (0, _clsx["default"])(className, error === true && 'govgr-error-input', true && 'govgr-textarea'),
     name: name,
-    rows: rows,
     ref: ref,
-    className: (0, _clsx["default"])(className, error === true && 'govgr-error-input', true && 'govgr-textarea')
+    rows: rows
   }, props), children);
 });
 

package/TextInput/index.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
 import { BaseProps } from '@digigov/react-core/Base';
 export interface TextInputProps extends BaseProps<'input'> {
-    /**
-     * characterWidth is optional.
-     */
-    characterWidth?: 2 | 3 | 4 | 5 | 10 | 20;
     /**
      * cellWidth is optional.
      * Use cellWidth prop to define a custom width for a specific reference number in your components.
      */
     cellWidth?: 'one-quarter' | 'one-third' | 'one-half' | 'two-thirds' | 'three-quarters' | 'full';
+    /**
+     * characterWidth is optional.
+     */
+    characterWidth?: 2 | 3 | 4 | 5 | 10 | 20;
     /**
      * error is optional. The default value is false.
      * Use this prop when there is an error at the input.

package/TextInput/index.js

@@ -13,32 +13,32 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _excluded = ["type", "name", "characterWidth", "cellWidth", "error", "className", "children"];
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+
+var _excluded = ["cellWidth", "characterWidth", "children", "className", "error", "name", "type"];
 
 /**
  * TextInput component when you need to let users enter text that’s no
  * longer than a single line, such as their name or phone number.
  */
 var TextInput = /*#__PURE__*/_react["default"].forwardRef(function TextInput(_ref, ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      name = _ref.name,
+  var cellWidth = _ref.cellWidth,
       characterWidth = _ref.characterWidth,
-      cellWidth = _ref.cellWidth,
-      error = _ref.error,
-      className = _ref.className,
       children = _ref.children,
+      className = _ref.className,
+      error = _ref.error,
+      name = _ref.name,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
     as: "input",
-    type: type,
+    className: (0, _clsx["default"])(className, cellWidth === 'three-quarters' && 'govgr-!-width-three-quarters', cellWidth === 'one-quarter' && 'govgr-!-width-one-quarter', cellWidth === 'two-thirds' && 'govgr-!-width-two-thirds', cellWidth === 'one-third' && 'govgr-!-width-one-third', cellWidth === 'one-half' && 'govgr-!-width-one-half', characterWidth === 10 && 'govgr-input--width-10', characterWidth === 20 && 'govgr-input--width-20', characterWidth === 2 && 'govgr-input--width-2', characterWidth === 3 && 'govgr-input--width-3', characterWidth === 4 && 'govgr-input--width-4', characterWidth === 5 && 'govgr-input--width-5', cellWidth === 'full' && 'govgr-!-width-full', error === true && 'govgr-error-input', true && 'govgr-input'),
     name: name,
     ref: ref,
-    className: (0, _clsx["default"])(className, cellWidth === 'three-quarters' && 'govgr-!-width-three-quarters', cellWidth === 'one-quarter' && 'govgr-!-width-one-quarter', cellWidth === 'two-thirds' && 'govgr-!-width-two-thirds', cellWidth === 'one-third' && 'govgr-!-width-one-third', cellWidth === 'one-half' && 'govgr-!-width-one-half', characterWidth === 10 && 'govgr-input--width-10', characterWidth === 20 && 'govgr-input--width-20', characterWidth === 2 && 'govgr-input--width-2', characterWidth === 3 && 'govgr-input--width-3', characterWidth === 4 && 'govgr-input--width-4', characterWidth === 5 && 'govgr-input--width-5', cellWidth === 'full' && 'govgr-!-width-full', error === true && 'govgr-error-input', true && 'govgr-input')
+    type: type
   }, props), children);
 });
 

package/TextInput/index.test.js

@@ -111,8 +111,8 @@ it('renders the TextInput with cellWidth=full', function () {
 });
 
 var _ref14 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 2,
-  cellWidth: 'one-quarter'
+  cellWidth: 'one-quarter',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=one-quarter', function () {
@@ -120,8 +120,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=one-quarter',
 });
 
 var _ref15 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 3,
-  cellWidth: 'one-quarter'
+  cellWidth: 'one-quarter',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=one-quarter', function () {
@@ -129,8 +129,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=one-quarter',
 });
 
 var _ref16 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 4,
-  cellWidth: 'one-quarter'
+  cellWidth: 'one-quarter',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=one-quarter', function () {
@@ -138,8 +138,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=one-quarter',
 });
 
 var _ref17 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 5,
-  cellWidth: 'one-quarter'
+  cellWidth: 'one-quarter',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=one-quarter', function () {
@@ -147,8 +147,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=one-quarter
 });
 
 var _ref18 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 20,
-  cellWidth: 'one-quarter'
+  cellWidth: 'one-quarter',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=one-quarter', function () {
@@ -156,8 +156,8 @@ it('renders the TextInput with characterWidth=20 and with cellWidth=one-quarter'
 });
 
 var _ref19 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 2,
-  cellWidth: 'one-third'
+  cellWidth: 'one-third',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=one-third', function () {
@@ -165,8 +165,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=one-third', f
 });
 
 var _ref20 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 3,
-  cellWidth: 'one-third'
+  cellWidth: 'one-third',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=one-third', function () {
@@ -174,8 +174,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=one-third', f
 });
 
 var _ref21 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 4,
-  cellWidth: 'one-third'
+  cellWidth: 'one-third',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=one-third', function () {
@@ -183,8 +183,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=one-third', f
 });
 
 var _ref22 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 5,
-  cellWidth: 'one-third'
+  cellWidth: 'one-third',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=one-third', function () {
@@ -192,8 +192,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=one-third',
 });
 
 var _ref23 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 20,
-  cellWidth: 'one-third'
+  cellWidth: 'one-third',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=one-third', function () {
@@ -201,8 +201,8 @@ it('renders the TextInput with characterWidth=20 and with cellWidth=one-third',
 });
 
 var _ref24 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 2,
-  cellWidth: 'one-half'
+  cellWidth: 'one-half',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=one-half', function () {
@@ -210,8 +210,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=one-half', fu
 });
 
 var _ref25 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 3,
-  cellWidth: 'one-half'
+  cellWidth: 'one-half',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=one-half', function () {
@@ -219,8 +219,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=one-half', fu
 });
 
 var _ref26 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 4,
-  cellWidth: 'one-half'
+  cellWidth: 'one-half',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=one-half', function () {
@@ -228,8 +228,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=one-half', fu
 });
 
 var _ref27 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 5,
-  cellWidth: 'one-half'
+  cellWidth: 'one-half',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=one-half', function () {
@@ -237,8 +237,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=one-half',
 });
 
 var _ref28 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 20,
-  cellWidth: 'one-half'
+  cellWidth: 'one-half',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=one-half', function () {
@@ -246,8 +246,8 @@ it('renders the TextInput with characterWidth=20 and with cellWidth=one-half', f
 });
 
 var _ref29 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 2,
-  cellWidth: 'two-thirds'
+  cellWidth: 'two-thirds',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=two-thirds', function () {
@@ -255,8 +255,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=two-thirds',
 });
 
 var _ref30 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 3,
-  cellWidth: 'two-thirds'
+  cellWidth: 'two-thirds',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=two-thirds', function () {
@@ -264,8 +264,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=two-thirds',
 });
 
 var _ref31 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 4,
-  cellWidth: 'two-thirds'
+  cellWidth: 'two-thirds',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=two-thirds', function () {
@@ -273,8 +273,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=two-thirds',
 });
 
 var _ref32 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 5,
-  cellWidth: 'two-thirds'
+  cellWidth: 'two-thirds',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=two-thirds', function () {
@@ -282,8 +282,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=two-thirds'
 });
 
 var _ref33 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 20,
-  cellWidth: 'two-thirds'
+  cellWidth: 'two-thirds',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=two-thirds', function () {
@@ -291,8 +291,8 @@ it('renders the TextInput with characterWidth=20 and with cellWidth=two-thirds',
 });
 
 var _ref34 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 2,
-  cellWidth: 'three-quarters'
+  cellWidth: 'three-quarters',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=three-quarters', function () {
@@ -300,8 +300,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=three-quarter
 });
 
 var _ref35 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 3,
-  cellWidth: 'three-quarters'
+  cellWidth: 'three-quarters',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=three-quarters', function () {
@@ -309,8 +309,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=three-quarter
 });
 
 var _ref36 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 4,
-  cellWidth: 'three-quarters'
+  cellWidth: 'three-quarters',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=three-quarters', function () {
@@ -318,8 +318,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=three-quarter
 });
 
 var _ref37 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 5,
-  cellWidth: 'three-quarters'
+  cellWidth: 'three-quarters',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=three-quarters', function () {
@@ -327,8 +327,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=three-quart
 });
 
 var _ref38 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 20,
-  cellWidth: 'three-quarters'
+  cellWidth: 'three-quarters',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=three-quarters', function () {
@@ -336,8 +336,8 @@ it('renders the TextInput with characterWidth=20 and with cellWidth=three-quarte
 });
 
 var _ref39 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 2,
-  cellWidth: 'full'
+  cellWidth: 'full',
+  characterWidth: 2
 });
 
 it('renders the TextInput with characterWidth=2 and with cellWidth=full', function () {
@@ -345,8 +345,8 @@ it('renders the TextInput with characterWidth=2 and with cellWidth=full', functi
 });
 
 var _ref40 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 3,
-  cellWidth: 'full'
+  cellWidth: 'full',
+  characterWidth: 3
 });
 
 it('renders the TextInput with characterWidth=3 and with cellWidth=full', function () {
@@ -354,8 +354,8 @@ it('renders the TextInput with characterWidth=3 and with cellWidth=full', functi
 });
 
 var _ref41 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 4,
-  cellWidth: 'full'
+  cellWidth: 'full',
+  characterWidth: 4
 });
 
 it('renders the TextInput with characterWidth=4 and with cellWidth=full', function () {
@@ -363,8 +363,8 @@ it('renders the TextInput with characterWidth=4 and with cellWidth=full', functi
 });
 
 var _ref42 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 5,
-  cellWidth: 'full'
+  cellWidth: 'full',
+  characterWidth: 5
 });
 
 it('renders the TextInput  with with characterWidth=5 with cellWidth=full', function () {
@@ -372,8 +372,8 @@ it('renders the TextInput  with with characterWidth=5 with cellWidth=full', func
 });
 
 var _ref43 = /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-  characterWidth: 20,
-  cellWidth: 'full'
+  cellWidth: 'full',
+  characterWidth: 20
 });
 
 it('renders the TextInput with characterWidth=20 and with cellWidth=full', function () {

package/Top/index.js

@@ -13,23 +13,23 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _excluded = ["className", "children"];
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+
+var _excluded = ["children", "className"];
 
 /**
  * Top is used inside the Layout component and it must be the first component in order.
  */
 var Top = /*#__PURE__*/_react["default"].forwardRef(function Top(_ref, ref) {
-  var className = _ref.className,
-      children = _ref.children,
+  var children = _ref.children,
+      className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
     as: "div",
-    ref: ref,
-    className: (0, _clsx["default"])(className, true && 'govgr-top')
+    className: (0, _clsx["default"])(className, true && 'govgr-top'),
+    ref: ref
   }, props), children);
 });
 

package/UncheckIcon/index.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 import { SvgIconProps } from '@digigov/react-core/SvgIcon';
 export interface UncheckIconProps 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 UnUncheckIcon component when you need a uncheck/decline icon.