@dxc-technology/halstack-react 0.0.0-b2237e2 → 0.0.0-b230d97

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;
@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type OptionGroup = {
     /**
      * Label of the group to be shown in the select's listbox.
@@ -201,9 +201,7 @@ export declare type ListboxProps = {
     optionalItem: Option;
     searchable: boolean;
     handleOptionOnClick: (option: Option) => void;
-    styles: {
-        width: number;
-    };
+    styles: React.CSSProperties;
 };
 /**
  * Reference to the select component.

package/sidenav/Sidenav.js

@@ -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;

package/sidenav/Sidenav.stories.tsx

@@ -3,6 +3,7 @@ import DxcSidenav from "./Sidenav";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { userEvent, within } from "@storybook/testing-library";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Sidenav",
@@ -10,9 +11,26 @@ export default {
 };
 
 const iconSVG = (
-  <svg viewBox="0 0 24 24" fill="currentColor">
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    width="438.536px"
+    height="438.536px"
+    viewBox="0 0 438.536 438.536"
+    fill="currentColor"
+  >
+    <g>
+      <path
+        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
+h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
+C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
+c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
+c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+      />
+    </g>
   </svg>
 );
 
@@ -20,11 +38,17 @@ const TitleComponent = () => {
   return <DxcSidenav.Title>Dxc technology</DxcSidenav.Title>;
 };
 
+const opinionatedTheme = {
+  sidenav: {
+    baseColor: "#f2f2f2",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="Default sidenav" theme="light" level={4} />
-      <DxcSidenav title={<TitleComponent />}>
+      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
         <DxcSidenav.Section>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
@@ -41,12 +65,18 @@ export const Chromatic = () => (
           </DxcSidenav.Group>
         </DxcSidenav.Section>
         <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Section Group" icon={iconSVG}>
+          <DxcSidenav.Group
+            collapsable={true}
+            title="Section Group"
+            icon="https://cdn-icons-png.flaticon.com/512/5039/5039041.png"
+          >
             <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link icon={iconSVG}>Group Link</DxcSidenav.Link>
           </DxcSidenav.Group>
-          <DxcSidenav.Link icon={iconSVG}>Single Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Link icon="https://upload.wikimedia.org/wikipedia/commons/7/73/Flat_tick_icon.svg" newWindow>
+            Single Link
+          </DxcSidenav.Link>
+          <DxcSidenav.Link newWindow>Single Link</DxcSidenav.Link>
           <DxcSidenav.Group collapsable={false} title="Section Group">
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -55,51 +85,76 @@ export const Chromatic = () => (
         </DxcSidenav.Section>
       </DxcSidenav>
     </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused options sidenav" theme="light" level={4} />
+      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
+        <DxcSidenav.Section>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
+            vitae lacinia libero.
+          </p>
+        </DxcSidenav.Section>
+        <DxcSidenav.Section>
+          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+            <DxcSidenav.Link icon="https://cdn-icons-png.flaticon.com/512/5039/5039041.png">Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
+        <DxcSidenav.Section>
+          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+            <DxcSidenav.Link selected icon={iconSVG}>
+              Group Link
+            </DxcSidenav.Link>
+          </DxcSidenav.Group>
+          <DxcSidenav.Group collapsable={false} title="Section Group">
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
+      </DxcSidenav>
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSidenav title={<TitleComponent />}>
+          <DxcSidenav.Section>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
+              vitae lacinia libero.
+            </p>
+          </DxcSidenav.Section>
+          <DxcSidenav.Section>
+            <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+            <DxcSidenav.Group collapsable={false} title="Single Group" icon={iconSVG}>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            </DxcSidenav.Group>
+          </DxcSidenav.Section>
+          <DxcSidenav.Section>
+            <DxcSidenav.Group collapsable={true} title="Section Group" icon={iconSVG}>
+              <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link icon={iconSVG}>Group Link</DxcSidenav.Link>
+            </DxcSidenav.Group>
+            <DxcSidenav.Link icon={iconSVG}>Single Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+            <DxcSidenav.Group collapsable={false} title="Section Group">
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            </DxcSidenav.Group>
+          </DxcSidenav.Section>
+        </DxcSidenav>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 
-export const FocusedSidenav = () => (
-  <ExampleContainer pseudoState="pseudo-focus">
-    <Title title="Default sidenav" theme="light" level={4} />
-    <DxcSidenav title={<TitleComponent />}>
-      <DxcSidenav.Section>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse vitae
-          lacinia libero.
-        </p>
-      </DxcSidenav.Section>
-      <DxcSidenav.Section>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Group collapsable={true} title="Collapsable Group">
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-      </DxcSidenav.Section>
-      <DxcSidenav.Section>
-        <DxcSidenav.Group collapsable={true} title="Collapsable Group">
-          <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Group collapsable={false} title="Section Group">
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-      </DxcSidenav.Section>
-    </DxcSidenav>
-  </ExampleContainer>
-);
-
 const CollapsedGroup = () => (
   <>
     <ExampleContainer>
       <Title title="Default sidenav" theme="light" level={4} />
-      <DxcSidenav title={<TitleComponent />}>
+      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
         <DxcSidenav.Section>
           <DxcSidenav.Group collapsable={true} title="Collapsable Group" icon={iconSVG}>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -127,7 +182,7 @@ const CollapsedGroup = () => (
 const HoverSidenav = () => (
   <ExampleContainer pseudoState="pseudo-hover">
     <Title title="Default sidenav" theme="light" level={4} />
-    <DxcSidenav title={<TitleComponent />}>
+    <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
       <DxcSidenav.Section>
         <DxcSidenav.Link>Single Link</DxcSidenav.Link>
         <DxcSidenav.Link>Single Link</DxcSidenav.Link>
@@ -161,6 +216,44 @@ const HoverSidenav = () => (
   </ExampleContainer>
 );
 
+const HoverSidenavOpinionated = () => (
+  <ExampleContainer pseudoState="pseudo-hover">
+    <Title title="Default sidenav" theme="light" level={4} />
+    <HalstackProvider theme={opinionatedTheme}>
+      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
+        <DxcSidenav.Section>
+          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
+        <DxcSidenav.Section>
+          <DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
+            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
+      </DxcSidenav>
+    </HalstackProvider>
+  </ExampleContainer>
+);
+
 export const CollapseGroup = CollapsedGroup.bind({});
 CollapseGroup.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
@@ -178,3 +271,12 @@ CollapseHoverGroup.play = async ({ canvasElement }) => {
     userEvent.click(group);
   });
 };
+
+export const CollapseHoverGroupOpinionated = HoverSidenavOpinionated.bind({});
+CollapseHoverGroupOpinionated.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const collapsableGroups = canvas.getAllByText("Collapsable Group");
+  collapsableGroups.forEach((group) => {
+    userEvent.click(group);
+  });
+};

package/sidenav/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type SidenavPropsType = {
     /**
      * The area inside the sidenav. This area can be used to render the content inside the sidenav.

package/slider/Slider.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import SliderPropsType from "./types";
-declare const DxcSlider: ({ label, name, defaultValue, value, helperText, minValue, maxValue, step, showLimitsValues, showInput, disabled, marks, onChange, onDragEnd, labelFormatCallback, margin, size, }: SliderPropsType) => JSX.Element;
+declare const DxcSlider: React.ForwardRefExoticComponent<SliderPropsType & React.RefAttributes<HTMLDivElement>>;
 export default DxcSlider;