@uzum-tech/ui 2.0.0-beta.3 → 2.0.0-beta.5

package/lib/mapping-card/src/MappingCard.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+const injection_1 = require("./injection");
+const interface_1 = require("./interface");
+const Body_1 = __importDefault(require("./MappingCardParts/Body"));
+const Header_1 = __importDefault(require("./MappingCardParts/Header"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+exports.default = (0, vue_1.defineComponent)({
+    name: 'MappingCard',
+    props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), interface_1.mappingCardProps),
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const { localeRef } = (0, _mixins_1.useLocale)('MappingCard');
+        const themeRef = (0, _mixins_1.useTheme)('MappingCard', '-mapping-card', index_cssr_1.default, styles_1.mappingCardLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { backgroundColor, borderColor, borderRadius, headerPadding, bodyPadding, titleColor, descriptionColor, dividerBackgroundColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-background-color': backgroundColor,
+                '--u-border-color': borderColor,
+                '--u-border-radius': borderRadius,
+                '--u-header-padding': headerPadding,
+                '--u-body-padding': bodyPadding,
+                '--u-title-color': titleColor,
+                '--u-description-color': descriptionColor,
+                '--u-divider-background-color': dividerBackgroundColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('mapping-card', undefined, cssVarsRef, props)
+            : undefined;
+        (0, vue_1.provide)(injection_1.mappingCardInjectionKey, {
+            mergedClsPrefixRef,
+            mergedThemeRef: themeRef,
+            localeRef,
+            props
+        });
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        const { cssVars, themeClass, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return ((0, vue_1.h)("div", { class: [`${this.mergedClsPrefix}-mapping-card`, themeClass], style: cssVars },
+            (0, vue_1.h)(Header_1.default, null, { headerActions: this.$slots.headerActions }),
+            (0, vue_1.h)(Body_1.default, null)));
+    }
+});

package/lib/mapping-card/src/MappingCardList.d.ts

@@ -0,0 +1,36 @@
+import type { PaginationProps } from '../../pagination';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly items: {
+        readonly type: import("vue").PropType<import("./interface").MappingCardProps[]>;
+        readonly default: () => never[];
+    };
+    readonly pagination: {
+        readonly type: import("vue").PropType<PaginationProps | false>;
+        readonly default: false;
+    };
+    readonly gap: {
+        readonly type: NumberConstructor;
+        readonly default: 16;
+    };
+}>, {
+    mergedClsPrefix: import("vue").Ref<string, string>;
+    mergedPagination: import("vue").ComputedRef<PaginationProps | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly items: {
+        readonly type: import("vue").PropType<import("./interface").MappingCardProps[]>;
+        readonly default: () => never[];
+    };
+    readonly pagination: {
+        readonly type: import("vue").PropType<PaginationProps | false>;
+        readonly default: false;
+    };
+    readonly gap: {
+        readonly type: NumberConstructor;
+        readonly default: 16;
+    };
+}>> & Readonly<{}>, {
+    readonly gap: number;
+    readonly items: import("./interface").MappingCardProps[];
+    readonly pagination: false | PaginationProps;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/mapping-card/src/MappingCardList.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const flex_1 = require("../../flex");
+const pagination_1 = require("../../pagination");
+const interface_1 = require("./interface");
+const MappingCard_1 = __importDefault(require("./MappingCard"));
+exports.default = (0, vue_1.defineComponent)({
+    name: 'MappingCardList',
+    props: interface_1.mappingCardListProps,
+    setup(props) {
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const mergedPaginationRef = (0, vue_1.computed)(() => {
+            const { pagination } = props;
+            if (pagination === false)
+                return null;
+            return pagination;
+        });
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedPagination: mergedPaginationRef
+        };
+    },
+    render() {
+        const { mergedClsPrefix, mergedPagination, gap, items } = this;
+        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-mapping-card-list` },
+            (0, vue_1.h)(flex_1.UFlex, { vertical: true, size: gap, class: `${mergedClsPrefix}-mapping-card-list__items` }, {
+                default: () => items.map((item, index) => (0, vue_1.h)(MappingCard_1.default, Object.assign({ key: index }, item)))
+            }),
+            mergedPagination ? ((0, vue_1.h)(flex_1.UFlex, { justify: "flex-end", class: `${mergedClsPrefix}-mapping-card-list__pagination` }, {
+                default: () => (0, vue_1.h)(pagination_1.UPagination, Object.assign({}, mergedPagination))
+            })) : null));
+    }
+});

package/lib/mapping-card/src/MappingCardParts/Body.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    injection: import("../injection").MappingCardInjection;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/mapping-card/src/MappingCardParts/Body.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const component_renderer_1 = require("../../../_internal/component-renderer");
+const grid_1 = require("../../../grid");
+const list_1 = require("../../../list");
+const injection_1 = require("../injection");
+exports.default = (0, vue_1.defineComponent)({
+    name: 'MappingCardBody',
+    setup() {
+        const injection = (0, vue_1.inject)(injection_1.mappingCardInjectionKey);
+        return { injection };
+    },
+    render() {
+        var _a;
+        const { injection } = this;
+        const { mergedClsPrefixRef, props } = injection;
+        const prefix = mergedClsPrefixRef.value;
+        const rows = (_a = props.rows) !== null && _a !== void 0 ? _a : [];
+        const renderRowItem = (item, index) => {
+            var _a, _b;
+            const span = (_b = (_a = item.span) !== null && _a !== void 0 ? _a : props.defaultSpan) !== null && _b !== void 0 ? _b : 1;
+            return ((0, vue_1.h)("div", { key: index, class: [
+                    `${prefix}-mapping-card__body-item`,
+                    item.type && `${prefix}-mapping-card__body-item--${item.type}`
+                ], style: { gridColumn: `span ${span}` } }, item.render
+                ? item.render()
+                : (0, component_renderer_1.renderConfig)({
+                    type: item.type,
+                    params: item.params,
+                    slots: item.slots
+                })));
+        };
+        return ((0, vue_1.h)("div", { class: `${prefix}-mapping-card__body` }, rows.map((group, index) => {
+            var _a;
+            return ((0, vue_1.h)("div", { key: (_a = group.id) !== null && _a !== void 0 ? _a : index, class: `${prefix}-mapping-card__body-group` },
+                (0, vue_1.h)(list_1.UList, { showDivider: false, showIcon: false }, {
+                    default: () => {
+                        var _a;
+                        return ((0, vue_1.h)(grid_1.UGrid, { cols: (_a = props.cols) !== null && _a !== void 0 ? _a : 3, layoutShiftDisabled: true, class: `${prefix}-mapping-card__body-items` }, {
+                            default: () => group.items.map(renderRowItem)
+                        }));
+                    }
+                }),
+                group.icon && ((0, vue_1.h)("div", { class: `${prefix}-mapping-card__body-group-icon` }, group.icon()))));
+        })));
+    }
+});

package/lib/mapping-card/src/MappingCardParts/Header.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    injection: import("../injection").MappingCardInjection;
+    slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/mapping-card/src/MappingCardParts/Header.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const icons_1 = require("../../../_internal/icons");
+const _utils_1 = require("../../../_utils");
+const button_1 = require("../../../button");
+const flex_1 = require("../../../flex");
+const icon_1 = require("../../../icon");
+const switch_1 = require("../../../switch");
+const tooltip_1 = require("../../../tooltip");
+const injection_1 = require("../injection");
+exports.default = (0, vue_1.defineComponent)({
+    name: 'MappingCardHeader',
+    setup(_, { slots }) {
+        const injection = (0, vue_1.inject)(injection_1.mappingCardInjectionKey);
+        return { injection, slots };
+    },
+    render() {
+        const { injection, slots } = this;
+        const { mergedClsPrefixRef, mergedThemeRef, localeRef, props } = injection;
+        const prefix = mergedClsPrefixRef.value;
+        const theme = mergedThemeRef.value;
+        const locale = localeRef.value;
+        const renderTextProp = (value) => typeof value === 'function' ? value() : value;
+        return ((0, vue_1.h)("div", { class: `${prefix}-mapping-card__header` },
+            (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${prefix}-mapping-card__header-info` }, {
+                default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                    (0, vue_1.h)("div", { class: `${prefix}-mapping-card__header-info-text` },
+                        (0, vue_1.h)("div", { class: `${prefix}-mapping-card__header-title` }, renderTextProp(props.title)),
+                        props.description && ((0, vue_1.h)("div", { class: `${prefix}-mapping-card__header-description` }, renderTextProp(props.description)))),
+                    !props.hideCopy && ((0, vue_1.h)(tooltip_1.UTooltip, null, {
+                        trigger: () => {
+                            var _a;
+                            return ((0, vue_1.h)(button_1.UButton, Object.assign({ quaternary: true, circle: true }, ((_a = props.copyButtonProps) !== null && _a !== void 0 ? _a : {}), { theme: theme.peers.Button, themeOverrides: theme.peerOverrides.Button, onClick: () => { var _a; return (_a = props.onCopy) === null || _a === void 0 ? void 0 : _a.call(props); } }), {
+                                icon: () => {
+                                    var _a;
+                                    return ((0, vue_1.h)(icon_1.UIcon, Object.assign({}, ((_a = props.copyIconProps) !== null && _a !== void 0 ? _a : {}), { theme: theme.peers.CopyIcon, themeOverrides: theme.peerOverrides.CopyIcon }), { default: () => (0, vue_1.h)(icons_1.ContentCopy, null) }));
+                                }
+                            }));
+                        },
+                        default: () => locale.copyTooltip
+                    }))))
+            }),
+            (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small" }, {
+                default: () => (0, _utils_1.resolveSlot)(slots.headerActions, () => {
+                    var _a, _b;
+                    const buttons = [];
+                    buttons.push((0, vue_1.h)(tooltip_1.UTooltip, null, {
+                        trigger: () => {
+                            var _a;
+                            return ((0, vue_1.h)(switch_1.USwitch, Object.assign({}, ((_a = props.headerSwitchProps) !== null && _a !== void 0 ? _a : {}), { theme: theme.peers.Switch, themeOverrides: theme.peerOverrides.Switch, onUpdateValue: (val) => { var _a; return (_a = props.onSwitchChange) === null || _a === void 0 ? void 0 : _a.call(props, val); } })));
+                        },
+                        default: () => locale.switchTooltip
+                    }));
+                    buttons.push((0, vue_1.h)(button_1.UButton, Object.assign({ round: true, secondary: true, size: "small" }, ((_a = props.headerEditButtonProps) !== null && _a !== void 0 ? _a : {}), { theme: theme.peers.Button, themeOverrides: theme.peerOverrides.Button, onClick: () => { var _a; return (_a = props.onEdit) === null || _a === void 0 ? void 0 : _a.call(props); } }), {
+                        icon: () => {
+                            var _a;
+                            return ((0, vue_1.h)(icon_1.UIcon, Object.assign({}, ((_a = props.headerEditIconProps) !== null && _a !== void 0 ? _a : {}), { theme: theme.peers.EditIcon, themeOverrides: theme.peerOverrides.EditIcon }), {
+                                default: () => props.headerEditIcon ? (props.headerEditIcon()) : ((0, vue_1.h)(icons_1.EditIcon, null))
+                            }));
+                        },
+                        default: () => locale.editTooltip
+                    }));
+                    buttons.push((0, vue_1.h)(button_1.UButton, Object.assign({ round: true, tertiary: true, size: "small" }, ((_b = props.headerDeleteButtonProps) !== null && _b !== void 0 ? _b : {}), { theme: theme.peers.Button, themeOverrides: theme.peerOverrides.Button, onClick: () => { var _a; return (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props); } }), {
+                        icon: () => {
+                            var _a;
+                            return ((0, vue_1.h)(icon_1.UIcon, Object.assign({}, ((_a = props.headerDeleteIconProps) !== null && _a !== void 0 ? _a : {}), { theme: theme.peers.DeleteIcon, themeOverrides: theme.peerOverrides.DeleteIcon }), {
+                                default: () => props.headerDeleteIcon ? (props.headerDeleteIcon()) : ((0, vue_1.h)(icons_1.TrashIcon, null))
+                            }));
+                        },
+                        default: () => locale.deleteTooltip
+                    }));
+                    return buttons;
+                })
+            })));
+    }
+});

package/lib/mapping-card/src/injection.d.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import type { MergedTheme } from '../../_mixins';
+import type { MappingCardTheme } from '../styles';
+import type { MappingCardProps } from './interface';
+export interface MappingCardLocale {
+    copyTooltip: string;
+    editTooltip: string;
+    deleteTooltip: string;
+    switchTooltip: string;
+}
+export interface MappingCardInjection {
+    mergedClsPrefixRef: Ref<string>;
+    mergedThemeRef: Ref<MergedTheme<MappingCardTheme>>;
+    localeRef: Ref<MappingCardLocale>;
+    props: MappingCardProps;
+}
+export declare const mappingCardInjectionKey: import("vue").InjectionKey<MappingCardInjection>;

package/lib/mapping-card/src/injection.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mappingCardInjectionKey = void 0;
+const _utils_1 = require("../../_utils");
+exports.mappingCardInjectionKey = (0, _utils_1.createInjectionKey)('u-mapping-card');

package/lib/mapping-card/src/interface.d.ts

@@ -0,0 +1,105 @@
+import type { PropType, VNodeChild } from 'vue';
+import type { BuiltinType, BuiltinTypeMap, ComponentConfig } from '../../_internal/component-renderer';
+import type { ExtractPublicPropTypes } from '../../_utils';
+import type { ButtonProps } from '../../button';
+import type { IconProps } from '../../icon';
+import type { PaginationProps } from '../../pagination';
+import type { SwitchProps } from '../../switch';
+interface MappingRowItemBase {
+    span?: number;
+}
+type MappingRowItemTyped = {
+    [T in BuiltinType]: MappingRowItemBase & {
+        type: T;
+        params?: BuiltinTypeMap[T];
+        slots?: Record<string, ComponentConfig>;
+        render?: never;
+    };
+}[BuiltinType];
+type MappingRowItemCustom = MappingRowItemBase & {
+    type?: never;
+    params?: never;
+    slots?: never;
+    render: () => VNodeChild;
+};
+export type MappingRowItem = MappingRowItemTyped | MappingRowItemCustom;
+export interface MappingRow {
+    id?: string;
+    icon?: () => VNodeChild;
+    items: MappingRowItem[];
+}
+export interface MappingCardInterface {
+    title: string | (() => VNodeChild);
+    description: string | (() => VNodeChild);
+    rows: MappingRow[];
+    cols?: number;
+    defaultSpan?: number;
+    copy?: () => string;
+    hideCopy?: boolean;
+    copyButtonProps?: Partial<ButtonProps>;
+    copyIconProps?: Partial<IconProps>;
+    headerEditButtonProps?: Partial<ButtonProps>;
+    headerEditIconProps?: Partial<IconProps>;
+    headerEditIcon?: () => VNodeChild;
+    headerDeleteButtonProps?: Partial<ButtonProps>;
+    headerDeleteIconProps?: Partial<IconProps>;
+    headerDeleteIcon?: () => VNodeChild;
+    headerSwitchProps?: Partial<SwitchProps>;
+    onCopy?: () => void;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onSwitchChange?: (value: boolean) => void;
+}
+export interface MappingCardListInterface {
+    items?: MappingCardProps[];
+    pagination?: PaginationProps | false;
+    gap?: number;
+}
+export declare const mappingCardProps: {
+    readonly title: PropType<MappingCardInterface["title"]>;
+    readonly description: PropType<MappingCardInterface["description"]>;
+    readonly rows: PropType<MappingCardInterface["rows"]>;
+    readonly cols: {
+        readonly type: PropType<MappingCardInterface["cols"]>;
+        readonly default: 3;
+    };
+    readonly defaultSpan: {
+        readonly type: PropType<MappingCardInterface["defaultSpan"]>;
+        readonly default: 1;
+    };
+    readonly copy: PropType<MappingCardInterface["copy"]>;
+    readonly hideCopy: {
+        readonly type: PropType<MappingCardInterface["hideCopy"]>;
+        readonly default: false;
+    };
+    readonly copyButtonProps: PropType<MappingCardInterface["copyButtonProps"]>;
+    readonly copyIconProps: PropType<MappingCardInterface["copyIconProps"]>;
+    readonly headerEditButtonProps: PropType<MappingCardInterface["headerEditButtonProps"]>;
+    readonly headerEditIconProps: PropType<MappingCardInterface["headerEditIconProps"]>;
+    readonly headerEditIcon: PropType<MappingCardInterface["headerEditIcon"]>;
+    readonly headerDeleteButtonProps: PropType<MappingCardInterface["headerDeleteButtonProps"]>;
+    readonly headerDeleteIconProps: PropType<MappingCardInterface["headerDeleteIconProps"]>;
+    readonly headerDeleteIcon: PropType<MappingCardInterface["headerDeleteIcon"]>;
+    readonly headerSwitchProps: PropType<MappingCardInterface["headerSwitchProps"]>;
+    readonly onCopy: PropType<MappingCardInterface["onCopy"]>;
+    readonly onEdit: PropType<MappingCardInterface["onEdit"]>;
+    readonly onDelete: PropType<MappingCardInterface["onDelete"]>;
+    readonly onSwitchChange: PropType<MappingCardInterface["onSwitchChange"]>;
+};
+export declare const mappingCardListProps: {
+    readonly items: {
+        readonly type: PropType<MappingCardProps[]>;
+        readonly default: () => never[];
+    };
+    readonly pagination: {
+        readonly type: PropType<PaginationProps | false>;
+        readonly default: false;
+    };
+    readonly gap: {
+        readonly type: NumberConstructor;
+        readonly default: 16;
+    };
+};
+export type MappingCardProps = ExtractPublicPropTypes<typeof mappingCardProps>;
+export type MappingCardListProps = ExtractPublicPropTypes<typeof mappingCardListProps>;
+export {};

package/lib/mapping-card/src/interface.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mappingCardListProps = exports.mappingCardProps = void 0;
+exports.mappingCardProps = {
+    title: [String, Function],
+    description: [String, Function],
+    rows: Array,
+    cols: {
+        type: Number,
+        default: 3
+    },
+    defaultSpan: {
+        type: Number,
+        default: 1
+    },
+    copy: Function,
+    hideCopy: {
+        type: Boolean,
+        default: false
+    },
+    copyButtonProps: Object,
+    copyIconProps: Object,
+    headerEditButtonProps: Object,
+    headerEditIconProps: Object,
+    headerEditIcon: Function,
+    headerDeleteButtonProps: Object,
+    headerDeleteIconProps: Object,
+    headerDeleteIcon: Function,
+    headerSwitchProps: Object,
+    onCopy: Function,
+    onEdit: Function,
+    onDelete: Function,
+    onSwitchChange: Function
+};
+exports.mappingCardListProps = {
+    items: {
+        type: Array,
+        default: () => []
+    },
+    pagination: {
+        type: [Object, Boolean],
+        default: false
+    },
+    gap: {
+        type: Number,
+        default: 16
+    }
+};

package/lib/mapping-card/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/mapping-card/src/styles/index.cssr.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
+// --u-bezier
+// --u-background-color
+// --u-border-color
+// --u-border-radius
+// --u-header-padding
+// --u-body-padding
+// --u-title-color
+// --u-description-color
+exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('mapping-card', `
+ background-color: var(--u-background-color);
+ border: 1px solid var(--u-border-color);
+ border-radius: var(--u-border-radius);
+ overflow: hidden;
+ box-sizing: border-box;
+`, [(0, cssr_1.cE)('header', `
+ padding: var(--u-header-padding);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ position: relative;
+ `, [(0, cssr_1.c)('&::after', `
+ content: '';
+ position: absolute;
+ left: 24px;
+ right: 24px;
+ bottom: 0;
+ height: 1px;
+ background: var(--u-border-color);
+ `)]), (0, cssr_1.cE)('header-info', `
+ min-width: 0;
+ `), (0, cssr_1.cE)('header-info-text', `
+ min-width: 0;
+ `), (0, cssr_1.cE)('header-title', `
+ color: var(--u-title-color);
+ `), (0, cssr_1.cE)('header-description', `
+ color: var(--u-description-color);
+ margin-top: 2px;
+ `), (0, cssr_1.cE)('body', `
+ display: flex;
+ padding: var(--u-body-padding);
+ `), (0, cssr_1.cE)('body-group', `
+ flex: 1;
+ position: relative;
+ `, [(0, cssr_1.c)('&:last-child', `
+ padding: 0 0 12px 20px;
+ `), (0, cssr_1.c)('&:first-child', `
+ padding: 0 20px 12px 0;
+ `), (0, cssr_1.c)('&:only-child', `
+ padding: 0 0 12px 0;
+ `), (0, cssr_1.c)('&::after', `
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 1px;
+ height: calc(100% - 12px);
+ background: var(--u-border-color);
+ `), (0, cssr_1.c)('&:last-child::after', `
+ display: none;
+ `)]), (0, cssr_1.cE)('body-items', `
+ align-items: center;
+ `), (0, cssr_1.cE)('body-item', [(0, cssr_1.cM)('text', `
+ padding: 0 24px;
+ `)]), (0, cssr_1.cE)('body-group-icon', `
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translate(50%, -50%);
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ height: 44px;
+ width: 44px;
+ border-radius: 100px;
+ justify-content: center;
+ background-color: var(--u-divider-background-color);
+ `), (0, cssr_1.cE)('side', `
+ flex: 1;
+ min-width: 0;
+ `), (0, cssr_1.cE)('arrow', `
+ display: flex;
+ align-items: center;
+ padding-top: 32px;
+ color: var(--u-arrow-color);
+ font-size: 16px;
+ flex-shrink: 0;
+ `)]), (0, cssr_1.cB)('mapping-card-list', [(0, cssr_1.cE)('pagination', `
+ margin-top: 16px;
+ `)])]);