@dxc-technology/halstack-react 0.0.0-8aa8e6b → 0.0.0-8c10296

package/textarea/types.d.ts

@@ -122,7 +122,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
-     * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
+     * Size of the component.
      */
     size?: "small" | "medium" | "large" | "fillParent";
     /**

package/useTranslatedLabels.d.ts

@@ -0,0 +1,2 @@
+declare const useTranslatedLabels: () => any;
+export default useTranslatedLabels;

package/useTranslatedLabels.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _variables = require("./common/variables");
+
+var _HalstackContext = require("./HalstackContext");
+
+var useTranslatedLabels = function useTranslatedLabels() {
+  var labels = (0, _react.useContext)(_HalstackContext.HalstackLanguageContext);
+  return labels || _variables.defaultTranslatedComponentLabels;
+};
+
+var _default = useTranslatedLabels;
+exports["default"] = _default;

package/wizard/Wizard.js

@@ -147,9 +147,11 @@ var DxcWizard = function DxcWizard(_ref) {
       disabled: step.disabled,
       current: i === renderedCurrent
     }, i + 1)), step.valid !== undefined && (step.valid ? /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, icons.validIcon) : /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, icons.invalidIcon))), (step.label || step.description) && /*#__PURE__*/_react["default"].createElement(InfoContainer, null, step.label && /*#__PURE__*/_react["default"].createElement(Label, {
+      current: i === renderedCurrent,
       disabled: step.disabled,
       visited: i <= innerCurrent
     }, step.label), step.description && /*#__PURE__*/_react["default"].createElement(Description, {
+      current: i === renderedCurrent,
       disabled: step.disabled,
       visited: i <= innerCurrent
     }, step.description))), i === steps.length - 1 ? "" : /*#__PURE__*/_react["default"].createElement(StepSeparator, {
@@ -200,40 +202,40 @@ var StepHeader = _styledComponents["default"].div(_templateObject4 || (_template
   return props.validityIcon && "padding-bottom: 4px;";
 });
 
-var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n\n  ", "\n  ", ";\n\n  border-radius: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
-  return props.disabled ? props.theme.disabledCircleWidth : props.current ? props.theme.selectedCircleWidth : props.theme.circleWidth;
+var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n\n  ", "\n  ", ";\n\n  border-radius: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (props) {
+  return props.disabled ? props.theme.disabledStepWidth : props.current ? props.theme.selectedStepWidth : props.theme.stepWidth;
 }, function (props) {
-  return props.disabled ? props.theme.disabledCircleHeight : props.current ? props.theme.selectedCircleHeight : props.theme.circleHeight;
+  return props.disabled ? props.theme.disabledStepHeight : props.current ? props.theme.selectedStepHeight : props.theme.stepHeight;
 }, function (props) {
-  return "\n    ".concat(!props.current && !props.disabled ? "border: ".concat(props.theme.circleBorderThickness, " ").concat(props.theme.circleBorderStyle, " ").concat(props.theme.circleBorderColor, ";") : props.current && !props.disabled ? "border: ".concat(props.theme.selectedCircleBorderThickness, " ").concat(props.theme.selectedCircleBorderStyle, " ").concat(props.theme.selectedCircleBorderColor, ";") : props.disabled ? "border: ".concat(props.theme.disabledCircleBorderThickness, " ").concat(props.theme.disabledCircleBorderStyle, " ").concat(props.theme.disabledCircleBorderColor, ";") : "", "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledBackgroundColor) : props.current ? "".concat(props.theme.stepContainerSelectedBackgroundColor) : "".concat(props.theme.stepContainerBackgroundColor), ";\n  ");
+  return "\n    ".concat(props.disabled ? "border: ".concat(props.theme.disabledStepBorderThickness, " ").concat(props.theme.disabledStepBorderStyle, " ").concat(props.theme.disabledStepBorderColor, ";") : props.current ? "border: ".concat(props.theme.selectedStepBorderThickness, " ").concat(props.theme.selectedStepBorderStyle, " ").concat(props.theme.selectedStepBorderColor, ";") : props.visited ? "border: ".concat(props.theme.stepBorderThickness, " ").concat(props.theme.stepBorderStyle, " ").concat(props.theme.visitedStepBorderColor, ";") : "border: ".concat(props.theme.stepBorderThickness, " ").concat(props.theme.stepBorderStyle, " ").concat(props.theme.unvisitedStepBorderColor, ";"), "\n    background: ").concat(props.disabled ? "".concat(props.theme.disabledStepBackgroundColor) : props.current ? "".concat(props.theme.selectedStepBackgroundColor) : !props.visited ? "".concat(props.theme.unvisitedStepBackgroundColor) : "".concat(props.theme.visitedStepBackgroundColor), ";\n  ");
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledStepFontColor, ";") : "color: ".concat(props.current ? props.theme.selectedStepFontColor : !props.visited ? props.theme.unvisitedStepFontColor : props.theme.visitedStepFontColor, ";");
 }, function (props) {
-  return !props.current && !props.disabled ? props.theme.circleBorderRadius : props.current ? props.theme.selectedCircleBorderRadius : props.disabled ? props.theme.disabledCircleBorderRadius : "";
+  return !props.current && !props.disabled ? props.theme.stepBorderRadius : props.current ? props.theme.selectedStepBorderRadius : props.disabled ? props.theme.disabledStepBorderRadius : "";
 });
 
 var Icon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n"])), function (props) {
-  return props.theme.stepContainerIconSize;
+  return props.theme.stepIconSize;
 }, function (props) {
-  return props.theme.stepContainerIconSize;
+  return props.theme.stepIconSize;
 });
 
 var StepIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
-  return props.theme.stepContainerIconSize;
+  return props.theme.stepIconSize;
 }, function (props) {
-  return props.theme.stepContainerIconSize;
+  return props.theme.stepIconSize;
 });
 
 var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  opacity: 1;\n  margin: 0px 0px 0px 1px;\n"])), function (props) {
-  return props.theme.stepContainerFontSize;
+  return props.theme.stepFontSize;
 }, function (props) {
-  return props.theme.stepContainerFontFamily;
+  return props.theme.stepFontFamily;
 }, function (props) {
-  return props.theme.stepContainerFontStyle;
+  return props.theme.stepFontStyle;
 }, function (props) {
-  return props.theme.stepContainerFontWeight;
+  return props.theme.stepFontWeight;
 }, function (props) {
-  return props.theme.stepContainerLetterSpacing;
+  return props.theme.stepFontTracking;
 });
 
 var ValidityIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 18px;\n  height: 18px;\n  position: absolute;\n  top: 22.5px;\n  left: 22.5px;\n"])));
@@ -251,29 +253,29 @@ var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject
 }, function (props) {
   return props.theme.labelFontWeight;
 }, function (props) {
-  return props.theme.labelLetterSpacing;
+  return props.theme.labelFontTracking;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedLabelFontColor : props.theme.labelFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledLabelFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedLabelFontColor : props.current ? props.theme.selectedLabelFontColor : props.theme.visitedLabelFontColor, ";");
 }, function (props) {
   return props.theme.labelFontTextTransform;
 });
 
 var Description = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  ", ";\n  margin: 0;\n"])), function (props) {
-  return props.theme.descriptionTextAlign;
+  return props.theme.helperTextTextAlign;
 }, function (props) {
-  return props.theme.descriptionFontFamily;
+  return props.theme.helperTextFontFamily;
 }, function (props) {
-  return props.theme.descriptionFontSize;
+  return props.theme.helperTextFontSize;
 }, function (props) {
-  return props.theme.descriptionFontStyle;
+  return props.theme.helperTextFontStyle;
 }, function (props) {
-  return props.theme.descriptionFontWeight;
+  return props.theme.helperTextFontWeight;
 }, function (props) {
-  return props.theme.descriptionLetterSpacing;
+  return props.theme.helperTextFontTracking;
 }, function (props) {
-  return props.theme.descriptionFontTextTransform;
+  return props.theme.helperTextFontTextTransform;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedDescriptionFontColor : props.theme.descriptionFontColor, ";");
+  return props.disabled ? "color: ".concat(props.theme.disabledHelperTextFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedHelperTextFontColor : props.current ? props.theme.selectedHelperTextFontColor : props.theme.visitedHelperTextFontColor, ";");
 });
 
 var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", "\n  border: ", ";\n  opacity: 1;\n  flex-grow: 1;\n"])), function (props) {

package/quick-nav-container/HeadingLink.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare type HeadingLinkProps = {
-    children: string;
-    level?: 1 | 2 | 3 | 4 | 5;
-    as?: "h1" | "h2" | "h3" | "h4" | "h5";
-};
-declare function HeadingLink({ children, level, as }: HeadingLinkProps): JSX.Element;
-export default HeadingLink;

package/quick-nav-container/HeadingLink.js

@@ -1,58 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _slugify = _interopRequireDefault(require("slugify"));
-
-var _Heading = _interopRequireDefault(require("../heading/Heading"));
-
-var _templateObject, _templateObject2;
-
-function HeadingLink(_ref) {
-  var children = _ref.children,
-      level = _ref.level,
-      as = _ref.as;
-  var elementId = (0, _slugify["default"])(children, {
-    lower: true
-  });
-  return /*#__PURE__*/_react["default"].createElement(HeadingLinkContainer, {
-    id: elementId
-  }, /*#__PURE__*/_react["default"].createElement(HeadingAnchor, {
-    href: "#".concat(elementId)
-  }, linkIcon), /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-    weight: "bold",
-    text: children,
-    level: level,
-    as: as
-  }));
-}
-
-var linkIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  "aria-hidden": "true",
-  role: "img",
-  viewBox: "0 0 16 16",
-  width: "16",
-  height: "16",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  fillRule: "evenodd",
-  d: "M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"
-}));
-
-var HeadingLinkContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  scroll-margin-top: 64px;\n  &:hover svg {\n    opacity: 0.5;\n  }\n"])));
-
-var HeadingAnchor = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: inherit;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  padding: 8px;\n  margin-left: -32px;\n  & svg {\n    width: 16px;\n    height: 16px;\n    opacity: 0;\n  }\n  &:focus {\n    outline-color: #0095ff;\n    outline-offset: -0.25rem;\n    svg {\n      opacity: 0.5;\n    }\n  }\n"])));
-
-var _default = HeadingLink;
-exports["default"] = _default;

package/quick-nav-container/QuickNavContainer.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import QuickNavContainerTypes from "./types";
-declare const DxcQuickNavContainer: ({ title, sections, startHeadingLevel }: QuickNavContainerTypes) => JSX.Element;
-export default DxcQuickNavContainer;

package/quick-nav-container/QuickNavContainer.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _QuickNav = _interopRequireDefault(require("../quick-nav/QuickNav"));
-
-var _Stack = _interopRequireDefault(require("../stack/Stack"));
-
-var _Section = _interopRequireDefault(require("./Section"));
-
-var _templateObject, _templateObject2, _templateObject3;
-
-var DxcQuickNavContainer = function DxcQuickNavContainer(_ref) {
-  var title = _ref.title,
-      sections = _ref.sections,
-      _ref$startHeadingLeve = _ref.startHeadingLevel,
-      startHeadingLevel = _ref$startHeadingLeve === void 0 ? 1 : _ref$startHeadingLeve;
-
-  var getSubSectionsLinks = function getSubSectionsLinks(sections) {
-    var linksList = [];
-    sections.map(function (section) {
-      if (section.subSections) {
-        linksList.push({
-          label: section.title,
-          links: getSubSectionsLinks(section.subSections)
-        });
-      } else {
-        linksList.push({
-          label: section.title
-        });
-      }
-    });
-    return linksList;
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: "xlarge"
-  }, sections.map(function (section) {
-    return /*#__PURE__*/_react["default"].createElement(_Section["default"], {
-      title: section.title,
-      subSections: section.subSections,
-      level: startHeadingLevel,
-      key: "section-".concat(section.title)
-    }, section.content);
-  }))), /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_QuickNav["default"], {
-    title: title,
-    links: getSubSectionsLinks(sections)
-  })));
-};
-
-var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n"])));
-
-var ContentContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
-
-var QuickNavContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: calc(100vh - 150px);\n  position: sticky;\n  width: 300px;\n"])));
-
-var _default = DxcQuickNavContainer;
-exports["default"] = _default;

package/quick-nav-container/Section.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-declare type SectionType = {
-    title: string;
-    level?: 1 | 2 | 3 | 4 | 5;
-    subSections?: SectionType[];
-    children?: React.ReactNode;
-};
-declare const Section: ({ title, subSections, level, children }: SectionType) => JSX.Element;
-export default Section;

package/quick-nav-container/Section.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Stack = _interopRequireDefault(require("../stack/Stack"));
-
-var _HeadingLink = _interopRequireDefault(require("./HeadingLink"));
-
-// @ts-nocheck
-var Section = function Section(_ref) {
-  var title = _ref.title,
-      subSections = _ref.subSections,
-      level = _ref.level,
-      children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    gutter: level === 1 ? "xlarge" : level === 2 ? "large" : "medium"
-  }, /*#__PURE__*/_react["default"].createElement(_HeadingLink["default"], {
-    level: level
-  }, title), children, subSections === null || subSections === void 0 ? void 0 : subSections.map(function (subSection) {
-    return /*#__PURE__*/_react["default"].createElement(Section, {
-      key: "subSection-".concat(subSection.title),
-      title: subSection.title,
-      subSections: subSection.subSections,
-      level: level + 1 <= 5 ? level + 1 : 5
-    }, subSection.content);
-  }));
-};
-
-var _default = Section;
-exports["default"] = _default;

package/quick-nav-container/types.d.ts

@@ -1,34 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    /**
-     * Title of the quick nav component.
-     */
-    title: string;
-    /**
-     * Sections to be shown as the content of the quick nav container.
-     */
-    sections: SectionType[];
-    /**
-     * The level of the first heading of the content.
-     */
-    startHeadingLevel?: 1 | 2 | 3 | 4 | 5;
-};
-declare type SectionType = {
-    /**
-     * Title of each section.
-     */
-    title: string;
-    /**
-     * Level of each section.
-     */
-    level?: 1 | 2 | 3 | 4 | 5;
-    /**
-     * Content of each section.
-     */
-    content?: React.ReactNode;
-    /**
-     * Subsections of each section.
-     */
-    subSections?: SectionType[];
-};
-export default Props;

package/radio/Radio.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import RadioPropsType from "./types";
-declare const DxcRadio: ({ checked, value, label, labelPosition, name, disabled, onClick, required, margin, size, }: RadioPropsType) => JSX.Element;
-export default DxcRadio;

package/radio/Radio.js

@@ -1,173 +0,0 @@
-"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 _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
-
-var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
-
-var _variables = require("../common/variables.js");
-
-var _utils = require("../common/utils.js");
-
-var _useTheme = _interopRequireDefault(require("../useTheme"));
-
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
-
-var _templateObject, _templateObject2;
-
-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 DxcRadio = function DxcRadio(_ref) {
-  var _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
-      value = _ref.value,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? "before" : _ref$labelPosition,
-      name = _ref.name,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      onClick = _ref.onClick,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "fitContent" : _ref$size;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      innerChecked = _useState2[0],
-      setInnerChecked = _useState2[1];
-
-  var colorsTheme = (0, _useTheme["default"])();
-  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
-
-  var handlerRadioChange = function handlerRadioChange() {
-    if (checked == null) {
-      setInnerChecked(true);
-    }
-
-    if (typeof onClick === "function") {
-      onClick(true);
-    }
-  };
-
-  var labelComponent = /*#__PURE__*/_react["default"].createElement(LabelContainer, {
-    checked: checked || innerChecked,
-    disabled: disabled,
-    onClick: !disabled && handlerRadioChange || null,
-    backgroundType: backgroundType
-  }, required && /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label);
-
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.radio
-  }, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
-    id: name,
-    labelPosition: labelPosition,
-    disabled: disabled,
-    margin: margin,
-    size: size,
-    backgroundType: backgroundType
-  }, labelPosition === "before" && labelComponent, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-    checked: checked != null && checked || innerChecked,
-    name: name,
-    onClick: handlerRadioChange,
-    value: value,
-    disabled: disabled,
-    disableRipple: true
-  }), labelPosition === "after" && labelComponent));
-};
-
-var sizes = {
-  small: "120px",
-  medium: "240px",
-  large: "480px",
-  fillParent: "100%",
-  fitContent: "unset"
-};
-
-var calculateWidth = function calculateWidth(margin, size) {
-  if (size === "fillParent") {
-    return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-  }
-
-  return sizes[size];
-};
-
-var RadioContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n\n  display: inline-flex;\n  align-items: center;\n  max-height: 42px;\n  position: relative;\n  vertical-align: top;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  cursor: ", ";\n  .MuiButtonBase-root {\n    width: auto;\n    height: auto;\n    padding: 10px;\n    margin: 2px;\n    ", ": ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    .MuiIconButton-label {\n      .MuiSvgIcon-root {\n        height: ", ";\n        width: ", ";\n      }\n      color: ", ";\n\n      > div > :nth-child(2) path {\n        color: ", ";\n      }\n    }\n\n    &.Mui-focusVisible {\n      background-color: transparent;\n      .MuiSvgIcon-root {\n        outline: ", "\n          auto 1px;\n      }\n    }\n    :hover {\n      background-color: transparent;\n    }\n    .MuiTouchRipple-ripple {\n      height: 40px !important;\n      width: 40px !important;\n      top: 0px !important;\n      left: 0px !important;\n    }\n  }\n  .MuiRadio-colorSecondary.Mui-checked {\n    color: ", ";\n    :hover {\n      background-color: transparent;\n    }\n  }\n"])), function (props) {
-  return calculateWidth(props.margin, props.size);
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  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 (props) {
-  return props.disabled === true ? "not-allowed" : "default";
-}, function (props) {
-  return props.labelPosition === "after" ? "padding-right" : "padding-left";
-}, function (props) {
-  return props.theme.circleLabelSpacing;
-}, function (props) {
-  return props.labelPosition === "after" ? "0px" : "";
-}, function (props) {
-  return props.labelPosition === "before" ? "0px" : "";
-}, function (props) {
-  return props.labelPosition === "after" ? "0px" : "";
-}, function (props) {
-  return props.labelPosition === "before" ? "0px" : "";
-}, function (props) {
-  return props.theme.circleSize;
-}, function (props) {
-  return props.theme.circleSize;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
-});
-
-var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  color: ", ";\n  cursor: ", ";\n"])), function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.fontSize;
-}, function (props) {
-  return props.theme.fontWeight;
-}, function (props) {
-  return props.theme.fontStyle;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.disabled && props.theme.disabledFontColorOnDark || props.theme.fontColorOnDark : props.disabled && props.theme.disabledFontColor || props.theme.fontColor;
-}, function (props) {
-  return props.disabled === true ? "not-allowed" : "pointer";
-});
-
-var _default = DxcRadio;
-exports["default"] = _default;