@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370

package/sidenav/Sidenav.stories.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import DxcSidenav from "./Sidenav";
+import DxcSelect from "../select/Select";
+import DxcInset from "../inset/Inset";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { userEvent, within } from "@storybook/testing-library";
@@ -150,13 +152,13 @@ export const Chromatic = () => (
   </>
 );
 
-const CollapsedGroup = () => (
+const CollapsedGroupSidenav = () => (
   <>
     <ExampleContainer>
-      <Title title="Default sidenav" theme="light" level={4} />
+      <Title title="Collapsed group with a selected link" theme="light" level={4} />
       <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
         <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Collapsable Group" icon={iconSVG}>
+          <DxcSidenav.Group collapsable={true} title="Collapsed Group" icon={iconSVG}>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -164,11 +166,11 @@ const CollapsedGroup = () => (
           </DxcSidenav.Group>
         </DxcSidenav.Section>
         <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
-            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Group collapsable={true} title="Collapsed Group">
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
           </DxcSidenav.Group>
-          <DxcSidenav.Group collapsable={false} title="Section Group">
+          <DxcSidenav.Group collapsable={true} title="Section Group">
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
             <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -179,14 +181,14 @@ const CollapsedGroup = () => (
   </>
 );
 
-const HoverSidenav = () => (
+const HoveredGroupSidenav = () => (
   <ExampleContainer pseudoState="pseudo-hover">
-    <Title title="Default sidenav" theme="light" level={4} />
+    <Title title="Hover state for groups (selected and not)" theme="light" level={4} />
     <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.Group collapsable={true} title="Collapsed Group">
           <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -200,13 +202,12 @@ const HoverSidenav = () => (
         </DxcSidenav.Group>
         <DxcSidenav.Link>Single Link</DxcSidenav.Link>
         <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+        <DxcSidenav.Group collapsable={true} title="Collapsed 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.Group collapsable={true} title="Collapsed Group">
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
           <DxcSidenav.Link>Group Link</DxcSidenav.Link>
@@ -216,67 +217,66 @@ 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>
+const ActiveGroupSidenav = () => (
+  <ExampleContainer pseudoState="pseudo-active">
+    <Title title="Active state for groups (selected and not)" theme="light" level={4} />
+    <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
+      <DxcSidenav.Section>
+        <DxcInset space="1rem">
+          <DxcSelect
+            defaultValue="1"
+            options={[
+              { label: "v1.0.0", value: "1" },
+              { label: "v2.0.0", value: "2" },
+              { label: "v3.0.0", value: "3" },
+              { label: "v4.0.0", value: "4" },
+            ]}
+            size="fillParent"
+          />
+        </DxcInset>
+      </DxcSidenav.Section>
+      <DxcSidenav.Section>
+        <DxcSidenav.Group collapsable={true} title="Collapsed 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.Section>
+    </DxcSidenav>
   </ExampleContainer>
 );
 
-export const CollapseGroup = CollapsedGroup.bind({});
-CollapseGroup.play = async ({ canvasElement }) => {
+export const CollapsableGroup = CollapsedGroupSidenav.bind({});
+CollapsableGroup.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const collapsableGroups = canvas.getAllByText("Collapsable Group");
+  const collapsableGroups = canvas.getAllByText("Collapsed Group");
   collapsableGroups.forEach((group) => {
     userEvent.click(group);
   });
 };
 
-export const CollapseHoverGroup = HoverSidenav.bind({});
-CollapseHoverGroup.play = async ({ canvasElement }) => {
+export const CollapsedHoverGroup = HoveredGroupSidenav.bind({});
+CollapsedHoverGroup.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const collapsableGroups = canvas.getAllByText("Collapsable Group");
+  const collapsableGroups = canvas.getAllByText("Collapsed Group");
   collapsableGroups.forEach((group) => {
     userEvent.click(group);
   });
+  await new Promise((resolve) => setTimeout(resolve, 1000));
 };
 
-export const CollapseHoverGroupOpinionated = HoverSidenavOpinionated.bind({});
-CollapseHoverGroupOpinionated.play = async ({ canvasElement }) => {
+export const CollapsedActiveGroup = ActiveGroupSidenav.bind({});
+CollapsedActiveGroup.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const collapsableGroups = canvas.getAllByText("Collapsable Group");
-  collapsableGroups.forEach((group) => {
-    userEvent.click(group);
-  });
-};
+  const collapsableGroups = canvas.getAllByText("Collapsed Group");
+  userEvent.click(collapsableGroups[0]);
+};

package/sidenav/Sidenav.test.js

@@ -1,15 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _react = _interopRequireDefault(require("react"));
+
 var _react2 = require("@testing-library/react");
+
 var _Sidenav = _interopRequireDefault(require("./Sidenav.tsx"));
+
 describe("Sidenav component tests", function () {
   test("Sidenav renders anchors and Section correctly", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Section, null, /*#__PURE__*/_react["default"].createElement("p", null, "nav-content-test"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
-        href: "#"
-      }, "Link")))),
-      getByText = _render.getByText;
+      href: "#"
+    }, "Link")))),
+        getByText = _render.getByText;
+
     expect(getByText("nav-content-test")).toBeTruthy();
     var link = getByText("Link");
     expect(link.closest("a").getAttribute("href")).toBe("#");
@@ -31,7 +36,9 @@ describe("Sidenav component tests", function () {
     }, "Lorem ipsum")))));
     expect(sidenav.getByText("Collapsable")).toBeTruthy();
     expect(sidenav.getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
+
     _react2.fireEvent.click(sidenav.getByText("Collapsable"));
+
     expect(sidenav.getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
   });
 });

package/sidenav/types.d.ts

@@ -1,50 +1,47 @@
 /// <reference types="react" />
-type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type SidenavPropsType = {
-    /**
-     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
-     */
-    children: React.ReactNode;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+declare type SidenavPropsType = {
     /**
      * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
      */
     title?: React.ReactNode;
-};
-export type SidenavTitlePropsType = {
     /**
-     * The area inside the sidenav title. This area can be used to render custom content.
+     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
      */
     children: React.ReactNode;
 };
-export type SidenavSectionPropsType = {
+export declare type SidenavTitlePropsType = {
     /**
-     * The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
+     * The area inside the sidenav title. This area can be used to render custom content.
      */
     children: React.ReactNode;
 };
-export type SidenavGroupPropsType = {
+export declare type SidenavSectionPropsType = {
     /**
-     * The area inside the sidenav group. This area can be used to render sidenav links.
+     * The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
      */
     children: React.ReactNode;
+};
+export declare type SidenavGroupPropsType = {
     /**
      * The title of the sidenav group.
      */
     title?: string;
     /**
-     * If true the sidenav group title will be considered a button and the group will be collapsable.
+     * If true, the sidenav group will be a button that will allow you to collapse the links contained within it.
+     * In addition, if it's collapsed and contains the currently selected link, the group title will also be marked as selected.
      */
     collapsable?: boolean;
     /**
      * The icon to be displayed next to the title of the group.
      */
     icon?: string | SVG;
-};
-export type SidenavLinkPropsType = {
     /**
-     * Value of the tabindex.
+     * The area inside the sidenav group. This area can be used to render sidenav links.
      */
-    tabIndex?: number;
+    children: React.ReactNode;
+};
+export declare type SidenavLinkPropsType = {
     /**
      * Page to be opened when the user clicks on the link.
      */
@@ -58,16 +55,22 @@ export type SidenavLinkPropsType = {
      */
     icon?: string | SVG;
     /**
-     * If true, the link will be marked as selected. This can also affect the group if it is closed to indicate that one of its links is selected.
+     * If true, the link will be marked as selected. Moreover, in that same case,
+     * if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
+     * the group title will appear as selected too.
      */
     selected?: boolean;
     /**
-     * The area inside the sidenav link.
+     * This function will be called when the user clicks the link and the event will be passed to this function.
      */
-    children: string;
+    onClick?: ($event: React.MouseEvent<HTMLAnchorElement>) => void;
     /**
-     * This function will be called when the user clicks the link.
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+    /**
+     * The area inside the sidenav link.
      */
-    onClick?: ($event: any) => void;
+    children: React.ReactNode;
 };
 export default SidenavPropsType;

package/slider/Slider.js

@@ -1,67 +1,89 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
+
 var _variables = require("../common/variables");
-var _utils = require("../common/utils.js");
+
+var _utils = require("../common/utils");
+
 var _useTheme = _interopRequireDefault(require("../useTheme"));
+
 var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
+
 var _uuid = require("uuid");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref$label = _ref.label,
-    label = _ref$label === void 0 ? "" : _ref$label,
-    _ref$name = _ref.name,
-    name = _ref$name === void 0 ? "" : _ref$name,
-    defaultValue = _ref.defaultValue,
-    value = _ref.value,
-    _ref$helperText = _ref.helperText,
-    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
-    _ref$minValue = _ref.minValue,
-    minValue = _ref$minValue === void 0 ? 0 : _ref$minValue,
-    _ref$maxValue = _ref.maxValue,
-    maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
-    _ref$step = _ref.step,
-    step = _ref$step === void 0 ? 1 : _ref$step,
-    _ref$showLimitsValues = _ref.showLimitsValues,
-    showLimitsValues = _ref$showLimitsValues === void 0 ? false : _ref$showLimitsValues,
-    _ref$showInput = _ref.showInput,
-    showInput = _ref$showInput === void 0 ? false : _ref$showInput,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$marks = _ref.marks,
-    marks = _ref$marks === void 0 ? false : _ref$marks,
-    onChange = _ref.onChange,
-    onDragEnd = _ref.onDragEnd,
-    labelFormatCallback = _ref.labelFormatCallback,
-    margin = _ref.margin,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "fillParent" : _ref$size;
+      label = _ref$label === void 0 ? "" : _ref$label,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? "" : _ref$name,
+      defaultValue = _ref.defaultValue,
+      value = _ref.value,
+      _ref$helperText = _ref.helperText,
+      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      _ref$minValue = _ref.minValue,
+      minValue = _ref$minValue === void 0 ? 0 : _ref$minValue,
+      _ref$maxValue = _ref.maxValue,
+      maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
+      _ref$showLimitsValues = _ref.showLimitsValues,
+      showLimitsValues = _ref$showLimitsValues === void 0 ? false : _ref$showLimitsValues,
+      _ref$showInput = _ref.showInput,
+      showInput = _ref$showInput === void 0 ? false : _ref$showInput,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$marks = _ref.marks,
+      marks = _ref$marks === void 0 ? false : _ref$marks,
+      onChange = _ref.onChange,
+      onDragEnd = _ref.onDragEnd,
+      labelFormatCallback = _ref.labelFormatCallback,
+      margin = _ref.margin,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "fillParent" : _ref$size;
+
   var _useState = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    innerValue = _useState2[0],
-    setInnerValue = _useState2[1];
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      innerValue = _useState2[0],
+      setInnerValue = _useState2[1];
+
   var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    dragging = _useState4[0],
-    setDragging = _useState4[1];
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      dragging = _useState4[0],
+      setDragging = _useState4[1];
+
   var colorsTheme = (0, _useTheme["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+
   var _useState5 = (0, _react.useState)("label-".concat((0, _uuid.v4)())),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
-    labelId = _useState6[0];
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
+      labelId = _useState6[0];
+
   var minLabel = (0, _react.useMemo)(function () {
     return labelFormatCallback ? labelFormatCallback(minValue) : minValue;
   }, [labelFormatCallback, minValue]);
@@ -73,6 +95,7 @@ var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     var numberOfMarks = Math.floor(maxValue / step - minValue / step);
     var index = 0;
     var range = maxValue - minValue;
+
     if (marks) {
       while (index <= numberOfMarks) {
         ticks.push( /*#__PURE__*/_react["default"].createElement(TickMark, {
@@ -83,37 +106,45 @@ var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
         }));
         index++;
       }
+
       return ticks;
     } else {
       return null;
     }
   }, [minValue, maxValue, step, value, innerValue]);
+
   var handleSliderChange = function handleSliderChange(event) {
     var valueToCheck = event.target.value;
     (valueToCheck !== value || valueToCheck !== innerValue) && setInnerValue(valueToCheck);
     onChange === null || onChange === void 0 ? void 0 : onChange(valueToCheck);
   };
+
   var handleSliderDragging = function handleSliderDragging() {
     setDragging(true);
   };
+
   var handleSliderOnChangeCommited = function handleSliderOnChangeCommited(event) {
     if (dragging) {
       setDragging(false);
       onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event.target.value);
     }
   };
+
   var handlerInputChange = function handlerInputChange(event) {
     var intValue = parseInt(event.value, 10);
+
     if (value == null) {
       if (!Number.isNaN(intValue)) setInnerValue(intValue > maxValue ? maxValue : intValue);
     }
+
     if (!Number.isNaN(intValue)) {
       onChange === null || onChange === void 0 ? void 0 : onChange(intValue > maxValue ? maxValue : intValue);
     }
   };
+
   var isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme["slider"]
+    theme: colorsTheme.slider
   }, /*#__PURE__*/_react["default"].createElement(Container, {
     margin: margin,
     size: size,
@@ -135,7 +166,6 @@ var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     min: minValue,
     max: maxValue,
     step: step,
-    marks: marks,
     disabled: disabled,
     "aria-labelledby": labelId,
     "aria-orientation": "horizontal",
@@ -160,20 +190,25 @@ var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     size: "fillParent"
   })))));
 });
+
 var sizes = {
   medium: "360px",
   large: "480px",
   fillParent: "100%"
 };
+
 var calculateWidth = function calculateWidth(margin, size) {
   return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
 };
+
 var getChromeStyles = function getChromeStyles() {
   return "\n  width: 100%;\n  margin-right: 4px;";
 };
+
 var getFireFoxStyles = function getFireFoxStyles() {
   return "\n  width: calc(100% - 16px);\n  margin-right: 3px;";
 };
+
 var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  width: ", ";\n"])), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
@@ -187,6 +222,7 @@ var Container = _styledComponents["default"].div(_templateObject || (_templateOb
 }, function (props) {
   return calculateWidth(props.margin, props.size);
 });
+
 var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
@@ -200,6 +236,7 @@ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObj
 }, function (props) {
   return props.theme.labelLineHeight;
 });
+
 var HelperText = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
 }, function (props) {
@@ -213,6 +250,7 @@ var HelperText = _styledComponents["default"].span(_templateObject3 || (_templat
 }, function (props) {
   return props.theme.helperTextLineHeight;
 });
+
 var SliderInput = _styledComponents["default"].input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  min-width: 240px;\n  height: ", ";\n  display: inline-block;\n  vertical-align: middle;\n  -webkit-appearance: none;\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  background-size: ", ";\n  border-radius: 5px;\n  cursor: ", ";\n  &::-webkit-slider-runnable-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n    margin: 0px -8px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    border: none;\n    height: ", ";\n    width: ", ";\n    border-radius: 25px;\n    background: ", ";\n    &:active {\n      ", "\n    }\n    &:hover {\n      ", "\n    }\n  }\n  &::-moz-range-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n  }\n  &::-moz-range-thumb {\n    -webkit-appearance: none;\n    border: none;\n    height: ", ";\n    width: ", ";\n    border-radius: 25px;\n    background: ", ";\n    &:active {\n      background: ", ";\n      transform: scale(1.16667);\n    }\n    &:hover {\n      ", "\n    }\n  }\n  &:focus {\n    outline: none;\n    &::-webkit-slider-thumb {\n      outline: ", "\n        auto 1px;\n      outline-offset: 2px;\n    }\n    &::-moz-range-thumb {\n      outline: ", "\n        auto 1px;\n      outline-offset: 2px;\n    }\n  }\n"])), function (props) {
   return props.theme.trackLineThickness;
 }, function (props) {
@@ -254,7 +292,9 @@ var SliderInput = _styledComponents["default"].input(_templateObject4 || (_templ
 }, function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledFocusColorOnDark : props.theme.disabledFocusColor : props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
 });
+
 var SliderContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: 48px;\n  align-items: center;\n"])));
+
 var LimitLabelContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  white-space: nowrap;\n"])), function (props) {
   return props.disabled ? props.theme.disabledLimitValuesFontColor : props.backgroundType === "dark" ? props.theme.limitValuesFontColorOnDark : props.theme.limitValuesFontColor;
 }, function (props) {
@@ -268,16 +308,20 @@ var LimitLabelContainer = _styledComponents["default"].span(_templateObject6 ||
 }, function (props) {
   return props.theme.limitValuesFontLetterSpacing;
 });
+
 var MinLabelContainer = (0, _styledComponents["default"])(LimitLabelContainer)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: ", ";\n"])), function (props) {
   return props.theme.floorLabelMarginRight;
 });
 var MaxLabelContainer = (0, _styledComponents["default"])(LimitLabelContainer)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n"])), function (props) {
   return props.step === 1 ? props.theme.ceilLabelMarginLeft : "1.25rem";
 });
+
 var SliderInputContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  width: 100%;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: -2px;\n  padding-top: 1px;\n  z-index: 0;\n"])));
+
 var MarksContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  position: absolute;\n  pointer-events: none;\n  height: 100%;\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.isFirefox ? getFireFoxStyles() : getChromeStyles();
 });
+
 var TickMark = _styledComponents["default"].span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  background: ", ";\n  height: ", ";\n  width: ", ";\n  border-radius: 18px;\n  left: ", ";\n  z-index: ", ";\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledTickBackgroundColorOnDark : props.theme.disabledTickBackgroundColor : props.backgroundType === "dark" ? props.theme.tickBackgroundColorOnDark : props.theme.tickBackgroundColor;
 }, function (props) {
@@ -289,8 +333,10 @@ var TickMark = _styledComponents["default"].span(_templateObject11 || (_template
 }, function (props) {
   return "".concat(props.stepPosition <= props.stepValue ? "-1" : "0");
 });
+
 var StyledTextInput = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n  max-width: 70px;\n"])), function (props) {
   return props.theme.inputMarginLeft;
 });
+
 var _default = DxcSlider;
 exports["default"] = _default;