@dxc-technology/halstack-react 12.0.0 → 12.0.1

package/HalstackContext.d.ts

@@ -193,13 +193,11 @@ declare const HalstackContext: React.Context<DeepPartial<{
     };
     chip: {
         backgroundColor: string;
-        disabledBackgroundColor: string;
         fontFamily: string;
         fontSize: string;
         fontStyle: string;
         fontWeight: string;
         fontColor: string;
-        disabledFontColor: string;
         borderColor: string;
         borderRadius: string;
         borderThickness: string;
@@ -217,7 +215,6 @@ declare const HalstackContext: React.Context<DeepPartial<{
         focusColor: string;
         focusBorderStyle: string;
         focusBorderThickness: string;
-        focusBorderRadius: string;
     };
     dateInput: {
         pickerBackgroundColor: string;

package/HalstackContext.js

@@ -6,12 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.HalstackProvider = exports.HalstackLanguageContext = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _color = _interopRequireDefault(require("color"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _variables = require("./common/variables");
-var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var HalstackContext = /*#__PURE__*/_react["default"].createContext(null);
@@ -300,11 +297,10 @@ var HalstackProvider = exports.HalstackProvider = function HalstackProvider(_ref
   var parsedLabels = (0, _react.useMemo)(function () {
     return labels ? parseLabels(labels) : _variables.defaultTranslatedComponentLabels;
   }, [labels]);
-  return /*#__PURE__*/_react["default"].createElement(Halstack, null, /*#__PURE__*/_react["default"].createElement(HalstackContext.Provider, {
+  return /*#__PURE__*/_react["default"].createElement(HalstackContext.Provider, {
     value: parsedTheme
   }, /*#__PURE__*/_react["default"].createElement(HalstackLanguageContext.Provider, {
     value: parsedLabels
-  }, children)));
+  }, children));
 };
-var Halstack = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n  @import url(\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1\");\n"])));
 var _default = exports["default"] = HalstackContext;

package/accordion/Accordion.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/accordion/Accordion.accessibility.test.js

@@ -5,7 +5,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Accordion = _interopRequireDefault(require("./Accordion.tsx"));
+var _Accordion = _interopRequireDefault(require("./Accordion"));
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
 var folderIcon = /*#__PURE__*/_react["default"].createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",

package/accordion/Accordion.js

@@ -15,7 +15,6 @@ var _utils = require("../common/utils");
 var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
-var _uuid = require("uuid");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -35,13 +34,11 @@ var DxcAccordion = function DxcAccordion(_ref) {
     margin = _ref.margin,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var _useState = (0, _react.useState)((0, _uuid.v4)()),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    id = _useState2[0];
-  var _useState3 = (0, _react.useState)(defaultIsExpanded !== null && defaultIsExpanded !== void 0 ? defaultIsExpanded : false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    innerIsExpanded = _useState4[0],
-    setInnerIsExpanded = _useState4[1];
+  var id = (0, _react.useId)();
+  var _useState = (0, _react.useState)(defaultIsExpanded !== null && defaultIsExpanded !== void 0 ? defaultIsExpanded : false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerIsExpanded = _useState2[0],
+    setInnerIsExpanded = _useState2[1];
   var colorsTheme = (0, _useTheme["default"])();
   var handleAccordionState = function handleAccordionState() {
     var _isExpanded;

package/accordion/Accordion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/accordion/Accordion.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Accordion = _interopRequireDefault(require("./Accordion.tsx"));
+var _Accordion = _interopRequireDefault(require("./Accordion"));
 describe("Accordion component tests", function () {
   test("Renders with correct aria accessibility attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
@@ -30,7 +30,7 @@ describe("Accordion component tests", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
         label: "Accordion",
         onChange: onChange
-      })),
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
       getByText = _render3.getByText;
     _react2.fireEvent.click(getByText("Accordion"));
     expect(onChange).toHaveBeenCalled();
@@ -41,7 +41,7 @@ describe("Accordion component tests", function () {
         label: "Accordion",
         onChange: onChange,
         isExpanded: true
-      })),
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
       getByText = _render4.getByText,
       getByRole = _render4.getByRole;
     expect(getByRole("button").getAttribute("aria-expanded")).toBe("true");

package/accordion-group/AccordionGroup.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/accordion-group/AccordionGroup.accessibility.test.js

@@ -5,7 +5,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.tsx"));
+var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup"));
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
 var folderIcon = /*#__PURE__*/_react["default"].createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
@@ -28,19 +28,16 @@ describe("Accordion component accessibility tests", function () {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-            defaultIndexActive: 1
+            defaultIndexActive: 1,
+            margin: "small"
           }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
             label: "Accordion1",
             assistiveText: "Assistive Text1",
-            icon: folderIcon,
-            margin: "small",
-            defaultIsExpanded: true
+            icon: folderIcon
           }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
             label: "Accordion2",
             assistiveText: "Assistive Text2",
-            icon: folderIcon,
-            margin: "small",
-            defaultIsExpanded: true
+            icon: folderIcon
           }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))), container = _render.container;
           _context.next = 3;
           return (0, _axeHelper.axe)(container);
@@ -60,19 +57,16 @@ describe("Accordion component accessibility tests", function () {
         case 0:
           _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
             defaultIndexActive: 1,
+            margin: "small",
             disabled: true
           }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
             label: "Accordion1",
             assistiveText: "Assistive Text1",
-            icon: folderIcon,
-            margin: "small",
-            defaultIsExpanded: true
+            icon: folderIcon
           }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
             label: "Accordion2",
             assistiveText: "Assistive Text2",
-            icon: folderIcon,
-            margin: "small",
-            defaultIsExpanded: true
+            icon: folderIcon
           }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))), container = _render2.container;
           _context2.next = 3;
           return (0, _axeHelper.axe)(container);

package/accordion-group/AccordionGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/accordion-group/AccordionGroup.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.tsx"));
+var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup"));
 describe("Accordion component tests", function () {
   test("Uncontrolled accordion group calls correct function on click", function () {
     var onActiveChange = jest.fn();
@@ -11,8 +11,7 @@ describe("Accordion component tests", function () {
         margin: "large",
         onActiveChange: onActiveChange
       }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-        label: "Accordion1",
-        margin: "large"
+        label: "Accordion1"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
         label: "Accordion2"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
@@ -48,8 +47,7 @@ describe("Accordion component tests", function () {
         indexActive: 1,
         onActiveChange: onActiveChange
       }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-        label: "Accordion1",
-        margin: "large"
+        label: "Accordion1"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
         label: "Accordion2"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
@@ -70,8 +68,7 @@ describe("Accordion component tests", function () {
       indexActive: 0,
       onActiveChange: onActiveChange
     }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      margin: "large"
+      label: "Accordion1"
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
       label: "Accordion2"
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2"))));
@@ -85,8 +82,7 @@ describe("Accordion component tests", function () {
         onActiveChange: onActiveChange,
         disabled: true
       }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-        label: "Accordion1",
-        margin: "large"
+        label: "Accordion1"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
         label: "Accordion2"
       }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),

package/action-icon/ActionIcon.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/action-icon/ActionIcon.accessibility.test.js

@@ -5,7 +5,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _ActionIcon = _interopRequireDefault(require("./ActionIcon.tsx"));
+var _ActionIcon = _interopRequireDefault(require("./ActionIcon"));
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   width: "24px",

package/action-icon/ActionIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/action-icon/ActionIcon.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _ActionIcon = _interopRequireDefault(require("./ActionIcon.tsx"));
+var _ActionIcon = _interopRequireDefault(require("./ActionIcon"));
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   width: "24px",
   height: "24px",

package/alert/Alert.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/alert/Alert.accessibility.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Alert = _interopRequireDefault(require("./Alert.tsx"));
+var _Alert = _interopRequireDefault(require("./Alert"));
 describe("Alert component accessibility tests", function () {
   it("Should not have basic accessibility issues for confirm mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container, results;

package/alert/Alert.test.d.ts

@@ -0,0 +1 @@
+export {};

package/alert/Alert.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Alert = _interopRequireDefault(require("./Alert.tsx"));
+var _Alert = _interopRequireDefault(require("./Alert"));
 describe("Alert component tests", function () {
   test("Info alert renders with correct text", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Alert["default"], {

package/badge/Badge.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/badge/Badge.accessibility.test.js

@@ -6,8 +6,8 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Badge = _interopRequireDefault(require("./Badge.tsx"));
-var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+var _Badge = _interopRequireDefault(require("./Badge"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
 var icon = /*#__PURE__*/_react["default"].createElement("svg", {
   width: "24",
   height: "24",

package/badge/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/badge/Badge.test.js

@@ -3,8 +3,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Badge = _interopRequireDefault(require("./Badge.tsx"));
-var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+var _Badge = _interopRequireDefault(require("./Badge"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
 describe("Badge component tests", function () {
   test("Badge renders with correct label when it is less than notification limit", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Badge["default"], {

package/box/Box.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/box/Box.accessibility.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Box = _interopRequireDefault(require("../box/Box.tsx"));
+var _Box = _interopRequireDefault(require("../box/Box"));
 describe("Box component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container, results;

package/box/Box.test.d.ts

@@ -0,0 +1 @@
+export {};

package/box/Box.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Card = _interopRequireDefault(require("../card/Card.tsx"));
+var _Card = _interopRequireDefault(require("../card/Card"));
 describe("Box component tests", function () {
   test("Box renders with correct text", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], null, "test-box")),

package/bulleted-list/BulletedList.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/button/Button.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/button/Button.accessibility.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Button = _interopRequireDefault(require("./Button.tsx"));
+var _Button = _interopRequireDefault(require("./Button"));
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   width: "24px",
   height: "24px",

package/button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/button/Button.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Button = _interopRequireDefault(require("./Button.tsx"));
+var _Button = _interopRequireDefault(require("./Button"));
 describe("Button component tests", function () {
   test("Button renders with correct text", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {

package/card/Card.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/card/Card.accessibility.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Card = _interopRequireDefault(require("./Card.tsx"));
+var _Card = _interopRequireDefault(require("./Card"));
 describe("Card component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container, results;

package/card/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/card/Card.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Card = _interopRequireDefault(require("./Card.tsx"));
+var _Card = _interopRequireDefault(require("./Card"));
 describe("Card component tests", function () {
   test("Card renders with correct content", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], null, "test-card")),

package/checkbox/Checkbox.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox/Checkbox.accessibility.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Checkbox = _interopRequireDefault(require("./Checkbox.tsx"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 describe("Checkbox component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container, results;

package/checkbox/Checkbox.js

@@ -13,7 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
 var _utils = require("../common/utils");
-var _uuid = require("uuid");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
@@ -49,13 +48,11 @@ var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     size = _ref$size === void 0 ? "fitContent" : _ref$size,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var _useState = (0, _react.useState)("label-checkbox-".concat((0, _uuid.v4)())),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    labelId = _useState2[0];
-  var _useState3 = (0, _react.useState)(defaultChecked),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    innerChecked = _useState4[0],
-    setInnerChecked = _useState4[1];
+  var labelId = "label-checkbox-".concat((0, _react.useId)());
+  var _useState = (0, _react.useState)(defaultChecked),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerChecked = _useState2[0],
+    setInnerChecked = _useState2[1];
   var checkboxRef = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();

package/checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox/Checkbox.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Checkbox = _interopRequireDefault(require("./Checkbox.tsx"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 describe("Checkbox component tests", function () {
   test("Checkbox renders with correct aria-labelledby and aria-required", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {

package/chip/Chip.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/chip/Chip.accessibility.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Chip = _interopRequireDefault(require("./Chip.tsx"));
+var _Chip = _interopRequireDefault(require("./Chip"));
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   version: "1.1",
   x: "0px",
@@ -27,6 +27,7 @@ describe("Chip component accessibility tests", function () {
           _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
             margin: "small",
             prefixIcon: iconSVG,
+            onClickPrefix: function onClickPrefix() {},
             suffixIcon: iconSVG,
             label: "Chip"
           })), container = _render.container;
@@ -49,6 +50,7 @@ describe("Chip component accessibility tests", function () {
           _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
             margin: "small",
             prefixIcon: iconSVG,
+            onClickPrefix: function onClickPrefix() {},
             suffixIcon: iconSVG,
             label: "Chip",
             disabled: true

package/chip/Chip.js

@@ -31,7 +31,6 @@ var DxcChip = function DxcChip(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.chip
   }, /*#__PURE__*/_react["default"].createElement(Chip, {
-    disabled: disabled,
     margin: margin
   }, prefixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     role: typeof onClickPrefix === "function" ? "button" : undefined,
@@ -39,22 +38,16 @@ var DxcChip = function DxcChip(_ref) {
     disabled: disabled,
     interactuable: typeof onClickPrefix === "function" && !disabled,
     tabIndex: typeof onClickPrefix === "function" && !disabled ? tabIndex : -1,
-    onClick: function onClick() {
-      return onClickPrefix && !disabled && onClickPrefix();
-    }
+    onClick: onClickPrefix
   }, typeof prefixIcon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     icon: prefixIcon
-  }) : prefixIcon), label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
-    disabled: disabled
-  }, label), suffixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
+  }) : prefixIcon), label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, label), suffixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     role: typeof onClickSuffix === "function" ? "button" : undefined,
     "aria-label": typeof onClickSuffix === "function" ? "Suffix Action" : undefined,
     disabled: disabled,
     interactuable: typeof onClickSuffix === "function" && !disabled,
     tabIndex: typeof onClickSuffix === "function" && !disabled ? tabIndex : -1,
-    onClick: function onClick() {
-      return !disabled && (onClickSuffix === null || onClickSuffix === void 0 ? void 0 : onClickSuffix());
-    }
+    onClick: onClickSuffix
   }, typeof suffixIcon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     icon: suffixIcon
   }) : suffixIcon)));
@@ -62,12 +55,12 @@ var DxcChip = function DxcChip(_ref) {
 var calculateWidth = function calculateWidth(margin) {
   return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
-var Chip = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  min-height: 40px;\n  max-width: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  cursor: ", ";\n"])), function (props) {
+var Chip = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  min-height: 40px;\n  max-width: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return props.theme.iconSpacing;
 }, function (props) {
   return calculateWidth(props.margin);
 }, function (props) {
-  return props.disabled && props.theme.disabledBackgroundColor || props.theme.backgroundColor;
+  return props.theme.backgroundColor;
 }, function (props) {
   return props.theme.borderRadius;
 }, function (props) {
@@ -94,9 +87,6 @@ var Chip = _styledComponents["default"].div(_templateObject || (_templateObject
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled && "not-allowed";
 });
 var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), function (props) {
   return props.theme.fontSize;
@@ -107,13 +97,12 @@ var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_tem
 }, function (props) {
   return props.theme.fontStyle;
 }, function (props) {
-  return props.disabled ? props.theme.disabledFontColor : props.theme.fontColor;
+  return props.theme.fontColor;
 });
-var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  border-radius: 0.25rem;\n  color: ", ";\n  ", "\n\n  ", "\n\n  font-size: ", ";\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
-  return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
-}, function (_ref3) {
-  var interactuable = _ref3.interactuable;
-  return interactuable && "cursor: pointer;";
+var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  border-radius: 0.25rem;\n  color: ", ";\n  cursor: ", ";\n  ", "\n\n  font-size: ", ";\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+  return props.disabled && (props.onClick || props.onClick) ? props.theme.disabledIconColor : props.theme.iconColor;
+}, function (props) {
+  return props.disabled && (props.onClick || props.onClick) ? "not-allowed" : props.interactuable ? "pointer" : "";
 }, function (props) {
   return props.interactuable && "\n      &:hover {\n        color: ".concat(props.theme.hoverIconColor, ";\n      }\n      &:focus,\n      &:focus-visible {\n        outline: ").concat(props.theme.focusBorderThickness, " ").concat(props.theme.focusBorderStyle, " ").concat(props.theme.focusColor, ";\n      }\n      &:active {\n        color: ").concat(props.theme.activeIconColor, ";\n      }\n    ");
 }, function (props) {