@dxc-technology/halstack-react 0.0.0-dcd93c4 → 0.0.0-dddc3c4

package/tabs/Tabs.test.js

@@ -25,6 +25,23 @@ var sampleTabsWithBadge = [{
   label: "Tab-3",
   notificationNumber: "101"
 }];
+var sampleTabsMiddleDisabled = [{
+  label: "Tab-1"
+}, {
+  label: "Tab-2",
+  isDisabled: true
+}, {
+  label: "Tab-3"
+}];
+var sampleTabsLastTabNonDisabled = [{
+  label: "Tab-1",
+  isDisabled: true
+}, {
+  label: "Tab-2",
+  isDisabled: true
+}, {
+  label: "Tab-3"
+}];
 describe("Tabs component tests", function () {
   test("Tabs render with correct labels", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
@@ -103,18 +120,26 @@ describe("Tabs component tests", function () {
       tabs: sampleTabs,
       onTabClick: onTabClick
     })),
-        getByText = _render6.getByText;
+        getByText = _render6.getByText,
+        getAllByRole = _render6.getAllByRole;
 
+    var tabs = getAllByRole("tab");
     var tab1 = getByText("Tab-1");
     var tab2 = getByText("Tab-2");
 
     _react2.fireEvent.click(tab2);
 
     expect(onTabClick).toHaveBeenCalledWith(1);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
 
     _react2.fireEvent.click(tab1);
 
     expect(onTabClick).toHaveBeenCalledWith(0);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
   });
   test("Controlled tabs", function () {
     var onTabClick = jest.fn();
@@ -124,17 +149,203 @@ describe("Tabs component tests", function () {
       onTabClick: onTabClick,
       activeTabIndex: 0
     })),
-        getByText = _render7.getByText;
+        getByText = _render7.getByText,
+        getAllByRole = _render7.getAllByRole;
 
-    var tab2 = getByText("Tab-2");
-    var tab3 = getByText("Tab-3");
+    var tabs = getAllByRole("tab");
 
-    _react2.fireEvent.click(tab2);
+    _react2.fireEvent.click(tabs[1]);
+
+    expect(onTabClick).toHaveBeenCalledWith(1);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+
+    _react2.fireEvent.click(tabs[2]);
+
+    expect(onTabClick).toHaveBeenCalledWith(2);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+  });
+  test("Uncontrolled tabs should have focus in the first non-disabled tab", function () {
+    var onTabClick = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabsLastTabNonDisabled,
+      onTabClick: onTabClick
+    })),
+        getAllByRole = _render8.getAllByRole;
+
+    var tabs = getAllByRole("tab");
+    expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
+  });
+  test("Controlled tabs with active index in disabled tab should not change focus to the first available tab", function () {
+    var onTabClick = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabsLastTabNonDisabled,
+      onTabClick: onTabClick,
+      activeTabIndex: 0
+    })),
+        getAllByRole = _render9.getAllByRole;
+
+    var tabs = getAllByRole("tab");
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
+
+    _react2.fireEvent.click(tabs[2]);
+
+    expect(onTabClick).toHaveBeenCalledWith(2);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
+    expect(tabs[2].hasAttribute("disabled")).toBeFalsy();
+  });
+  test("Select tabs with keyboard event arrows", function () {
+    var onTabClick = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabs,
+      onTabClick: onTabClick
+    })),
+        getByText = _render10.getByText,
+        getByRole = _render10.getByRole,
+        getAllByRole = _render10.getAllByRole;
+
+    var tabList = getByRole("tablist");
+    var tab1 = getByText("Tab-1");
+    var tabs = getAllByRole("tab");
+
+    _react2.fireEvent.click(tab1);
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
 
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
     expect(onTabClick).toHaveBeenCalledWith(1);
 
-    _react2.fireEvent.click(tab3);
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
+    expect(onTabClick).toHaveBeenCalledWith(2);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowLeft"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(1);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowLeft"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowLeft"
+    });
 
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
+    expect(onTabClick).toHaveBeenCalledWith(2);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "Enter"
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
+  });
+  test("Skip disabled tab with keyboard event arrows", function () {
+    var onTabClick = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      tabs: sampleTabsMiddleDisabled,
+      onTabClick: onTabClick
+    })),
+        getByText = _render11.getByText,
+        getByRole = _render11.getByRole,
+        getAllByRole = _render11.getAllByRole;
+
+    var tabList = getByRole("tablist");
+    var tab1 = getByText("Tab-1");
+    var tabs = getAllByRole("tab");
+
+    _react2.fireEvent.click(tab1);
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
+    expect(onTabClick).toHaveBeenCalledWith(0);
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: "ArrowRight"
+    });
+
+    _react2.fireEvent.keyDown(tabList, {
+      key: " "
+    });
+
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
     expect(onTabClick).toHaveBeenCalledWith(2);
   });
 });

package/tabs/types.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type TabCommonProps = {
     /**
      * Whether the tab is disabled or not.
@@ -21,7 +21,7 @@ declare type TabCommonProps = {
      */
     notificationNumber?: boolean | number;
 };
-declare type TabLabelProps = TabCommonProps & {
+export declare type TabLabelProps = TabCommonProps & {
     /**
      * Tab label.
      */
@@ -31,7 +31,7 @@ declare type TabLabelProps = TabCommonProps & {
      */
     icon?: string | SVG;
 };
-declare type TabIconProps = TabCommonProps & {
+export declare type TabIconProps = TabCommonProps & {
     /**
      * Tab label.
      */
@@ -41,6 +41,16 @@ declare type TabIconProps = TabCommonProps & {
      */
     icon: string | SVG;
 };
+export declare type TabProps = {
+    tab: TabLabelProps | TabIconProps;
+    active: boolean;
+    tabIndex: number;
+    hasLabelAndIcon: boolean;
+    iconPosition: "top" | "left";
+    onClick: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+};
 declare type Props = {
     /**
      * An array of objects representing the tabs.

package/tabs-nav/NavTabs.js

@@ -91,15 +91,15 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
       return getPropInChild(child, "active");
     });
 
-    switch (event.keyCode) {
-      case 37:
-        // arrow left
+    switch (event.key) {
+      case "Left":
+      case "ArrowLeft":
         event.preventDefault();
         setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
         break;
 
-      case 39:
-        // arrow right
+      case "Right":
+      case "ArrowRight":
         event.preventDefault();
         setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
         break;

package/tabs-nav/Tab.js

@@ -59,11 +59,9 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
   var handleOnKeyDown = function handleOnKeyDown(event) {
     var _tabRef$current2;
 
-    switch (event.keyCode) {
-      case 13: // enter
-
-      case 32:
-        // space
+    switch (event.key) {
+      case "Enter":
+      case "Space":
         tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
         event.preventDefault();
         break;

package/tabs-nav/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 export declare type TabProps = {
     /**
      * Whether the tab is active or not.

package/tag/types.d.ts

@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type TagCommonProps = {
     /**
      * If defined, the tag will be displayed as an anchor, using this prop as "href".

package/text-input/TextInput.js

@@ -110,14 +110,6 @@ var makeCancelable = function makeCancelable(promise) {
   };
 };
 
-var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
-  return "This field is required. Please, enter a value.";
-};
-
-var getPatternErrorMessage = function getPatternErrorMessage() {
-  return "Please match the format requested.";
-};
-
 var patternMatch = function patternMatch(pattern, value) {
   return new RegExp(pattern).test(value);
 };
@@ -307,14 +299,14 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   };
 
   var handleIOnKeyDown = function handleIOnKeyDown(event) {
-    switch (event.keyCode) {
-      case 40:
-        // Arrow Down
+    switch (event.key) {
+      case "Down":
+      case "ArrowDown":
+        event.preventDefault();
+
         if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number") {
           decrementNumber();
-          event.preventDefault();
         } else {
-          event.preventDefault();
           openSuggestions();
 
           if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
@@ -326,13 +318,13 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
         break;
 
-      case 38:
-        // Arrow Up
+      case "Up":
+      case "ArrowUp":
+        event.preventDefault();
+
         if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number") {
           incrementNumber();
-          event.preventDefault();
         } else {
-          event.preventDefault();
           openSuggestions();
 
           if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
@@ -344,8 +336,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
         break;
 
-      case 27:
-        // Esc
+      case "Esc":
+      case "Escape":
         event.preventDefault();
 
         if (hasSuggestions()) {
@@ -355,8 +347,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
         break;
 
-      case 13:
-        // Enter
+      case "Enter":
         if (hasSuggestions() && !isSearching) {
           var validFocusedSuggestion = filteredSuggestions.length > 0 && visualFocusedSuggIndex >= 0 && visualFocusedSuggIndex < filteredSuggestions.length;
           validFocusedSuggestion && changeValue(filteredSuggestions[visualFocusedSuggIndex]);

package/text-input/TextInput.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { userEvent, within, waitFor } from "@storybook/testing-library";
-import { fireEvent } from "@testing-library/react";
+import { userEvent, within, fireEvent } from "@storybook/testing-library";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";

package/text-input/types.d.ts

@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type Action = {
     /**
      * This function will be called when the user clicks the action.

package/toggle-group/types.d.ts

@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type OptionCommons = {
     /**
      * Number with the option inner value.

package/typography/Typography.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import TypographyPropsTypes from "./types";
+declare const Typography: ({ as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace, children, }: TypographyPropsTypes) => JSX.Element;
+export default Typography;

package/typography/Typography.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+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 || _typeof(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 TypographyContext = /*#__PURE__*/_react["default"].createContext(null);
+
+var Typography = function Typography(_ref) {
+  var as = _ref.as,
+      display = _ref.display,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      fontStyle = _ref.fontStyle,
+      fontWeight = _ref.fontWeight,
+      letterSpacing = _ref.letterSpacing,
+      lineHeight = _ref.lineHeight,
+      textAlign = _ref.textAlign,
+      color = _ref.color,
+      textDecoration = _ref.textDecoration,
+      textOverflow = _ref.textOverflow,
+      whiteSpace = _ref.whiteSpace,
+      children = _ref.children;
+  var componentContext = (0, _react.useContext)(TypographyContext);
+  var asValue = as !== null && as !== void 0 ? as : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) || "span";
+  var displayValue = display !== null && display !== void 0 ? display : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) || "inline";
+  var fontFamilyValue = fontFamily !== null && fontFamily !== void 0 ? fontFamily : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) || "Open Sans, sans-serif";
+  var fontSizeValue = fontSize !== null && fontSize !== void 0 ? fontSize : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) || "1rem";
+  var fontStyleValue = fontStyle !== null && fontStyle !== void 0 ? fontStyle : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) || "normal";
+  var fontWeightValue = fontWeight !== null && fontWeight !== void 0 ? fontWeight : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) || "400";
+  var letterSpacingValue = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) || "0em";
+  var lineHeightValue = lineHeight !== null && lineHeight !== void 0 ? lineHeight : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) || "1.5em";
+  var textAlignValue = textAlign !== null && textAlign !== void 0 ? textAlign : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) || "left";
+  var colorValue = color !== null && color !== void 0 ? color : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) || "#000000";
+  var textDecorationValue = textDecoration !== null && textDecoration !== void 0 ? textDecoration : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) || "none";
+  var textOverflowValue = textOverflow !== null && textOverflow !== void 0 ? textOverflow : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) || "unset";
+  var whiteSpaceValue = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) || "normal";
+  return /*#__PURE__*/_react["default"].createElement(TypographyContext.Provider, {
+    value: {
+      as: asValue,
+      display: displayValue,
+      fontFamily: fontFamilyValue,
+      fontSize: fontSizeValue,
+      fontStyle: fontStyleValue,
+      fontWeight: fontWeightValue,
+      letterSpacing: letterSpacingValue,
+      lineHeight: lineHeightValue,
+      textAlign: textAlignValue,
+      color: colorValue,
+      textDecoration: textDecorationValue,
+      textOverflow: textOverflowValue,
+      whiteSpace: whiteSpaceValue
+    }
+  }, /*#__PURE__*/_react["default"].createElement(StyledTypography, {
+    as: asValue,
+    display: displayValue,
+    fontFamily: fontFamilyValue,
+    fontSize: fontSizeValue,
+    fontStyle: fontStyleValue,
+    fontWeight: fontWeightValue,
+    letterSpacing: letterSpacingValue,
+    lineHeight: lineHeightValue,
+    textAlign: textAlignValue,
+    color: colorValue,
+    textDecoration: textDecorationValue,
+    textOverflow: textOverflowValue,
+    whiteSpace: whiteSpaceValue
+  }, children));
+};
+
+var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  display: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  text-align: ", ";\n  line-height: ", ";\n  text-decoration: ", ";\n  text-overflow: ", ";\n  white-space: ", ";\n  overflow: ", ";\n"])), function (_ref2) {
+  var display = _ref2.display;
+  return display;
+}, function (_ref3) {
+  var color = _ref3.color;
+  return color;
+}, function (_ref4) {
+  var fontFamily = _ref4.fontFamily;
+  return fontFamily;
+}, function (_ref5) {
+  var fontSize = _ref5.fontSize;
+  return fontSize;
+}, function (_ref6) {
+  var fontStyle = _ref6.fontStyle;
+  return fontStyle;
+}, function (_ref7) {
+  var fontWeight = _ref7.fontWeight;
+  return fontWeight;
+}, function (_ref8) {
+  var letterSpacing = _ref8.letterSpacing;
+  return letterSpacing;
+}, function (_ref9) {
+  var textAlign = _ref9.textAlign;
+  return textAlign;
+}, function (_ref10) {
+  var lineHeight = _ref10.lineHeight;
+  return lineHeight;
+}, function (_ref11) {
+  var textDecoration = _ref11.textDecoration;
+  return textDecoration;
+}, function (_ref12) {
+  var textOverflow = _ref12.textOverflow;
+  return textOverflow;
+}, function (_ref13) {
+  var whiteSpace = _ref13.whiteSpace,
+      textOverflow = _ref13.textOverflow;
+  return whiteSpace !== "normal" ? whiteSpace : textOverflow !== "unset" ? "nowrap" : "normal";
+}, function (_ref14) {
+  var textOverflow = _ref14.textOverflow;
+  return textOverflow !== "unset" ? "hidden" : "visible";
+});
+
+var _default = Typography;
+exports["default"] = _default;