@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Type/Headings.d.ts

@@ -1,50 +1,50 @@
-/// <reference types="react" />
-import { TextProps } from "./Text";
-export declare const Heading1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | "disabled" | "textTransform" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
-    inline?: boolean;
-    compact?: boolean;
-    disabled?: boolean;
-    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
-    fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
-    ref?: import("react").Ref<HTMLParagraphElement>;
-}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLHeadingElement>;
-}>, never>, TextProps>> & string;
-export declare const Heading2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | "disabled" | "textTransform" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
-    inline?: boolean;
-    compact?: boolean;
-    disabled?: boolean;
-    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
-    fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
-    ref?: import("react").Ref<HTMLParagraphElement>;
-}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLHeadingElement>;
-}>, never>, never>> & string;
-export declare const Heading3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | "disabled" | "textTransform" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
-    inline?: boolean;
-    compact?: boolean;
-    disabled?: boolean;
-    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
-    fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
-    ref?: import("react").Ref<HTMLParagraphElement>;
-}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLHeadingElement>;
-}>, never>, never>> & string;
-export declare const Heading4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | "disabled" | "textTransform" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
-    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
-    inline?: boolean;
-    compact?: boolean;
-    disabled?: boolean;
-    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase";
-    fontSize?: string;
-} & import("../StyledProps").StyledProps, "ref"> & {
-    ref?: import("react").Ref<HTMLParagraphElement>;
-}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLHeadingElement>;
-}>, never>, never>> & string;
+/// <reference types="react" />
+import { TextProps } from "./Text";
+export declare const Heading1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+    inline?: boolean;
+    compact?: boolean;
+    disabled?: boolean;
+    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    fontSize?: string;
+} & import("../StyledProps").StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLParagraphElement>;
+}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLHeadingElement>;
+}>, never>, TextProps>> & string;
+export declare const Heading2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+    inline?: boolean;
+    compact?: boolean;
+    disabled?: boolean;
+    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    fontSize?: string;
+} & import("../StyledProps").StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLParagraphElement>;
+}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLHeadingElement>;
+}>, never>, never>> & string;
+export declare const Heading3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+    inline?: boolean;
+    compact?: boolean;
+    disabled?: boolean;
+    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    fontSize?: string;
+} & import("../StyledProps").StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLParagraphElement>;
+}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLHeadingElement>;
+}>, never>, never>> & string;
+export declare const Heading4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("../StyledProps").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+    variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+    inline?: boolean;
+    compact?: boolean;
+    disabled?: boolean;
+    textTransform?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "full-width" | "capitalize" | "full-size-kana" | "lowercase" | "uppercase";
+    fontSize?: string;
+} & import("../StyledProps").StyledProps, "ref"> & {
+    ref?: import("react").Ref<HTMLParagraphElement>;
+}, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLHeadingElement>;
+}>, never>, never>> & string;

package/dist/src/Type/Headings.js

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+import { addStyledProps, variant } from "../StyledProps";
+import Text from "./Text";
+export const Heading1 = styled(Text).attrs(() => ({
+    as: "h1",
+}))(({ theme, compact }) => ({
+    fontSize: theme.fontSizes.heading1,
+    lineHeight: theme.lineHeights.heading1,
+    fontWeight: theme.fontWeights.light,
+    marginTop: 0,
+    marginBottom: compact ? theme.space.none : theme.space.x6,
+}), variant({
+    variants: {
+        touch: {
+            fontWeight: "medium",
+            marginBottom: "none",
+        },
+    },
+}), addStyledProps);
+export const Heading2 = styled(Text).attrs(() => ({
+    as: "h2",
+}))(({ theme, compact }) => ({
+    fontSize: theme.fontSizes.heading2,
+    lineHeight: theme.lineHeights.heading2,
+    fontWeight: theme.fontWeights.normal,
+    marginTop: 0,
+    marginBottom: compact ? theme.space.none : theme.space.x2,
+}), variant({
+    variants: {
+        touch: {
+            fontWeight: "medium",
+            marginBottom: "none",
+        },
+    },
+}), addStyledProps);
+export const Heading3 = styled(Text).attrs(() => ({
+    as: "h3",
+}))(({ theme, compact }) => ({
+    fontSize: theme.fontSizes.heading3,
+    lineHeight: theme.lineHeights.heading3,
+    fontWeight: theme.fontWeights.medium,
+    marginTop: 0,
+    marginBottom: compact ? theme.space.none : theme.space.x1,
+}), variant({
+    variants: {
+        touch: {
+            fontWeight: "medium",
+            marginBottom: "none",
+        },
+    },
+}), addStyledProps);
+export const Heading4 = styled(Text).attrs(() => ({
+    as: "h4",
+}))(({ theme, compact }) => ({
+    fontSize: theme.fontSizes.heading4,
+    lineHeight: theme.lineHeights.heading4,
+    fontWeight: theme.fontWeights.bold,
+    marginTop: 0,
+    marginBottom: compact ? theme.space.none : theme.space.x1,
+}), variant({
+    variants: {
+        touch: {
+            fontWeight: "medium",
+            marginBottom: "none",
+        },
+    },
+}), addStyledProps);

package/dist/src/Type/Headings.story.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Headings: () => React.JSX.Element;
-export declare const WithACustomMargin: () => React.JSX.Element;
-export declare const Inline: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Headings: () => React.JSX.Element;
+export declare const WithACustomMargin: () => React.JSX.Element;
+export declare const Inline: () => React.JSX.Element;

package/dist/src/Type/Headings.story.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Text, Heading1, Heading2, Heading3, Heading4, StatusIndicator } from "../index";
+import { Flex } from "../Flex";
+export default {
+    title: "Components/Headings",
+};
+export const Headings = () => (React.createElement(Flex, { flexDirection: "column" },
+    React.createElement(Heading1, null, "Heading 1"),
+    React.createElement(Heading2, null, "Heading 2"),
+    React.createElement(Heading3, null, "Heading 3"),
+    React.createElement(Heading4, null, "Heading 4")));
+export const WithACustomMargin = () => (React.createElement(React.Fragment, null,
+    React.createElement(Heading1, { mb: "x6" }, "Heading1"),
+    React.createElement(Text, null, "Lorem ipsum")));
+export const Inline = () => (React.createElement(React.Fragment, null,
+    React.createElement(Heading1, { inline: true }, "Heading1"),
+    React.createElement(StatusIndicator, { ml: "x2", type: "informative" }, "Status")));

package/dist/src/Type/Text.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import { StyledProps } from "../StyledProps";
-export type TextProps = React.HTMLAttributes<HTMLParagraphElement> & {
-    variant?: ComponentVariant;
-    inline?: boolean;
-    compact?: boolean;
-    disabled?: boolean;
-    textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
-    fontSize?: string;
-} & StyledProps;
-declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TextProps>> & string;
-export default Text;
+/// <reference types="react" />
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { StyledProps } from "../StyledProps";
+export type TextProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    variant?: ComponentVariant;
+    inline?: boolean;
+    compact?: boolean;
+    disabled?: boolean;
+    textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
+    fontSize?: string;
+} & StyledProps;
+declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TextProps>> & string;
+export default Text;

package/dist/src/Type/Text.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { addStyledProps } from "../StyledProps";
+const Text = styled.p(({ disabled = false, textTransform, inline = false, theme }) => ({
+    textTransform,
+    color: "currentColor",
+    marginTop: 0,
+    marginBottom: 0,
+    fontSize: theme.fontSizes.base,
+    lineHeight: theme.lineHeights.base,
+    opacity: disabled ? "0.7" : undefined,
+    display: inline ? "inline" : undefined,
+    a: {
+        fontSize: "inherit",
+        lineHeight: "inherit",
+    },
+}), addStyledProps);
+export default Text;

package/dist/src/Type/Text.story.d.ts

@@ -1,36 +1,36 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Text: () => React.JSX.Element;
-export declare const WithAColor: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithASize: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACustomMargin: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToInline: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToDisabled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Text: () => React.JSX.Element;
+export declare const WithAColor: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithASize: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithACustomMargin: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SetToInline: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SetToDisabled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Type/Text.story.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Text } from ".";
+import { Box } from "../Box";
+export default {
+    title: "Components/Text",
+};
+export const _Text = () => React.createElement(Text, null, "Default text");
+export const WithAColor = () => React.createElement(Text, { color: "blue" }, "Blue text");
+WithAColor.story = {
+    name: "With a color",
+};
+export const WithASize = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, { bg: "whiteGrey", p: "x2", mb: "x3" },
+        React.createElement(Text, null, "Default (16px/24px)")),
+    React.createElement(Box, { bg: "whiteGrey", p: "x2", mb: "x3" },
+        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase" }, "Small (14px/24px)"),
+        React.createElement(Text, { fontSize: "small", lineHeight: "smallTextCompressed" }, "Small Compressed (14px/16px)")),
+    React.createElement(Box, { bg: "whiteGrey", p: "x2", mb: "x3" },
+        React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText" }, "Smaller (12px/16px)"))));
+WithASize.story = {
+    name: "With a size",
+};
+export const WithACustomMargin = () => (React.createElement(React.Fragment, null,
+    React.createElement(Text, { mb: "x3" }, "Text 24px bottom margin."),
+    React.createElement(Text, null, "Text with default (0px) bottom margin.")));
+WithACustomMargin.story = {
+    name: "With a custom margin",
+};
+export const SetToInline = () => (React.createElement(React.Fragment, null,
+    React.createElement(Text, { inline: true, mr: "x1" }, "Inline text"),
+    React.createElement(Text, { inline: true }, "Inline text")));
+SetToInline.story = {
+    name: "Set to inline",
+};
+export const SetToDisabled = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, { bg: "white", p: "x2", m: "x2" },
+        React.createElement(Text, { disabled: true }, "Disabled text")),
+    React.createElement(Box, { bg: "darkBlue", p: "x2", m: "x2" },
+        React.createElement(Text, { color: "white", disabled: true }, "Disabled text")),
+    React.createElement(Box, { bg: "black", p: "x2", m: "x2" },
+        React.createElement(Text, { color: "white", disabled: true }, "Disabled text"))));
+SetToDisabled.story = {
+    name: "Set to disabled",
+};

package/dist/src/Type/Typography.story.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Article: () => React.JSX.Element;
-export declare const AllTypographyValues: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Article: () => React.JSX.Element;
+export declare const AllTypographyValues: () => React.JSX.Element;

package/dist/src/Type/Typography.story.js

@@ -0,0 +1,214 @@
+import React from "react";
+import { useTheme } from "styled-components";
+import { List, ListItem, Text, Heading1, Heading2, Heading3, Flex, Divider } from "../index";
+export default {
+    title: "Components/Typography",
+};
+export const Article = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Heading1, null, "Nunc vitae nisl vestibulum vitae nisl vestibulum vitae nisl vestibulum"),
+        React.createElement(Heading2, null, "Donec leo felis vitae nisl vestibulum vitae nisl vestibulum vitae nisl vestibulum"),
+        React.createElement(Text, { mb: "x3" }, "Nunc tempor eget mauris id facilisis. Morbi convallis mauris at fermentum gravida. Nunc lacinia a odio eu rutrum. Etiam in libero vestibulum, lobortis mi fermentum, pharetra lacus. Aliquam commodo molestie dolor, vel tristique orci efficitur eu. Nullam eleifend malesuada. Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim."),
+        React.createElement(Heading3, null, "Long Title that Hopefully wraps. Maybe now? How About Now? Now? Now? Now? Now? Now? Now?"),
+        React.createElement(Text, { mb: "x3" }, "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit."),
+        React.createElement(Heading2, null, "Donec leo felis"),
+        React.createElement(Heading3, null, "Two pargraphs and moderatly long title"),
+        React.createElement(Text, { mb: "x3" }, "Nunc tempor eget mauris id facilisis. Morbi convallis mauris at fermentum gravida. Nunc lacinia a odio eu rutrum. Etiam in libero vestibulum, lobortis mi fermentum, pharetra lacus. Aliquam commodo molestie dolor, vel tristique orci efficitur eu. Nullam eleifend malesuada. Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim."),
+        React.createElement(Heading3, null, "Two pargraphs with List"),
+        React.createElement(Text, { mb: "x3" }, "Nunc tempor eget mauris id facilisis. Morbi convallis mauris at fermentum gravida. Nunc lacinia a odio eu rutrum. Etiam in libero vestibulum, lobortis mi fermentum, pharetra lacus. Aliquam commodo molestie dolor, vel tristique orci efficitur eu. Nullam eleifend malesuada. Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim."),
+        React.createElement(List, null,
+            React.createElement(ListItem, null, "List Item 1"),
+            React.createElement(ListItem, null, "List Item 2 that is really really really really really really really really really long"),
+            React.createElement(ListItem, null, "List Item 3")),
+        React.createElement(Text, { mb: "x3" }, "Nam luctus blandit dignissim. Mauris eu odio tristique, lorem quis, lobortis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lacus felis. Ut convallis rhoncus orci. Maecenas sit amet leo dui. Integer semper porta dignissim."),
+        React.createElement(Text, { mb: "x3" }, "Nunc id arcu sagittis, volutpat sit amet, accumsan diam. Pellentesque luctus, nulla a ornare semper, dui mollis nisi, vel lacinia neque velit eget sapien. Etiam sodales dolor, vel dictum libero cursus ac. Nam vulputate tempor mauris vel. Nam tristique metus et dignissim pretium. Aliquam erat volutpat."),
+        React.createElement(Heading3, null, "This is small text (14px) with medium(default) line height (24px)."),
+        React.createElement(Text, { mb: "x3", fontSize: "small", lineHeight: "smallTextBase" }, "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit. Nunc id arcu sagittis, volutpat sit amet, accumsan diam. Pellentesque luctus, nulla a ornare semper, dui mollis nisi, vel lacinia neque velit eget sapien. Etiam sodales dolor, vel dictum libero cursus ac. Nam vulputate tempor mauris vel. Nam tristique metus et dignissim pretium. Aliquam erat volutpat."),
+        React.createElement(Heading3, null, "This is small text (14px) with small line height (16px). Reserved for buttons, inputs ..."),
+        React.createElement(Text, { mb: "x3", fontSize: "small", lineHeight: "smallTextCompressed" }, "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit."),
+        React.createElement(Heading3, null, "This is smaller text (12px) with smaller line height (16px). Reserved for buttons, inputs ..."),
+        React.createElement(Text, { mb: "x3", fontSize: "smaller", lineHeight: "smallerText" }, "Porttitor urna sit amet, congue nulla. Etiam in posuere nibh. Nam pellentesque, lacus id elementum posuere, neque purus ullamcorper nunc, consequat mi velit eget mi. Duis ipsum augue, pulvinar ullamcorper fringilla in, dignissim congue velit.")));
+};
+export const AllTypographyValues = () => {
+    const theme = useTheme();
+    return (React.createElement(Flex, { flexDirection: "column", gap: "x5" },
+        React.createElement(Flex, { flexDirection: "column" },
+            React.createElement(Heading1, null, "Typography"),
+            React.createElement(Heading2, null, "Interface text (font-size / line-height)"),
+            React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerText" },
+                "smaller (",
+                theme.fontSizes.smaller,
+                ") / smallerText (",
+                theme.lineHeights.smallerText,
+                ")"),
+            React.createElement(Text, { fontSize: "smaller", lineHeight: "smallerRelaxed" },
+                "smaller (",
+                theme.fontSizes.smaller,
+                ") / smallerRelaxed (",
+                theme.lineHeights.smallerRelaxed,
+                ")"),
+            React.createElement(Text, { fontSize: "small", lineHeight: "smallTextBase" },
+                "small (",
+                theme.fontSizes.small,
+                ") / smallTextBase (",
+                theme.lineHeights.smallTextBase,
+                ")"),
+            React.createElement(Text, { fontSize: "small", lineHeight: "smallTextCompressed" },
+                "small (",
+                theme.fontSizes.small,
+                ") / smallTextCompressed (",
+                theme.lineHeights.smallTextCompressed,
+                ")"),
+            React.createElement(Text, { fontSize: "small", lineHeight: "smallRelaxed" },
+                "small (",
+                theme.fontSizes.small,
+                ") / smallRelaxed (",
+                theme.lineHeights.smallRelaxed,
+                ")"),
+            React.createElement(Text, { fontSize: "medium", lineHeight: "base" },
+                "medium (",
+                theme.fontSizes.medium,
+                ") / base (",
+                theme.lineHeights.base,
+                ")"),
+            React.createElement(Text, { fontSize: "medium", lineHeight: "baseRelaxed" },
+                "medium (",
+                theme.fontSizes.medium,
+                ") / baseRelaxed (",
+                theme.lineHeights.baseRelaxed,
+                ")"),
+            React.createElement(Text, { fontSize: "large", lineHeight: "heading3" },
+                "large (",
+                theme.fontSizes.large,
+                ") / heading3 (",
+                theme.lineHeights.heading3,
+                ")"),
+            React.createElement(Text, { fontSize: "larger", lineHeight: "heading2" },
+                "larger (",
+                theme.fontSizes.larger,
+                ") / heading2 (",
+                theme.lineHeights.heading2,
+                ")"),
+            React.createElement(Text, { fontSize: "largest", lineHeight: "heading1" },
+                "largest (",
+                theme.fontSizes.largest,
+                ") / heading1 (",
+                theme.lineHeights.heading1,
+                ")")),
+        React.createElement(Divider, null),
+        React.createElement(Flex, { flexDirection: "column" },
+            React.createElement(Heading2, { compact: true }, "Heading (font-size / line-height)"),
+            React.createElement(Text, { fontSize: "heading1", lineHeight: "heading1" },
+                "heading1 (",
+                theme.fontSizes.heading1,
+                ") / heading1 (",
+                theme.lineHeights.heading1,
+                ")"),
+            React.createElement(Text, { fontSize: "heading2", lineHeight: "heading2" },
+                "heading2 (",
+                theme.fontSizes.heading2,
+                ") / heading2 (",
+                theme.lineHeights.heading2,
+                ")"),
+            React.createElement(Text, { fontSize: "heading3", lineHeight: "heading3" },
+                "heading3 (",
+                theme.fontSizes.heading3,
+                ") / heading3 (",
+                theme.lineHeights.heading3,
+                ")"),
+            React.createElement(Text, { fontSize: "heading4", lineHeight: "heading4" },
+                "heading4 (",
+                theme.fontSizes.heading4,
+                ") / heading4 (",
+                theme.lineHeights.heading4,
+                ")")),
+        React.createElement(Divider, null),
+        React.createElement(Flex, { flexDirection: "column" },
+            React.createElement(Flex, { flexDirection: "column", mb: "x3" },
+                React.createElement(Heading2, { compact: true }, "Experimental interface text (font-size / line-height)"),
+                React.createElement(Text, { fontSize: "smallest" }, "These theme values are experimental and may be modified or removed in future updates.")),
+            React.createElement(Text, { fontSize: "xxs", lineHeight: "base" },
+                "xxs (",
+                theme.fontSizes.xxs,
+                ") / base (",
+                theme.lineHeights.base,
+                ")"),
+            React.createElement(Text, { fontSize: "xxs", lineHeight: "baseRelaxed" },
+                "xxs (",
+                theme.fontSizes.xxs,
+                ") / baseRelaxed (",
+                theme.lineHeights.baseRelaxed,
+                ")"),
+            React.createElement(Text, { fontSize: "xs", lineHeight: "base" },
+                "xs (",
+                theme.fontSizes.xs,
+                ") / base (",
+                theme.lineHeights.base,
+                ")"),
+            React.createElement(Text, { fontSize: "xs", lineHeight: "baseRelaxed" },
+                "xs (",
+                theme.fontSizes.xs,
+                ") / baseRelaxed (",
+                theme.lineHeights.baseRelaxed,
+                ")"),
+            React.createElement(Text, { fontSize: "sm", lineHeight: "base" },
+                "sm (",
+                theme.fontSizes.sm,
+                ") / base (",
+                theme.lineHeights.base,
+                ")"),
+            React.createElement(Text, { fontSize: "sm", lineHeight: "baseRelaxed" },
+                "sm (",
+                theme.fontSizes.sm,
+                ") / baseRelaxed (",
+                theme.lineHeights.baseRelaxed,
+                ")"),
+            React.createElement(Text, { fontSize: "md", lineHeight: "base" },
+                "md (",
+                theme.fontSizes.md,
+                ") / base (",
+                theme.lineHeights.base,
+                ")"),
+            React.createElement(Text, { fontSize: "md", lineHeight: "baseRelaxed" },
+                "md (",
+                theme.fontSizes.md,
+                ") / baseRelaxed (",
+                theme.lineHeights.baseRelaxed,
+                ")"),
+            React.createElement(Text, { fontSize: "lg", lineHeight: "base" },
+                "lg (",
+                theme.fontSizes.lg,
+                ") / base (",
+                theme.lineHeights.base,
+                ")"),
+            React.createElement(Text, { fontSize: "lg", lineHeight: "baseRelaxed" },
+                "lg (",
+                theme.fontSizes.lg,
+                ") / baseRelaxed (",
+                theme.lineHeights.baseRelaxed,
+                ")"),
+            React.createElement(Text, { fontSize: "xl", lineHeight: "base" },
+                "xl (",
+                theme.fontSizes.xl,
+                ") / base (",
+                theme.lineHeights.base,
+                ")"),
+            React.createElement(Text, { fontSize: "xl", lineHeight: "baseRelaxed" },
+                "xl (",
+                theme.fontSizes.xl,
+                ") / baseRelaxed (",
+                theme.lineHeights.baseRelaxed,
+                ")"),
+            React.createElement(Text, { fontSize: "xxl", lineHeight: "base" },
+                "xxl (",
+                theme.fontSizes.xxl,
+                ") / base (",
+                theme.lineHeights.base,
+                ")"),
+            React.createElement(Text, { fontSize: "xxl", lineHeight: "baseRelaxed" },
+                "xxl (",
+                theme.fontSizes.xxl,
+                ") / baseRelaxed (",
+                theme.lineHeights.baseRelaxed,
+                ")"))));
+};

package/dist/src/Type/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Text } from "./Text";
-export type { TextProps } from "./Text";
-export * from "./Headings";
+export { default as Text } from "./Text";
+export type { TextProps } from "./Text";
+export * from "./Headings";

package/dist/src/Type/index.js

@@ -0,0 +1,2 @@
+export { default as Text } from "./Text";
+export * from "./Headings";