@dxc-technology/halstack-react 0.0.0-c9b5c13 → 0.0.0-ca55cbe

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.
@@ -159,20 +159,39 @@ declare type Props = {
      */
     tabIndex?: number;
 };
+/**
+ * List of suggestions of an Text Input component.
+ */
+export declare type SuggestionsProps = {
+    id: string;
+    value: string;
+    suggestions: string[];
+    visualFocusIndex: number;
+    highlightedSuggestions: boolean;
+    searchHasErrors: boolean;
+    isSearching: boolean;
+    suggestionOnClick: (suggestion: string) => void;
+    getTextInputWidth: () => number;
+};
 /**
  * Reference to the component.
  */
 export declare type RefType = HTMLDivElement;
 /**
- * Single suggestion of the Autosuggest Text Input component.
+ * Single suggestion of an Text Input component.
  */
 export declare type SuggestionProps = {
     id: string;
     value: string;
-    onClick: () => void;
+    onClick: (suggestion: string) => void;
     suggestion: string;
     isLast: boolean;
     visuallyFocused: boolean;
     highlighted: boolean;
 };
+export declare type AutosuggestWrapperProps = {
+    condition: boolean;
+    wrapper: (children: React.ReactNode) => JSX.Element;
+    children: React.ReactNode;
+};
 export default Props;

package/textarea/Textarea.js

@@ -19,13 +19,13 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _uuid = require("uuid");
 
@@ -171,7 +171,6 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     backgroundType: backgroundType,
     ref: textareaRef,
     tabIndex: tabIndex,
-    "aria-disabled": disabled,
     "aria-invalid": error ? "true" : "false",
     "aria-errormessage": error ? errorId : undefined,
     "aria-required": optional ? "false" : "true"
@@ -193,7 +192,7 @@ 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 TextareaContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var TextareaContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\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";

package/textarea/Textarea.stories.jsx

@@ -4,12 +4,20 @@ import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import DarkContainer from "../../.storybook/components/DarkSection";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Textarea",
   component: DxcTextarea,
 };
 
+const opinionatedTheme = {
+  textarea: {
+    fontColor: "#000000",
+    hoverBorderColor: "#a46ede",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <>
@@ -151,7 +159,58 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcTextarea label="Xxlarge" margin="xxlarge" />
-      <hr />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Hovered" helperText="Sample text" placeholder="Placeholder" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Focused" helperText="Sample text" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Disabled"
+          optional
+          helperText="Sample text"
+          placeholder="Enter your text here..."
+          disabled
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled with value" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Disabled" helperText="Sample text" defaultValue="Example text" disabled />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With error" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Textarea with error"
+          helperText="Helper text"
+          placeholder="Enter your text here..."
+          error="Error message."
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Grow manual" theme="light" level={4} />{" "}
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Manual vertical grow"
+          verticalGrow="manual"
+          defaultValue="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
+        />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/textarea/Textarea.test.js

@@ -8,7 +8,7 @@ var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _Textarea = _interopRequireDefault(require("./Textarea"));
+var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
 
 describe("Textarea component tests", function () {
   test("Renders with correct label", function () {
@@ -85,7 +85,6 @@ describe("Textarea component tests", function () {
         getByLabelText = _render7.getByLabelText;
 
     var textarea = getByLabelText("Example label");
-    expect(textarea.getAttribute("aria-disabled")).toBe("false");
     expect(textarea.getAttribute("aria-invalid")).toBe("false");
     expect(textarea.getAttribute("aria-describedBy")).toBeNull();
     expect(textarea.getAttribute("aria-required")).toBe("true");
@@ -101,7 +100,7 @@ describe("Textarea component tests", function () {
     var textarea = getByLabelText("Example label");
     expect(textarea.value).toBe("Example text");
   });
-  test("Disabled textarea renders with correct aria and can not be modified", function () {
+  test("Disabled textarea can not be modified", function () {
     var onChange = jest.fn();
 
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
@@ -112,7 +111,6 @@ describe("Textarea component tests", function () {
         getByLabelText = _render9.getByLabelText;
 
     var textarea = getByLabelText("Example label");
-    expect(textarea.getAttribute("aria-disabled")).toBe("true");
 
     _userEvent["default"].type(textarea, "Test");
 

package/toggle-group/ToggleGroup.js

@@ -21,10 +21,12 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _uuid = require("uuid");
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 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); }
@@ -56,6 +58,8 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
       toggleGroupId = _useState4[0];
 
+  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+
   var handleToggleChange = function handleToggleChange(selectedOption) {
     var newSelectedOptions;
 
@@ -97,8 +101,7 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.toggleGroup
   }, /*#__PURE__*/_react["default"].createElement(ToggleGroup, {
-    margin: margin,
-    disabled: disabled
+    margin: margin
   }, /*#__PURE__*/_react["default"].createElement(Label, {
     htmlFor: toggleGroupId,
     disabled: disabled
@@ -111,12 +114,12 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
     return /*#__PURE__*/_react["default"].createElement(ToggleContainer, {
       selected: multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
       role: multiple ? "switch" : "radio",
+      backgroundType: backgroundType,
       "aria-checked": multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
       tabIndex: !disabled ? tabIndex : -1,
       onClick: function onClick() {
         return !disabled && handleToggleChange(option.value);
       },
-      isFirst: i === 0,
       isLast: i === options.length - 1,
       isIcon: option.icon,
       optionLabel: option.label,

package/toggle-group/ToggleGroup.stories.tsx

@@ -3,6 +3,7 @@ import { userEvent, within } from "@storybook/testing-library";
 import DxcToggleGroup from "./ToggleGroup";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "ToggleGroup",
@@ -89,6 +90,16 @@ const twoOptions = [
     label: "Twitter",
   },
 ];
+
+const opinionatedTheme = {
+  toggleGroup: {
+    selectedBaseColor: "#5f249f",
+    selectedFontColor: "#ffffff",
+    unselectedBaseColor: "#e6e6e6",
+    unselectedFontColor: "#000000",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -154,6 +165,37 @@ export const Chromatic = () => (
       <Title title="xxLarge" theme="light" level={4} />
       <DxcToggleGroup label="xxLarge margin" options={options} margin="xxlarge" />
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Selected" theme="light" level={4} />
+        <DxcToggleGroup label="Selected" helperText="HelperText" defaultValue={2} options={options} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Icons & label toggle group" theme="light" level={4} />
+        <DxcToggleGroup label="Icons & label" options={optionsWithIconAndLabel} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Disabled" theme="light" level={4} />
+        <DxcToggleGroup label="Disabled" defaultValue={2} options={options} disabled />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcToggleGroup label="Hovered" options={twoOptions} defaultValue={2} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcToggleGroup label="Actived" options={twoOptions} defaultValue={2} />
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 const OptionSelected = () => <DxcToggleGroup label="Toggle group" helperText="HelperText" options={options} />;

package/toggle-group/ToggleGroup.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup"));
+var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup.tsx"));
 
 var options = [{
   value: 1,

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.
@@ -23,7 +23,7 @@ declare type OptionIcon = OptionCommons & {
      */
     icon: string | SVG;
 };
-declare type OptionLabel = OptionCommons & {
+export declare type OptionLabel = OptionCommons & {
     /**
      * String with the option display value.
      */

package/typography/Typography.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import TypographyPropsTypes from "./types";
+declare const DxcTypography: ({ textOverflow, whiteSpace, children, ...props }: TypographyPropsTypes) => JSX.Element;
+export default DxcTypography;

package/typography/Typography.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
+
+var _excluded = ["textOverflow", "whiteSpace", "children"];
+
+var DxcTypography = function DxcTypography(_ref) {
+  var textOverflow = _ref.textOverflow,
+      whiteSpace = _ref.whiteSpace,
+      children = _ref.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], (0, _extends2["default"])({
+    textOverflow: textOverflow,
+    whiteSpace: whiteSpace == null && textOverflow != null && textOverflow !== "unset" ? "nowrap" : whiteSpace
+  }, props), children);
+};
+
+var _default = DxcTypography;
+exports["default"] = _default;

package/typography/Typography.stories.tsx

@@ -0,0 +1,198 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcTypography from "./Typography";
+
+export default {
+  title: "Typography",
+  component: DxcTypography,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default Typography" theme="light" level={4} />
+      <DxcTypography>Default typography.</DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font sizes" theme="light" level={4} />
+      <DxcTypography display="block" fontSize="3.75rem">
+        3.75rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="3rem">
+        3rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="2rem">
+        2rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="1.5rem">
+        1.5rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="1.25rem">
+        1.25rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="1rem">
+        1rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="0.875rem">
+        0.875rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="0.75rem">
+        0.75rem.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography letter spacing" theme="light" level={4} />
+      <DxcTypography display="block" letterSpacing="-0.025em">
+        -0.025em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="-0.0125em">
+        -0.0125em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0em">
+        0em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0.025em">
+        0.025em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0.05em">
+        0.05em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0.1em">
+        0.1em.
+      </DxcTypography>{" "}
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography line height" theme="light" level={4} />
+      <DxcTypography display="block" lineHeight="1em">
+        1em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.25em">
+        1.25em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.365em">
+        1.365em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.5em">
+        1.5em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.715em">
+        1.715em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="2em">
+        2em.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font weight" theme="light" level={4} />
+      <DxcTypography display="block" fontWeight="300">
+        300.
+      </DxcTypography>
+      <DxcTypography display="block" fontWeight="400">
+        400.
+      </DxcTypography>
+      <DxcTypography display="block" fontWeight="600">
+        600.
+      </DxcTypography>
+      <DxcTypography display="block" fontWeight="700">
+        700.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography decoration" theme="light" level={4} />
+      <DxcTypography display="block" textDecoration="underline">
+        Underline.
+      </DxcTypography>
+      <DxcTypography display="block" textDecoration="line-through">
+        Line-through.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font family" theme="light" level={4} />
+      <DxcTypography display="block" fontFamily="Open Sans, sans-serif">
+        Open Sans, sans-serif.
+      </DxcTypography>
+      <DxcTypography display="block" fontFamily="Source Code Pro, monospace">
+        Source Code Pro, monospace.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font style" theme="light" level={4} />
+      <DxcTypography display="block" fontStyle="italic">
+        Italic.
+      </DxcTypography>
+      <DxcTypography display="block" fontStyle="normal">
+        Normal.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography align" theme="light" level={4} />
+      <DxcTypography display="block" textAlign="left">
+        Left.
+      </DxcTypography>
+      <DxcTypography display="block" textAlign="center">
+        Center.
+      </DxcTypography>
+      <DxcTypography display="block" textAlign="right">
+        Right.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography whitespace" theme="light" level={4} />
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography fontSize="2rem">
+          {"                  "} Normal: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="nowrap" fontSize="2rem">
+          {"                  "}No-wrap: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="pre" fontSize="2rem">
+          {"                  "} pre: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="pre-line" fontSize="2rem">
+          {"                  "}pre-line: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="pre-wrap" fontSize="2rem">
+          {"                  "} pre-wrap: A bunch of words you see.
+        </DxcTypography>
+      </div>
+    </ExampleContainer>{" "}
+    <ExampleContainer>
+      <Title title="Typography display" theme="light" level={4} />
+      <DxcTypography display="block" textAlign="left">
+        Display Block.
+        <DxcTypography>A different text.</DxcTypography>
+      </DxcTypography>
+      <DxcTypography display="inline" textAlign="left">
+        Display Inline.
+        <DxcTypography>A different text.</DxcTypography>
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography text-overflow" theme="light" level={4} />
+      <div style={{ width: "75px" }}>
+        <DxcTypography display="block" textOverflow="clip">
+          Overflow clip.
+        </DxcTypography>
+      </div>
+      <div style={{ width: "75px" }}>
+        <DxcTypography display="block" textOverflow="ellipsis">
+          Overflow ellipsis.
+        </DxcTypography>
+      </div>
+      <div style={{ width: "75px" }}>
+        <DxcTypography display="block" textOverflow="unset">
+          Overflow unset.
+        </DxcTypography>
+      </div>
+    </ExampleContainer>
+  </>
+);

package/typography/types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare type Props = {
+    as?: keyof HTMLElementTagNameMap;
+    display?: "inline" | "block";
+    fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
+    fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
+    fontStyle?: "italic" | "normal";
+    fontWeight?: "300" | "400" | "600" | "700";
+    letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
+    lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
+    textAlign?: "left" | "center" | "right";
+    color?: string;
+    textDecoration?: "none" | "underline" | "line-through";
+    textOverflow?: "clip" | "ellipsis" | "unset";
+    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
+    children: React.ReactNode;
+};
+export default Props;

package/typography/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});