@cube-dev/ui-kit 0.9.6 → 0.9.7

package/es/components/content/Card/Card.js

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Base } from '../../Base';
+import { CONTAINER_STYLES } from '../../../styles/list';
+import { extractStyles } from '../../../utils/styles';
+import { filterBaseProps } from '../../../utils/filterBaseProps';
+const DEFAULT_STYLES = {
+    display: 'block',
+    flow: 'column',
+    radius: '1r',
+    fill: '#white',
+    border: true,
+    padding: '1.5x',
+    preset: 't3',
+};
+export const Card = forwardRef((props, ref) => {
+    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
+    return (_jsx(Base, { role: "region", ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/es/components/content/Content.js

@@ -0,0 +1,39 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { styled } from '../../styled';
+import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+import { useSlotProps } from '../../utils/react';
+const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
+const RawContent = styled({
+    name: 'Content',
+    tag: 'section',
+    styles: {
+        gridArea: 'content',
+        preset: 'p3',
+        color: '#dark.75',
+        display: 'block',
+        flow: 'column',
+        gap: '2x',
+        overflow: 'auto',
+        styledScrollbar: true,
+    },
+    props: {
+        'data-id': 'Content',
+    },
+});
+export const Content = forwardRef((props, ref) => {
+    props = useSlotProps(props, 'content');
+    const styles = extractStyles(props, STYLE_LIST);
+    return (_jsx(RawContent, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/es/components/content/Divider.js

@@ -0,0 +1,50 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Base } from '../Base';
+import { OUTER_STYLES, BASE_STYLES, COLOR_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+import { useSlotProps } from '../../utils/react';
+const STYLE_LIST = [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES];
+const DEFAULT_STYLES = {
+    gridArea: 'divider',
+    display: {
+        '': 'block',
+        text: 'grid',
+    },
+    gridColumns: '1fr auto 1fr',
+    placeItems: 'center stretch',
+    gap: '1x',
+    preset: 'c1',
+    height: {
+        '': '1bw 1bw',
+        text: 'auto',
+    },
+    fill: {
+        '': '#border',
+        text: 'none',
+    },
+    border: '0',
+    margin: '0',
+    Line: {
+        height: '1bw 1bw',
+        fill: '#border',
+    },
+};
+export const Divider = forwardRef((props, ref) => {
+    const { mods, children, ...otherProps } = useSlotProps(props, 'divider');
+    const styles = extractStyles(otherProps, STYLE_LIST, DEFAULT_STYLES);
+    return (_jsx(Base, { as: children ? 'div' : 'hr', role: children ? 'separator' : undefined, mods: {
+            text: !!children,
+            ...mods,
+        }, "data-id": "Divider", ...filterBaseProps(otherProps, { eventProps: true }), styles: styles, ref: ref, children: children && (_jsxs(_Fragment, { children: [_jsx("div", { "data-element": "Line" }, void 0), _jsx("div", { children: children }, void 0), _jsx("div", { "data-element": "Line" }, void 0)] }, void 0)) }, void 0));
+});
+
+        

package/es/components/content/Footer.js

@@ -0,0 +1,33 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+import { useSlotProps } from '../../utils/react';
+import { styled } from '../../styled';
+const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
+const RawFooter = styled({
+    name: 'Footer',
+    styles: {
+        gridArea: 'footer',
+        display: 'block',
+        flow: 'column',
+    },
+    props: {
+        'data-id': 'Footer',
+    },
+});
+export const Footer = forwardRef((props, ref) => {
+    props = useSlotProps(props, 'footer');
+    const styles = extractStyles(props, STYLE_LIST);
+    return (_jsx(RawFooter, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/es/components/content/Header.js

@@ -0,0 +1,32 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { styled } from '../../styled';
+import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+import { useSlotProps } from '../../utils/react';
+const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
+const RawHeader = styled({
+    name: 'Header',
+    tag: 'header',
+    props: { 'data-id': 'Header' },
+    styles: {
+        display: 'block',
+        gridArea: 'header',
+        flow: 'column',
+    },
+});
+export const Header = forwardRef((props, ref) => {
+    props = useSlotProps(props, 'header');
+    const styles = extractStyles(props, STYLE_LIST);
+    return (_jsx(RawHeader, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/es/components/content/Paragraph.js

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Text } from './Text';
+import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+const DEFAULT_STYLES = {
+    preset: 'p3',
+    color: '#dark.75',
+    display: 'block',
+};
+const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
+export const Paragraph = forwardRef((props, ref) => {
+    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
+    return _jsx(Text, { as: "p", qa: "Paragraph", ...props, styles: styles, ref: ref }, void 0);
+});
+
+        

package/es/components/content/Placeholder/Placeholder.js

@@ -0,0 +1,48 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Base } from '../../Base';
+import { CONTAINER_STYLES } from '../../../styles/list';
+import { extractStyles } from '../../../utils/styles';
+import { filterBaseProps } from '../../../utils/filterBaseProps';
+const DEFAULT_STYLES = {
+    display: 'block',
+    fill: '#dark.10',
+    height: '2x',
+    opacity: '.35',
+};
+const CSS = `
+  --placeholder-animation-time: 1.4s;
+  --placeholder-animation-size: calc((180rem + 100vw) / 3);
+  background-image: linear-gradient(135deg, rgba(var(--dark-color-rgb), .15) 0%, rgba(var(--dark-color-rgb), .15) 5%, rgba(var(--dark-color-rgb), 0) 35%, rgba(var(--dark-03-color-rgb), .2) 50%, rgba(var(--dark-03-color-rgb), 0) 65%, rgba(var(--dark-color-rgb), .15) 95%, rgba(var(--dark-color-rgb), .15) 100%);
+  background-repeat: repeat;
+  background-size: var(--placeholder-animation-size);
+  animation: placeholder-animation var(--placeholder-animation-time) linear infinite;
+
+  @keyframes placeholder-animation {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: var(--placeholder-animation-size) 0;
+    }
+  }
+`;
+export const Placeholder = forwardRef((allProps, ref) => {
+    let { size = '2x', circle, ...props } = allProps;
+    const styles = extractStyles(props, CONTAINER_STYLES, {
+        ...DEFAULT_STYLES,
+        height: size,
+        width: circle ? size : false,
+        radius: circle ? '9999rem' : '1r',
+    });
+    return (_jsx(Base, { role: "region", css: CSS, ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/es/components/content/PrismCode/PrismCode.js

@@ -0,0 +1,38 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import Prism from 'prismjs';
+import { styled } from '../../../styled';
+import { CONTAINER_STYLES } from '../../../styles/list';
+const RawPre = styled({
+    name: 'CodeBlock',
+    tag: 'pre',
+    styleProps: CONTAINER_STYLES.concat([]),
+    props: { className: 'cube-prism-code' },
+    styles: {
+        margin: 0,
+        Code: {
+            display: 'block',
+        },
+    },
+});
+function PrismCode(props, ref) {
+    let { code, language = 'javascript', ...otherProps } = props;
+    useEffect(() => {
+        Prism.highlightAll();
+    });
+    return (_jsx(RawPre, { ref: ref, className: "cube-prism-code", ...otherProps, children: _jsx("code", { "data-element": "Code", className: `language-${language}`, children: code }, void 0) }, void 0));
+}
+/**
+ * Code block with syntax highlighting
+ */
+const _PrismCode = forwardRef(PrismCode);
+export { _PrismCode as PrismCode };
+
+        

package/es/components/content/Result/Result.js

@@ -0,0 +1,102 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { CheckCircleFilled, CloseCircleFilled, InfoCircleFilled, WarningFilled, } from '@ant-design/icons';
+import { Title } from '../Title';
+import { styled } from '../../../styled';
+import { CONTAINER_STYLES } from '../../../styles/list';
+import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { extractStyles } from '../../../utils/styles';
+import { wrapNodeIfPlain } from '../../../utils/react';
+const Container = styled({
+    name: 'ResultContainer',
+    tag: 'section',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        placeItems: 'center',
+        gap: '3x',
+        padding: '6x 4x',
+        textAlign: 'center',
+        Content: {
+            display: 'block',
+        },
+        Title: {
+            display: 'flex',
+            flow: 'column',
+            placeItems: 'inherit',
+            gap: '1x',
+        },
+    },
+});
+const IconWrapper = styled({
+    styles: {
+        fontSize: '10x',
+    },
+});
+const statusIconMap = {
+    success: {
+        color: '#success',
+        component: CheckCircleFilled,
+    },
+    error: {
+        color: '#danger',
+        component: CloseCircleFilled,
+    },
+    info: {
+        color: '#purple',
+        component: InfoCircleFilled,
+    },
+    warning: {
+        color: '#note',
+        component: WarningFilled,
+    },
+    404: {
+        color: '#purple',
+        component: () => {
+            // TODO: Needs to be implemented in the future
+            return null;
+        },
+    },
+    403: {
+        color: '#purple',
+        component: () => {
+            // TODO: Needs to be implemented in the future
+            return null;
+        },
+    },
+    500: {
+        color: '#purple',
+        component: () => {
+            // TODO: Needs to be implemented in the future
+            return null;
+        },
+    },
+};
+function Result(props, ref) {
+    const { children, icon, status, subTitle, title, ...otherProps } = props;
+    if (icon && status) {
+        console.warn('Don\'t use "icon" and "status" together, it can lead to possible errors.');
+    }
+    const iconNode = useMemo(() => {
+        if (icon) {
+            return icon;
+        }
+        const { color, component: Component } = status && statusIconMap.hasOwnProperty(status)
+            ? statusIconMap[status]
+            : statusIconMap.info;
+        return (_jsx(IconWrapper, { "data-element": "IconWrapper", styles: { color }, children: _jsx(Component, { "data-element": "Icon" }, void 0) }, void 0));
+    }, [icon, status]);
+    const styles = extractStyles(otherProps, CONTAINER_STYLES);
+    return (_jsxs(Container, { ...filterBaseProps(otherProps, { eventProps: true }), ref: ref, styles: styles, children: [iconNode, (title || subTitle) && (_jsxs("div", { "data-element": "Title", children: [wrapNodeIfPlain(title, () => (_jsx(Title, { level: 2, preset: "h4", children: title }, void 0))), wrapNodeIfPlain(subTitle, () => (_jsx(Title, { level: 3, preset: "h5m", children: subTitle }, void 0)))] }, void 0)), children && _jsx("div", { "data-element": "Content", children: children }, void 0)] }, void 0));
+}
+const _Result = forwardRef(Result);
+export { _Result as Result };
+
+        

package/es/components/content/Skeleton/Skeleton.js

@@ -0,0 +1,75 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Placeholder } from '../Placeholder/Placeholder';
+import { Flow } from '../../layout/Flow';
+import { Space } from '../../layout/Space';
+import { Grid } from '../../layout/Grid';
+const LAYOUT_MAP = {
+    page({ lines, children, ...props }) {
+        return (_jsxs(Flow, { gap: "4x", ...props, children: [_jsxs(Space, { placeContent: "space-between", children: [_jsx(Placeholder, { width: "100px 25% 300px" }, void 0), _jsx(Placeholder, { width: "50px 10% 150px" }, void 0)] }, void 0), _jsx(Flow, { gap: "2x", children: children
+                        || Array(lines || 5)
+                            .fill(0)
+                            .map((item, i) => _jsx(Placeholder, {}, i)) }, void 0)] }, void 0));
+    },
+    content({ children, lines, ...props }) {
+        return (_jsx(Flow, { gap: "2x", ...props, children: children
+                || Array(lines || 5)
+                    .fill(0)
+                    .map((item, i) => _jsx(Placeholder, {}, i)) }, void 0));
+    },
+    topbar(props) {
+        return (_jsxs(Space, { gap: "4x", placeContent: "space-between", height: "6x", padding: "1x", border: "bottom", ...props, children: [_jsxs(Space, { children: [_jsx(Placeholder, { circle: true, size: "4x" }, void 0), _jsx(Placeholder, { width: "20x" }, void 0)] }, void 0), _jsxs(Space, { children: [_jsx(Placeholder, { width: "10x" }, void 0), _jsx(Placeholder, { circle: true, size: "4x" }, void 0)] }, void 0)] }, void 0));
+    },
+    menu({ lines, ...props }) {
+        return (_jsx(Flow, { gap: "3.25x", ...props, padding: "3x 1x", children: Array(lines || 5)
+                .fill(0)
+                .map((item, i) => (_jsx(Placeholder, {}, i))) }, void 0));
+    },
+    stats({ cards, ...props }) {
+        return (_jsx(Space, { gap: "4x", ...props, children: Array(cards || 3)
+                .fill(0)
+                .map((item, i) => (_jsx(Placeholder, { radius: "1x", width: "20x", height: "12x", flexGrow: 1 }, i))) }, void 0));
+    },
+    tabs({ tabs, children, lines, ...props }) {
+        return (_jsxs(Flow, { gap: "4x", ...props, children: [_jsx(Space, { children: Array(tabs || 3)
+                        .fill(0)
+                        .map((item, i) => (_jsx(Placeholder, { width: "15x" }, i))) }, void 0), _jsx(Flow, { gap: "2x", children: children
+                        || Array(lines || 5)
+                            .fill(0)
+                            .map((item, i) => _jsx(Placeholder, {}, i)) }, void 0)] }, void 0));
+    },
+    table({ rows, columns, ...props }) {
+        columns = columns || 5;
+        rows = rows || 5;
+        return (_jsx(Grid, { columns: `repeat(${columns}, 1fr)`, gap: "3x", ...props, padding: "1x 0", children: Array(rows)
+                .fill(0)
+                .map((item, i) => {
+                return Array(columns)
+                    .fill(0)
+                    .map((item, j) => {
+                    return (_jsx(Placeholder, { size: !i ? '3x' : '2x' }, `${i}.${j}`));
+                });
+            }) }, void 0));
+    },
+    chart({ columns, ...props }) {
+        columns = columns || 12;
+        const heightMap = [1, 4, 2, 5, 8, 9, 5, 3, 4, 2, 6, 7, 2];
+        return (_jsx(Grid, { columns: `repeat(${columns}, 1fr)`, gap: "3x", padding: "1x 0", placeItems: "end stretch", height: "40x", ...props, children: Array(columns)
+                .fill(0)
+                .map((item, i) => {
+                return (_jsx(Placeholder, { height: `${heightMap[i % 12] * 10}%`, width: "max 6x" }, i));
+            }) }, void 0));
+    },
+};
+export function Skeleton({ layout, ...props }) {
+    layout = layout || 'page';
+    return LAYOUT_MAP[layout] ? (LAYOUT_MAP[layout]({ ...props, qa: 'Skeleton' })) : (_jsx(Placeholder, { ...props }, void 0));
+}
+
+        

package/es/components/content/Tag/Tag.js

@@ -0,0 +1,88 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import THEMES from '../../../data/themes';
+import { CONTAINER_STYLES } from '../../../styles/list';
+import { extractStyles } from '../../../utils/styles';
+import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { Action } from '../../actions/Action';
+import { Suffix } from '../../layout/Suffix';
+import { Block } from '../../Block';
+import { CloseOutlined } from '@ant-design/icons';
+import { styled } from '../../../styled';
+const RawTag = styled({
+    name: 'Tag',
+    styles: {
+        position: 'relative',
+        display: 'inline-flex',
+        placeContent: 'center start',
+        placeItems: 'center start',
+        radius: '1r',
+        preset: 't4m',
+        width: '16px max-content max-content',
+        height: 'min-content',
+        textAlign: 'left',
+        whiteSpace: 'nowrap',
+        padding: {
+            '': '0 (1x - 1bw)',
+            closable: '0 (2.5x - 1bw) 0 (1x - 1bw)',
+        },
+        fill: {
+            '': '#dark.04',
+            ...Object.keys(THEMES).reduce((map, type) => {
+                map[`[data-type="${type}"]`] = THEMES[type].fill;
+                return map;
+            }, {}),
+        },
+        color: {
+            '': '#dark.65',
+            ...Object.keys(THEMES).reduce((map, type) => {
+                map[`[data-type="${type}"]`] = THEMES[type].color;
+                return map;
+            }, {}),
+        },
+        border: {
+            '': true,
+            ...Object.keys(THEMES).reduce((map, type) => {
+                map[`[data-type="${type}"]`] = THEMES[type].border;
+                return map;
+            }, {}),
+        },
+    },
+    props: { role: 'status' },
+});
+const DEFAULT_CONTENT_STYLES = {
+    width: 'max 100%',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    pointerEvents: 'none',
+};
+const DEFAULT_CLOSE_STYLES = {
+    display: 'grid',
+    placeItems: 'center',
+    color: true,
+    placeSelf: 'center',
+    opacity: {
+        '': 0.85,
+        'pressed | hovered': 1,
+    },
+    transition: 'opacity',
+    padding: '0 .5x',
+};
+const Tag = (allProps, ref) => {
+    let { type, isClosable, onClose, children, ...props } = allProps;
+    const styles = extractStyles(props, CONTAINER_STYLES);
+    return (_jsxs(RawTag, { ...filterBaseProps(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [_jsx(Block, { mods: { closable: isClosable }, styles: DEFAULT_CONTENT_STYLES, children: children }, void 0), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(Action, { onPress: onClose, styles: DEFAULT_CLOSE_STYLES, label: "Close", children: _jsx(CloseOutlined, { style: {
+                            fontSize: 'calc(var(--font-size) - (var(--border-width) * 2))',
+                        } }, void 0) }, void 0) }, void 0)) : undefined] }, void 0));
+};
+const _Tag = forwardRef(Tag);
+export { _Tag as Tag };
+
+        

package/es/components/content/Text.js

@@ -0,0 +1,78 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES } from '../../styles/list';
+import { extractStyles } from '../../utils/styles';
+import { filterBaseProps } from '../../utils/filterBaseProps';
+import { styled } from '../../styled';
+const STYLE_LIST = [...BASE_STYLES, ...TEXT_STYLES, ...COLOR_STYLES];
+const DEFAULT_STYLES = {
+    display: {
+        '': 'inline',
+        ellipsis: 'block',
+    },
+    margin: '0',
+    whiteSpace: {
+        '': 'inherit',
+        'nowrap | ellipsis': 'nowrap',
+    },
+    textOverflow: {
+        '': false,
+        ellipsis: 'ellipsis',
+    },
+    overflow: {
+        '': false,
+        ellipsis: 'hidden',
+    },
+    width: {
+        '': false,
+        ellipsis: 'max 100%',
+    },
+};
+export const TEXT_PROP_MAP = {
+    transform: 'textTransform',
+    weight: 'fontWeight',
+    italic: 'fontStyle',
+};
+const RawText = styled({
+    name: 'Text',
+    tag: 'span',
+    styles: DEFAULT_STYLES,
+});
+const _Text = forwardRef((allProps, ref) => {
+    let { as, qa, block, styleName, ellipsis, css, nowrap, ...props } = allProps;
+    const styles = extractStyles(props, STYLE_LIST, {}, TEXT_PROP_MAP);
+    return (_jsx(RawText, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
+            nowrap,
+            ellipsis,
+        }, block: !!(block || ellipsis), css: css, ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+const Text = Object.assign(_Text, {
+    Minor: forwardRef(function MinorText(props, ref) {
+        return _jsx(Text, { ref: ref, color: "#minor", ...props }, void 0);
+    }),
+    Danger: forwardRef(function DangerText(props, ref) {
+        return _jsx(Text, { role: "alert", ref: ref, color: "#danger-text", ...props }, void 0);
+    }),
+    Success: forwardRef(function SuccessText(props, ref) {
+        return _jsx(Text, { ref: ref, color: "#success-text", ...props }, void 0);
+    }),
+    Strong: forwardRef(function StrongText(props, ref) {
+        return (_jsx(Text, { as: "strong", preset: "strong", ref: ref, color: "#dark", ...props }, void 0));
+    }),
+    Emphasis: forwardRef(function EmphasisText(props, ref) {
+        return _jsx(Text, { as: "em", preset: "em", ref: ref, ...props }, void 0);
+    }),
+    Selection: forwardRef(function SelectionText(props, ref) {
+        return _jsx(Text, { ref: ref, color: "#dark", fill: "#note.30", ...props }, void 0);
+    }),
+});
+export { Text };
+
+