@cube-dev/ui-kit 0.9.4 → 0.9.7

package/cjs/components/content/Card/Card.js

@@ -0,0 +1,31 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Base_1 = require("../../Base");
+const list_1 = require("../../../styles/list");
+const styles_1 = require("../../../utils/styles");
+const filterBaseProps_1 = require("../../../utils/filterBaseProps");
+const DEFAULT_STYLES = {
+    display: 'block',
+    flow: 'column',
+    radius: '1r',
+    fill: '#white',
+    border: true,
+    padding: '1.5x',
+    preset: 't3',
+};
+exports.Card = (0, react_1.forwardRef)((props, ref) => {
+    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, DEFAULT_STYLES);
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { role: "region", ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/cjs/components/content/Content.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_1 = require("../../styled");
+const list_1 = require("../../styles/list");
+const styles_1 = require("../../utils/styles");
+const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const react_2 = require("../../utils/react");
+const STYLE_LIST = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
+const RawContent = (0, styled_1.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',
+    },
+});
+exports.Content = (0, react_1.forwardRef)((props, ref) => {
+    props = (0, react_2.useSlotProps)(props, 'content');
+    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST);
+    return ((0, jsx_runtime_1.jsx)(RawContent, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/cjs/components/content/Divider.js

@@ -0,0 +1,53 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Base_1 = require("../Base");
+const list_1 = require("../../styles/list");
+const styles_1 = require("../../utils/styles");
+const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const react_2 = require("../../utils/react");
+const STYLE_LIST = [...list_1.OUTER_STYLES, ...list_1.BASE_STYLES, ...list_1.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',
+    },
+};
+exports.Divider = (0, react_1.forwardRef)((props, ref) => {
+    const { mods, children, ...otherProps } = (0, react_2.useSlotProps)(props, 'divider');
+    const styles = (0, styles_1.extractStyles)(otherProps, STYLE_LIST, DEFAULT_STYLES);
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { as: children ? 'div' : 'hr', role: children ? 'separator' : undefined, mods: {
+            text: !!children,
+            ...mods,
+        }, "data-id": "Divider", ...(0, filterBaseProps_1.filterBaseProps)(otherProps, { eventProps: true }), styles: styles, ref: ref, children: children && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Line" }, void 0), (0, jsx_runtime_1.jsx)("div", { children: children }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-element": "Line" }, void 0)] }, void 0)) }, void 0));
+});
+
+        

package/cjs/components/content/Footer.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const list_1 = require("../../styles/list");
+const styles_1 = require("../../utils/styles");
+const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const react_2 = require("../../utils/react");
+const styled_1 = require("../../styled");
+const STYLE_LIST = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
+const RawFooter = (0, styled_1.styled)({
+    name: 'Footer',
+    styles: {
+        gridArea: 'footer',
+        display: 'block',
+        flow: 'column',
+    },
+    props: {
+        'data-id': 'Footer',
+    },
+});
+exports.Footer = (0, react_1.forwardRef)((props, ref) => {
+    props = (0, react_2.useSlotProps)(props, 'footer');
+    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST);
+    return ((0, jsx_runtime_1.jsx)(RawFooter, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/cjs/components/content/Header.js

@@ -0,0 +1,35 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_1 = require("../../styled");
+const list_1 = require("../../styles/list");
+const styles_1 = require("../../utils/styles");
+const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const react_2 = require("../../utils/react");
+const STYLE_LIST = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
+const RawHeader = (0, styled_1.styled)({
+    name: 'Header',
+    tag: 'header',
+    props: { 'data-id': 'Header' },
+    styles: {
+        display: 'block',
+        gridArea: 'header',
+        flow: 'column',
+    },
+});
+exports.Header = (0, react_1.forwardRef)((props, ref) => {
+    props = (0, react_2.useSlotProps)(props, 'header');
+    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST);
+    return ((0, jsx_runtime_1.jsx)(RawHeader, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/cjs/components/content/Paragraph.js

@@ -0,0 +1,27 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Paragraph = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Text_1 = require("./Text");
+const list_1 = require("../../styles/list");
+const styles_1 = require("../../utils/styles");
+const DEFAULT_STYLES = {
+    preset: 'p3',
+    color: '#dark.75',
+    display: 'block',
+};
+const STYLE_PROPS = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
+exports.Paragraph = (0, react_1.forwardRef)((props, ref) => {
+    const styles = (0, styles_1.extractStyles)(props, STYLE_PROPS, DEFAULT_STYLES);
+    return (0, jsx_runtime_1.jsx)(Text_1.Text, { as: "p", qa: "Paragraph", ...props, styles: styles, ref: ref }, void 0);
+});
+
+        

package/cjs/components/content/Placeholder/Placeholder.js

@@ -0,0 +1,51 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Base_1 = require("../../Base");
+const list_1 = require("../../../styles/list");
+const styles_1 = require("../../../utils/styles");
+const filterBaseProps_1 = require("../../../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;
+    }
+  }
+`;
+exports.Placeholder = (0, react_1.forwardRef)((allProps, ref) => {
+    let { size = '2x', circle, ...props } = allProps;
+    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, {
+        ...DEFAULT_STYLES,
+        height: size,
+        width: circle ? size : false,
+        radius: circle ? '9999rem' : '1r',
+    });
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { role: "region", css: CSS, ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/cjs/components/content/PrismCode/PrismCode.js

@@ -0,0 +1,44 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrismCode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const prismjs_1 = __importDefault(require("prismjs"));
+const styled_1 = require("../../../styled");
+const list_1 = require("../../../styles/list");
+const RawPre = (0, styled_1.styled)({
+    name: 'CodeBlock',
+    tag: 'pre',
+    styleProps: list_1.CONTAINER_STYLES.concat([]),
+    props: { className: 'cube-prism-code' },
+    styles: {
+        margin: 0,
+        Code: {
+            display: 'block',
+        },
+    },
+});
+function PrismCode(props, ref) {
+    let { code, language = 'javascript', ...otherProps } = props;
+    (0, react_1.useEffect)(() => {
+        prismjs_1.default.highlightAll();
+    });
+    return ((0, jsx_runtime_1.jsx)(RawPre, { ref: ref, className: "cube-prism-code", ...otherProps, children: (0, jsx_runtime_1.jsx)("code", { "data-element": "Code", className: `language-${language}`, children: code }, void 0) }, void 0));
+}
+/**
+ * Code block with syntax highlighting
+ */
+const _PrismCode = (0, react_1.forwardRef)(PrismCode);
+exports.PrismCode = _PrismCode;
+
+        

package/cjs/components/content/Result/Result.js

@@ -0,0 +1,105 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Result = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@ant-design/icons");
+const Title_1 = require("../Title");
+const styled_1 = require("../../../styled");
+const list_1 = require("../../../styles/list");
+const filterBaseProps_1 = require("../../../utils/filterBaseProps");
+const styles_1 = require("../../../utils/styles");
+const react_2 = require("../../../utils/react");
+const Container = (0, styled_1.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 = (0, styled_1.styled)({
+    styles: {
+        fontSize: '10x',
+    },
+});
+const statusIconMap = {
+    success: {
+        color: '#success',
+        component: icons_1.CheckCircleFilled,
+    },
+    error: {
+        color: '#danger',
+        component: icons_1.CloseCircleFilled,
+    },
+    info: {
+        color: '#purple',
+        component: icons_1.InfoCircleFilled,
+    },
+    warning: {
+        color: '#note',
+        component: icons_1.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 = (0, react_1.useMemo)(() => {
+        if (icon) {
+            return icon;
+        }
+        const { color, component: Component } = status && statusIconMap.hasOwnProperty(status)
+            ? statusIconMap[status]
+            : statusIconMap.info;
+        return ((0, jsx_runtime_1.jsx)(IconWrapper, { "data-element": "IconWrapper", styles: { color }, children: (0, jsx_runtime_1.jsx)(Component, { "data-element": "Icon" }, void 0) }, void 0));
+    }, [icon, status]);
+    const styles = (0, styles_1.extractStyles)(otherProps, list_1.CONTAINER_STYLES);
+    return ((0, jsx_runtime_1.jsxs)(Container, { ...(0, filterBaseProps_1.filterBaseProps)(otherProps, { eventProps: true }), ref: ref, styles: styles, children: [iconNode, (title || subTitle) && ((0, jsx_runtime_1.jsxs)("div", { "data-element": "Title", children: [(0, react_2.wrapNodeIfPlain)(title, () => ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 2, preset: "h4", children: title }, void 0))), (0, react_2.wrapNodeIfPlain)(subTitle, () => ((0, jsx_runtime_1.jsx)(Title_1.Title, { level: 3, preset: "h5m", children: subTitle }, void 0)))] }, void 0)), children && (0, jsx_runtime_1.jsx)("div", { "data-element": "Content", children: children }, void 0)] }, void 0));
+}
+const _Result = (0, react_1.forwardRef)(Result);
+exports.Result = _Result;
+
+        

package/cjs/components/content/Skeleton/Skeleton.js

@@ -0,0 +1,79 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Placeholder_1 = require("../Placeholder/Placeholder");
+const Flow_1 = require("../../layout/Flow");
+const Space_1 = require("../../layout/Space");
+const Grid_1 = require("../../layout/Grid");
+const LAYOUT_MAP = {
+    page({ lines, children, ...props }) {
+        return ((0, jsx_runtime_1.jsxs)(Flow_1.Flow, { gap: "4x", ...props, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { placeContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "100px 25% 300px" }, void 0), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "50px 10% 150px" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", children: children
+                        || Array(lines || 5)
+                            .fill(0)
+                            .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) }, void 0)] }, void 0));
+    },
+    content({ children, lines, ...props }) {
+        return ((0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", ...props, children: children
+                || Array(lines || 5)
+                    .fill(0)
+                    .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) }, void 0));
+    },
+    topbar(props) {
+        return ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "4x", placeContent: "space-between", height: "6x", padding: "1x", border: "bottom", ...props, children: [(0, jsx_runtime_1.jsxs)(Space_1.Space, { children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { circle: true, size: "4x" }, void 0), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "20x" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(Space_1.Space, { children: [(0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "10x" }, void 0), (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { circle: true, size: "4x" }, void 0)] }, void 0)] }, void 0));
+    },
+    menu({ lines, ...props }) {
+        return ((0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "3.25x", ...props, padding: "3x 1x", children: Array(lines || 5)
+                .fill(0)
+                .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i))) }, void 0));
+    },
+    stats({ cards, ...props }) {
+        return ((0, jsx_runtime_1.jsx)(Space_1.Space, { gap: "4x", ...props, children: Array(cards || 3)
+                .fill(0)
+                .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { radius: "1x", width: "20x", height: "12x", flexGrow: 1 }, i))) }, void 0));
+    },
+    tabs({ tabs, children, lines, ...props }) {
+        return ((0, jsx_runtime_1.jsxs)(Flow_1.Flow, { gap: "4x", ...props, children: [(0, jsx_runtime_1.jsx)(Space_1.Space, { children: Array(tabs || 3)
+                        .fill(0)
+                        .map((item, i) => ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { width: "15x" }, i))) }, void 0), (0, jsx_runtime_1.jsx)(Flow_1.Flow, { gap: "2x", children: children
+                        || Array(lines || 5)
+                            .fill(0)
+                            .map((item, i) => (0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, {}, i)) }, void 0)] }, void 0));
+    },
+    table({ rows, columns, ...props }) {
+        columns = columns || 5;
+        rows = rows || 5;
+        return ((0, jsx_runtime_1.jsx)(Grid_1.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 ((0, jsx_runtime_1.jsx)(Placeholder_1.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 ((0, jsx_runtime_1.jsx)(Grid_1.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 ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { height: `${heightMap[i % 12] * 10}%`, width: "max 6x" }, i));
+            }) }, void 0));
+    },
+};
+function Skeleton({ layout, ...props }) {
+    layout = layout || 'page';
+    return LAYOUT_MAP[layout] ? (LAYOUT_MAP[layout]({ ...props, qa: 'Skeleton' })) : ((0, jsx_runtime_1.jsx)(Placeholder_1.Placeholder, { ...props }, void 0));
+}
+exports.Skeleton = Skeleton;
+
+        

package/cjs/components/content/Tag/Tag.js

@@ -0,0 +1,94 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const themes_1 = __importDefault(require("../../../data/themes"));
+const list_1 = require("../../../styles/list");
+const styles_1 = require("../../../utils/styles");
+const filterBaseProps_1 = require("../../../utils/filterBaseProps");
+const Action_1 = require("../../actions/Action");
+const Suffix_1 = require("../../layout/Suffix");
+const Block_1 = require("../../Block");
+const icons_1 = require("@ant-design/icons");
+const styled_1 = require("../../../styled");
+const RawTag = (0, styled_1.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_1.default).reduce((map, type) => {
+                map[`[data-type="${type}"]`] = themes_1.default[type].fill;
+                return map;
+            }, {}),
+        },
+        color: {
+            '': '#dark.65',
+            ...Object.keys(themes_1.default).reduce((map, type) => {
+                map[`[data-type="${type}"]`] = themes_1.default[type].color;
+                return map;
+            }, {}),
+        },
+        border: {
+            '': true,
+            ...Object.keys(themes_1.default).reduce((map, type) => {
+                map[`[data-type="${type}"]`] = themes_1.default[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 = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES);
+    return ((0, jsx_runtime_1.jsxs)(RawTag, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { mods: { closable: isClosable }, styles: DEFAULT_CONTENT_STYLES, children: children }, void 0), isClosable ? ((0, jsx_runtime_1.jsx)(Suffix_1.Suffix, { outerGap: "0", children: (0, jsx_runtime_1.jsx)(Action_1.Action, { onPress: onClose, styles: DEFAULT_CLOSE_STYLES, label: "Close", children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, { style: {
+                            fontSize: 'calc(var(--font-size) - (var(--border-width) * 2))',
+                        } }, void 0) }, void 0) }, void 0)) : undefined] }, void 0));
+};
+const _Tag = (0, react_1.forwardRef)(Tag);
+exports.Tag = _Tag;
+
+