@dxc-technology/halstack-react 8.0.0 → 9.0.1

package/select/Select.test.js

@@ -8,51 +8,46 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Select = _interopRequireDefault(require("./Select"));
-
 var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
+var _Select = _interopRequireDefault(require("./Select.tsx"));
+
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
 
 global.ResizeObserver = /*#__PURE__*/function () {
-  function ResizeObserver(cb) {
+  function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
-    this.cb = cb;
   }
 
   (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
-    value: function observe() {
-      this.cb([{
-        borderBoxSize: {
-          inlineSize: 0,
-          blockSize: 0
-        }
-      }]);
-    }
+    value: function observe() {}
   }, {
     key: "unobserve",
     value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
   }]);
   return ResizeObserver;
 }();
 
-global.DOMRect = {
-  fromRect: function fromRect() {
-    return {
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      width: 0,
-      height: 0
-    };
-  }
-};
-var single_options = [{
+var singleOptions = [{
   label: "Option 01",
   value: "1"
 }, {
@@ -113,7 +108,7 @@ var single_options = [{
   label: "Option 20",
   value: "20"
 }];
-var svg_icon_options = [{
+var svgIconOptions = [{
   label: "3G Mobile",
   value: "1",
   icon: /*#__PURE__*/_react["default"].createElement("svg", {
@@ -177,7 +172,7 @@ var svg_icon_options = [{
   label: "Regular",
   value: "Regular"
 }];
-var url_icon_options = [{
+var urlIconOptions = [{
   label: "Instagram",
   value: "1",
   icon: "https://cdn.icon-icons.com/icons2/2518/PNG/512/brand_instagram_icon_151534.png"
@@ -197,7 +192,7 @@ var url_icon_options = [{
   value: "5",
   icon: "https://cdn-icons-png.flaticon.com/512/145/145808.png"
 }];
-var group_options = [{
+var groupOptions = [{
   label: "Colores",
   options: [{
     label: "Azul",
@@ -261,7 +256,7 @@ var group_options = [{
     value: "ebro"
   }]
 }];
-var grouped_icon_options = [{
+var groupedIconOptions = [{
   label: "Social Media",
   options: [{
     label: "Instagram",
@@ -341,7 +336,7 @@ describe("Select component tests", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Example",
-      options: single_options
+      options: singleOptions
     })),
         getByText = _render3.getByText,
         getByRole = _render3.getByRole;
@@ -367,7 +362,7 @@ describe("Select component tests", function () {
       label: "test-select-label",
       name: "test",
       defaultValue: "4",
-      options: single_options
+      options: singleOptions
     })),
         getByText = _render4.getByText,
         getByRole = _render4.getByRole,
@@ -395,7 +390,7 @@ describe("Select component tests", function () {
       label: "test-select-label",
       name: "test",
       defaultValue: ["4", "2", "6"],
-      options: single_options,
+      options: singleOptions,
       multiple: true
     })),
         getByText = _render5.getByText,
@@ -437,7 +432,7 @@ describe("Select component tests", function () {
       name: "options",
       label: "test-select-label",
       defaultValue: ["1", "5"],
-      options: single_options,
+      options: singleOptions,
       multiple: true
     }), /*#__PURE__*/_react["default"].createElement("button", {
       type: "submit"
@@ -459,7 +454,7 @@ describe("Select component tests", function () {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
-      options: single_options,
+      options: singleOptions,
       disabled: true
     })),
         getByRole = _render7.getByRole,
@@ -477,7 +472,7 @@ describe("Select component tests", function () {
     var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
-      options: single_options,
+      options: singleOptions,
       disabled: true,
       searchable: true,
       multiple: true
@@ -494,7 +489,7 @@ describe("Select component tests", function () {
 
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       disabled: true,
       onBlur: onBlur
     })),
@@ -517,7 +512,7 @@ describe("Select component tests", function () {
     var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
-      options: single_options,
+      options: singleOptions,
       disabled: true,
       searchable: true,
       multiple: true
@@ -545,7 +540,7 @@ describe("Select component tests", function () {
     }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       defaultValue: "1",
-      options: single_options,
+      options: singleOptions,
       disabled: true
     }), /*#__PURE__*/_react["default"].createElement("button", {
       type: "submit"
@@ -562,7 +557,7 @@ describe("Select component tests", function () {
 
     var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       onBlur: onBlur
     })),
@@ -604,7 +599,7 @@ describe("Select component tests", function () {
 
     var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       onBlur: onBlur,
       multiple: true
@@ -669,7 +664,7 @@ describe("Select component tests", function () {
 
     var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       onBlur: onBlur,
       optional: true
@@ -692,7 +687,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - Opens listbox and renders correctly or closes it with a click on select", function () {
     var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByText = _render15.getByText,
         getByRole = _render15.getByRole,
@@ -737,7 +732,7 @@ describe("Select component tests", function () {
     var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange
     })),
         getByText = _render17.getByText,
@@ -770,7 +765,7 @@ describe("Select component tests", function () {
     var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       optional: true
     })),
@@ -826,7 +821,7 @@ describe("Select component tests", function () {
     var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Placeholder example",
-      options: single_options,
+      options: singleOptions,
       optional: true,
       searchable: true
     })),
@@ -854,7 +849,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - Renders SVG icons correctly when passed with options", function () {
     var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: svg_icon_options
+      options: svgIconOptions
     })),
         getByRole = _render20.getByRole,
         getAllByRole = _render20.getAllByRole;
@@ -869,7 +864,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - Renders string url icons correctly when passed with options", function () {
     var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: url_icon_options,
+      options: urlIconOptions,
       optional: true
     })),
         getByRole = _render21.getByRole,
@@ -885,7 +880,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
     var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByRole = _render22.getByRole,
         queryByRole = _render22.queryByRole;
@@ -905,7 +900,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
     var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByRole = _render23.getByRole,
         queryByRole = _render23.queryByRole;
@@ -932,7 +927,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
     var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByRole = _render24.getByRole,
         queryByRole = _render24.queryByRole;
@@ -952,7 +947,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
     var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByRole = _render25.getByRole,
         queryByRole = _render25.queryByRole;
@@ -981,7 +976,7 @@ describe("Select component tests", function () {
 
     var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       optional: true
     })),
@@ -1042,7 +1037,7 @@ describe("Select component tests", function () {
 
     var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1079,7 +1074,7 @@ describe("Select component tests", function () {
 
     var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1103,7 +1098,7 @@ describe("Select component tests", function () {
 
     var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1135,7 +1130,7 @@ describe("Select component tests", function () {
 
     var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1161,7 +1156,7 @@ describe("Select component tests", function () {
 
     var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1189,7 +1184,7 @@ describe("Select component tests", function () {
 
     var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1219,7 +1214,7 @@ describe("Select component tests", function () {
     var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       multiple: true
     })),
@@ -1280,7 +1275,7 @@ describe("Select component tests", function () {
 
     var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       multiple: true
     })),
@@ -1328,7 +1323,7 @@ describe("Select component tests", function () {
     var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       multiple: true,
       optional: true
@@ -1356,7 +1351,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
     var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByText = _render36.getByText,
         getByRole = _render36.getByRole,
@@ -1430,7 +1425,7 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", function () {
     var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options
+      options: singleOptions
     })),
         getByText = _render37.getByText,
         getByRole = _render37.getByRole,
@@ -1505,7 +1500,7 @@ describe("Select component tests", function () {
   test("Grouped Options - Opens listbox and renders it correctly or closes it with a click on select", function () {
     var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByText = _render38.getByText,
         getByRole = _render38.getByRole,
@@ -1561,7 +1556,7 @@ describe("Select component tests", function () {
     var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange
     })),
         getByText = _render40.getByText,
@@ -1594,7 +1589,7 @@ describe("Select component tests", function () {
     var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Placeholder example",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       optional: true
     })),
@@ -1650,7 +1645,7 @@ describe("Select component tests", function () {
     var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Placeholder example",
-      options: group_options,
+      options: groupOptions,
       optional: true,
       searchable: true
     })),
@@ -1678,7 +1673,7 @@ describe("Select component tests", function () {
   test("Grouped Options - Renders icons correctly when passed with group options", function () {
     var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: grouped_icon_options,
+      options: groupedIconOptions,
       optional: true
     })),
         getByRole = _render43.getByRole,
@@ -1694,7 +1689,7 @@ describe("Select component tests", function () {
   test("Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
     var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByRole = _render44.getByRole,
         queryByRole = _render44.queryByRole;
@@ -1714,7 +1709,7 @@ describe("Select component tests", function () {
   test("Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
     var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByRole = _render45.getByRole,
         queryByRole = _render45.queryByRole;
@@ -1741,7 +1736,7 @@ describe("Select component tests", function () {
   test("Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
     var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByRole = _render46.getByRole,
         queryByRole = _render46.queryByRole;
@@ -1761,7 +1756,7 @@ describe("Select component tests", function () {
   test("Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
     var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByRole = _render47.getByRole,
         queryByRole = _render47.queryByRole;
@@ -1790,7 +1785,7 @@ describe("Select component tests", function () {
 
     var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       optional: true
     })),
@@ -1851,7 +1846,7 @@ describe("Select component tests", function () {
 
     var _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1894,7 +1889,7 @@ describe("Select component tests", function () {
 
     var _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       searchable: true
     })),
@@ -1919,7 +1914,7 @@ describe("Select component tests", function () {
     var _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       multiple: true
     })),
@@ -1980,7 +1975,7 @@ describe("Select component tests", function () {
 
     var _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       multiple: true
     })),
@@ -2026,7 +2021,7 @@ describe("Select component tests", function () {
     var _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
-      options: group_options,
+      options: groupOptions,
       onChange: onChange,
       multiple: true,
       optional: true
@@ -2054,7 +2049,7 @@ describe("Select component tests", function () {
   test("Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
     var _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByText = _render54.getByText,
         getByRole = _render54.getByRole,
@@ -2128,7 +2123,7 @@ describe("Select component tests", function () {
   test("Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", function () {
     var _render55 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: group_options
+      options: groupOptions
     })),
         getByText = _render55.getByText,
         getByRole = _render55.getByRole,
@@ -2201,7 +2196,7 @@ describe("Select component tests", function () {
 
     var _render56 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
-      options: single_options,
+      options: singleOptions,
       onChange: onChange,
       multiple: true,
       optional: true

package/select/types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 declare type Margin = {
     top?: Space;
@@ -201,7 +201,7 @@ export declare type ListboxProps = {
     optionalItem: Option;
     searchable: boolean;
     handleOptionOnClick: (option: Option) => void;
-    getSelectWidth: () => number;
+    styles: React.CSSProperties;
 };
 /**
  * Reference to the select component.

package/sidenav/Sidenav.js

@@ -21,7 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _SidenavContext = require("../layout/SidenavContext");
 
@@ -33,7 +33,7 @@ var _Flex = _interopRequireDefault(require("../flex/Flex"));
 
 var _Bleed = _interopRequireDefault(require("../bleed/Bleed"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 var _excluded = ["href", "children", "newWindow", "selected", "icon", "tabIndex", "onClick"];
 
@@ -138,9 +138,9 @@ var Group = function Group(_ref4) {
       return setCollapsed(!collapsed);
     },
     selectedGroup: selectedGroup
-  }, /*#__PURE__*/_react["default"].createElement(SidenavContent, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(SidenavIcon, {
+  }, /*#__PURE__*/_react["default"].createElement(SidenavContent, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: icon
-  }) : icon, title), collapsed ? collapsedIcon : collapsableIcon) : title && /*#__PURE__*/_react["default"].createElement(SidenavGroupTitle, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(SidenavIcon, {
+  }) : icon, title), collapsed ? collapsedIcon : collapsableIcon) : title && /*#__PURE__*/_react["default"].createElement(SidenavGroupTitle, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: icon
   }) : icon, title), !collapsed && children);
 };
@@ -171,7 +171,7 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref5, ref) {
     ref: ref,
     tabIndex: tabIndex,
     onClick: handleClick
-  }, otherProps), /*#__PURE__*/_react["default"].createElement(SidenavContent, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(SidenavIcon, {
+  }, otherProps), /*#__PURE__*/_react["default"].createElement(SidenavContent, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: icon
   }) : icon, children), newWindow && externalLinkIcon);
 });
@@ -204,7 +204,7 @@ var Divider = _styledComponents["default"].div(_templateObject3 || (_templateObj
 
 var SidenavGroup = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  a {\n    padding: 0.5rem 1.2rem 0.5rem 2.25rem;\n  }\n"])));
 
-var SidenavGroupTitle = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  svg {\n    width: 16px;\n    margin-right: 0.5rem;\n  }\n  box-sizing: border-box;\n  width: 100%;\n\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: 18px;\n\n  display: flex;\n  align-items: center;\n  margin: 0px;\n  padding: 0.5rem 1.2rem;\n"])), function (props) {
+var SidenavGroupTitle = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.5rem 1.2rem;\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: 18px;\n\n  img,\n  svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.theme.groupTitleFontFamily;
 }, function (props) {
   return props.theme.groupTitleFontStyle;
@@ -214,7 +214,7 @@ var SidenavGroupTitle = _styledComponents["default"].span(_templateObject5 || (_
   return props.theme.groupTitleFontSize;
 });
 
-var SidenavGroupTitleButton = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  all: unset;\n  cursor: pointer;\n  justify-content: space-between;\n  box-sizing: border-box;\n  width: 100%;\n\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: 19px;\n\n  display: flex;\n  align-items: center;\n  margin: 0px;\n  padding: 0.5rem 1.2rem;\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  &:hover {\n    ", "\n  }\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n  ", "\n  svg {\n    width: 18px;\n    height: auto;\n  }\n"])), function (props) {
+var SidenavGroupTitleButton = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  all: unset;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 0.5rem 1.2rem;\n\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: 19px;\n\n  cursor: pointer;\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  &:hover {\n    ", "\n  }\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n  ", "\n\n  svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.theme.groupTitleFontFamily;
 }, function (props) {
   return props.theme.groupTitleFontStyle;
@@ -234,7 +234,7 @@ var SidenavGroupTitleButton = _styledComponents["default"].button(_templateObjec
   return props.selectedGroup ? "color: ".concat(props.theme.groupTitleSelectedFontColor, "; background: ").concat(props.theme.groupTitleSelectedBackgroundColor, ";") : "color: ".concat(props.theme.groupTitleFontColor, "; background: transparent;");
 });
 
-var SidenavLink = _styledComponents["default"].a(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  letter-spacing: ", ";\n\n  text-transform: ", ";\n  text-decoration: ", ";\n\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: 19px;\n\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  box-shadow: 0 0 0 2px transparent;\n\n  padding: 0.5rem 1.2rem;\n\n  cursor: pointer;\n  svg {\n    width: 16px;\n    margin-right: 0.5rem;\n  }\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n\n  &:active {\n    color: #ffffff;\n    background: #4d4d4d;\n    outline: 2px solid #0095ff;\n    outline-offset: -2px;\n  }\n"])), function (props) {
+var SidenavLink = _styledComponents["default"].a(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: 0.5rem 1.2rem;\n  box-shadow: 0 0 0 2px transparent;\n  letter-spacing: ", ";\n  text-transform: ", ";\n  text-decoration: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: 19px;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    ", "\n  }\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  &:active {\n    color: #ffffff;\n    background: #4d4d4d;\n    outline: 2px solid #0095ff;\n    outline-offset: -2px;\n  }\n\n  svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.theme.linkFontLetterSpacing;
 }, function (props) {
   return props.theme.linkFontTextTransform;
@@ -256,9 +256,7 @@ var SidenavLink = _styledComponents["default"].a(_templateObject7 || (_templateO
   return props.theme.linkFocusColor;
 });
 
-var SidenavContent = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n\n  svg {\n    width: 16px;\n    margin-right: 0.5rem;\n  }\n"])));
-
-var SidenavIcon = _styledComponents["default"].img(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 16px;\n  margin-right: 0.5rem;\n"])));
+var SidenavContent = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n\n  img,\n  svg {\n    height: 16px;\n    width: 16px;\n  }\n"])));
 
 DxcSidenav.Section = Section;
 DxcSidenav.Group = Group;