@cube-dev/ui-kit 0.57.0 → 0.59.0

package/cjs/stories/FormFieldArgs.js

@@ -1,360 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ICON_ARG = exports.SELECTED_KEY_ARG = exports.IS_INDETERMINATE_ARG = exports.IS_SELECTED_ARG = exports.MULTIPLE_NUMBER_VALUE_ARG = exports.MULTIPLE_VALUE_ARG = exports.NUMBER_VALUE_ARG = exports.TIME_VALUE_ARG = exports.DATE_VALUE_ARG = exports.TEXT_VALUE_ARG = exports.REQUIRED_MARK_ARG = exports.MULTILINE_ARG = exports.SIZE_ARG = exports.IS_DISABLED_ARG = exports.IS_READ_ONLY_ARG = exports.IS_REQUIRED_ARG = exports.AUTO_FOCUS_ARG = exports.IS_LOADING_ARG = exports.VALIDATION_STATE_ARG = exports.PLACEHOLDER_ARG = exports.MESSAGE_ARG = exports.NECESSITY_INDICATOR_ARG = exports.DESCRIPTION_ARG = exports.EXTRA_ARG = exports.LABEL_ARG = exports.LABEL_POSITION_ARG = exports.DISABLE_BASE_ARGS = void 0;
-const baseProps_1 = require("./lists/baseProps");
-exports.DISABLE_BASE_ARGS = baseProps_1.baseProps.reduce((map, prop) => {
-    map[prop] = { table: { disable: true } };
-    return map;
-}, {});
-exports.LABEL_POSITION_ARG = {
-    labelPosition: {
-        description: 'The position of labels for each field.',
-        options: ['top', 'side'],
-        control: 'radio',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'top' },
-        },
-    },
-};
-exports.LABEL_ARG = {
-    label: {
-        control: 'text',
-        description: 'The content to display as the label.',
-    },
-};
-exports.EXTRA_ARG = {
-    extra: {
-        control: 'text',
-        description: 'The extra content to display next to the label.',
-    },
-};
-exports.DESCRIPTION_ARG = {
-    description: {
-        control: 'text',
-        description: 'The description for the field.',
-    },
-};
-exports.NECESSITY_INDICATOR_ARG = {
-    necessityIndicator: {
-        // defaultValue: 'icon',
-        description: 'Type of the necessity indicator',
-        options: ['icon', 'label', false],
-        control: 'radio',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'icon' },
-        },
-    },
-};
-exports.MESSAGE_ARG = {
-    message: {
-        // defaultValue: '',
-        description: 'Validation error message',
-        control: 'text',
-    },
-};
-exports.PLACEHOLDER_ARG = {
-    placeholder: {
-        // defaultValue: 'Placeholder',
-        control: 'text',
-    },
-};
-exports.VALIDATION_STATE_ARG = {
-    validationState: {
-        // defaultValue: undefined,
-        description: 'Whether the input should display its "valid" or "invalid" visual styling.',
-        options: [undefined, 'valid', 'invalid'],
-        control: 'radio',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'top' },
-        },
-    },
-};
-exports.IS_LOADING_ARG = {
-    isLoading: {
-        control: 'boolean',
-        description: 'Loading state with spinner. Also works as disabled',
-        // defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-    },
-};
-exports.AUTO_FOCUS_ARG = {
-    autoFocus: {
-        // defaultValue: false,
-        description: 'Whether the element should receive focus on render.',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-    },
-};
-exports.IS_REQUIRED_ARG = {
-    isRequired: {
-        // defaultValue: false,
-        description: 'Whether user input is required on the input before form submission. Often paired with the necessityIndicator prop to add a visual indicator to the input.',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-    },
-};
-exports.IS_READ_ONLY_ARG = {
-    isReadOnly: {
-        // defaultValue: false,
-        description: 'Whether the input can be selected but not changed by the user.',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-    },
-};
-exports.IS_DISABLED_ARG = {
-    isDisabled: {
-        // defaultValue: false,
-        description: 'Whether the input is disabled.',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-    },
-};
-exports.SIZE_ARG = {
-    size: {
-        // defaultValue: undefined,
-        description: 'The size of the button',
-        options: [undefined, 'default', 'small'],
-        control: 'radio',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'default' },
-        },
-    },
-};
-exports.MULTILINE_ARG = {
-    multiLine: {
-        // defaultValue: false,
-        description: 'Whether the input is multiline.',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-    },
-};
-exports.REQUIRED_MARK_ARG = {
-    requiredMark: {
-        // defaultValue: true,
-        description: 'Whether to show the required mark on labels.',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: true },
-        },
-    },
-};
-exports.TEXT_VALUE_ARG = {
-    value: {
-        defaultValue: undefined,
-        description: 'The text value in controlled mode',
-        control: 'text',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    defaultValue: {
-        defaultValue: undefined,
-        description: 'The default text value in uncontrolled mode',
-        control: 'text',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-};
-exports.DATE_VALUE_ARG = {
-    value: {
-        defaultValue: undefined,
-        description: 'The text date in controlled mode',
-        control: 'date',
-        table: {
-            type: { summary: 'date' },
-        },
-    },
-    defaultValue: {
-        defaultValue: undefined,
-        description: 'The default date value in uncontrolled mode',
-        control: 'date',
-        table: {
-            type: { summary: 'date' },
-        },
-    },
-};
-exports.TIME_VALUE_ARG = {
-    value: {
-        defaultValue: undefined,
-        description: 'The text time in controlled mode',
-        control: 'text',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    defaultValue: {
-        defaultValue: undefined,
-        description: 'The default time value in uncontrolled mode',
-        control: 'text',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-};
-exports.NUMBER_VALUE_ARG = {
-    value: {
-        defaultValue: undefined,
-        description: 'The number value in controlled mode',
-        control: 'text',
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-    defaultValue: {
-        defaultValue: undefined,
-        description: 'The default number value in uncontrolled mode',
-        control: 'text',
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-};
-exports.MULTIPLE_VALUE_ARG = {
-    value: {
-        defaultValue: undefined,
-        description: 'The multiple value in controlled mode',
-        control: 'object',
-        table: {
-            type: { summary: 'string[]' },
-        },
-    },
-    defaultValue: {
-        defaultValue: undefined,
-        description: 'The default multiple value in uncontrolled mode',
-        control: 'object',
-        table: {
-            type: { summary: 'string[]' },
-        },
-    },
-};
-exports.MULTIPLE_NUMBER_VALUE_ARG = {
-    value: {
-        defaultValue: undefined,
-        description: 'The multiple value in controlled mode',
-        control: 'object',
-        table: {
-            type: { summary: 'number[]' },
-        },
-    },
-    defaultValue: {
-        defaultValue: undefined,
-        description: 'The default multiple value in uncontrolled mode',
-        control: 'object',
-        table: {
-            type: { summary: 'number[]' },
-        },
-    },
-};
-exports.IS_SELECTED_ARG = {
-    isSelected: {
-        defaultValue: undefined,
-        description: 'Whether the input is selected in controlled mode',
-        control: {
-            type: 'radio',
-            options: [undefined, true, false],
-        },
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    defaultSelected: {
-        defaultValue: undefined,
-        description: 'Whether the input is selected by default in uncontrolled mode',
-        control: {
-            type: 'radio',
-            options: [undefined, true, false],
-        },
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-};
-exports.IS_INDETERMINATE_ARG = {
-    isIndeterminate: {
-        defaultValue: undefined,
-        description: 'Whether the input is indeterminate in controlled mode',
-        control: {
-            type: 'radio',
-            options: [undefined, true, false],
-        },
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-};
-exports.SELECTED_KEY_ARG = {
-    selectedKey: {
-        defaultValue: undefined,
-        description: 'The selected value in controlled mode',
-        control: 'text',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    defaultSelectedKey: {
-        defaultValue: undefined,
-        description: 'The default selected value in uncontrolled mode',
-        control: 'text',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-};
-exports.ICON_ARG = {
-    icon: {
-        // defaultValue: true,
-        description: 'Whether to show an icon on the element',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: true },
-        },
-    },
-};
-
-        

package/cjs/stories/Layout.stories.js

@@ -1,29 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Grid = exports.FlexCustom = exports.Flex = exports.Flow = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const index_1 = require("../index");
-exports.default = {
-    title: 'Layout',
-};
-exports.Flow = {
-    render: () => ((0, jsx_runtime_1.jsxs)(index_1.Flow, { gap: true, children: [(0, jsx_runtime_1.jsx)(index_1.Card, { children: "Card 1" }), (0, jsx_runtime_1.jsx)(index_1.Card, { children: "Card 2" }), (0, jsx_runtime_1.jsx)(index_1.Card, { children: "Card 3" })] })),
-};
-exports.Flex = {
-    render: () => ((0, jsx_runtime_1.jsxs)(index_1.Flow, { gap: true, children: [(0, jsx_runtime_1.jsxs)(index_1.Space, { flow: "row", children: [(0, jsx_runtime_1.jsx)(index_1.Block, { children: "horizontal space" }), (0, jsx_runtime_1.jsx)(index_1.Button, { children: "One" }), (0, jsx_runtime_1.jsx)(index_1.Button, { children: "Two" })] }), (0, jsx_runtime_1.jsxs)(index_1.Space, { flow: "column", children: [(0, jsx_runtime_1.jsx)(index_1.Block, { children: "vertical space" }), (0, jsx_runtime_1.jsx)(index_1.Button, { children: "One" }), (0, jsx_runtime_1.jsx)(index_1.Button, { children: "Two" })] })] })),
-};
-exports.FlexCustom = {
-    render: () => ((0, jsx_runtime_1.jsxs)(index_1.Flex, { flow: "row", gap: "4x", placeContent: "space-between", placeItems: "center", children: [(0, jsx_runtime_1.jsx)(index_1.Button, { children: "One" }), (0, jsx_runtime_1.jsx)(index_1.Button, { children: "Two" }), (0, jsx_runtime_1.jsx)(index_1.Button, { children: "Three" }), (0, jsx_runtime_1.jsx)(index_1.Button, { children: "Four" })] })),
-};
-exports.Grid = {
-    render: () => ((0, jsx_runtime_1.jsxs)(index_1.Grid, { gridColumns: "200px 1fr", gridRows: "60px 1fr", height: "500px", gap: "1x", children: [(0, jsx_runtime_1.jsx)(index_1.Card, { gridColumn: "1 / -1", children: "Header" }), (0, jsx_runtime_1.jsx)(index_1.Card, { children: "Sidebar" }), (0, jsx_runtime_1.jsx)(index_1.Card, { children: "Content" })] })),
-};
-
-        

package/cjs/stories/Tasty.stories.js

@@ -1,23 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GloballyStyledButton = exports.StyledButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const StyledButton_1 = require("./components/StyledButton");
-exports.default = {
-    title: 'Tasty API',
-};
-exports.StyledButton = {
-    render: () => (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { children: "Styled Button" }),
-};
-exports.GloballyStyledButton = {
-    render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledButton_1.GlobalStyledHeading, {}), (0, jsx_runtime_1.jsx)("div", { className: "myButton", children: "Styled Button" })] })),
-};
-
-        

package/cjs/stories/components/ConfirmDeletionDialogForm.js

@@ -1,35 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfirmDeletionDialogForm = ConfirmDeletionDialogForm;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const index_1 = require("../../index");
-function ConfirmDeletionDialogForm(props) {
-    let { name, onSubmit, onDismiss } = props;
-    return ((0, jsx_runtime_1.jsxs)(index_1.DialogForm, { title: "Delete Deployment", submitProps: {
-            label: 'Delete',
-            theme: 'danger',
-        }, cancelProps: {
-            label: 'I changed my mind',
-        }, onSubmit: onSubmit, onDismiss: onDismiss, children: [(0, jsx_runtime_1.jsxs)(index_1.Paragraph, { children: ["To delete the instance, please, enter its full name:", ' ', (0, jsx_runtime_1.jsx)(index_1.Text.Strong, { children: name })] }), (0, jsx_runtime_1.jsx)(index_1.Field, { name: "name", rules: [
-                    {
-                        required: true,
-                        message: 'This field is required',
-                    },
-                    {
-                        async validator(rule, value) {
-                            if (value !== name) {
-                                throw new Error('Incorrect name');
-                            }
-                        },
-                    },
-                ], children: (0, jsx_runtime_1.jsx)(index_1.Input.Text, { placeholder: "Enter the name of the instance" }) })] }));
-}
-
-        

package/cjs/stories/components/DialogFormApp.js

@@ -1,18 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogFormApp = DialogFormApp;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const index_1 = require("../../index");
-const ConfirmDeletionDialogForm_1 = require("./ConfirmDeletionDialogForm");
-function DialogFormApp() {
-    return ((0, jsx_runtime_1.jsxs)(index_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsx)(index_1.Button, { children: "Delete the instance" }), (0, jsx_runtime_1.jsx)(ConfirmDeletionDialogForm_1.ConfirmDeletionDialogForm, { name: "instanceName" })] }));
-}
-
-        

package/cjs/stories/components/StyledButton.js

@@ -1,37 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalStyledHeading = exports.StyledButton = void 0;
-exports.Block = Block;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const tasty_1 = require("../../tasty");
-const actions_1 = require("../../components/actions");
-exports.StyledButton = (0, tasty_1.tasty)(actions_1.Button, {
-    styles: {
-        padding: '3x 6x',
-        preset: 't1',
-    },
-});
-exports.GlobalStyledHeading = (0, tasty_1.tasty)('.myButton', {
-    display: 'inline-block',
-    padding: '1x 2x',
-    preset: 't2',
-    border: true,
-    radius: true,
-    fill: {
-        '': '#white',
-        ':hover': '#purple.20',
-    },
-    color: '#dark',
-});
-function Block() {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.StyledButton, { children: "123" }), (0, jsx_runtime_1.jsx)(exports.GlobalStyledHeading, {})] }));
-}
-
-        

package/cjs/stories/lists/baseProps.js

@@ -1,42 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.baseProps = void 0;
-const tasty_1 = require("../../tasty");
-const allStyles = Array.from(new Set([
-    ...tasty_1.BASE_STYLES,
-    ...tasty_1.POSITION_STYLES,
-    ...tasty_1.CONTAINER_STYLES,
-    ...tasty_1.BLOCK_STYLES,
-    ...tasty_1.COLOR_STYLES,
-    ...tasty_1.FLOW_STYLES,
-    ...tasty_1.OUTER_STYLES,
-    ...tasty_1.DIMENSION_STYLES,
-    ...tasty_1.TEXT_STYLES,
-    ...tasty_1.POSITION_STYLES,
-]));
-exports.baseProps = [
-    'qa',
-    'qaVal',
-    'block',
-    'inline',
-    'style',
-    'styles',
-    'css',
-    'styleName',
-    'hidden',
-    'disabled',
-    'mods',
-    'breakpoints',
-    'isHidden',
-    'element',
-    ...allStyles,
-];
-
-        

package/cjs/tasty/index.js

@@ -1,41 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Element = exports.tasty = void 0;
-var tasty_1 = require("./tasty");
-Object.defineProperty(exports, "tasty", { enumerable: true, get: function () { return tasty_1.tasty; } });
-Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return tasty_1.Element; } });
-__exportStar(require("./utils/filterBaseProps"), exports);
-__exportStar(require("./utils/colors"), exports);
-__exportStar(require("./utils/styles"), exports);
-__exportStar(require("./utils/modAttrs"), exports);
-__exportStar(require("./utils/responsive"), exports);
-__exportStar(require("./utils/renderStyles"), exports);
-__exportStar(require("./utils/dotize"), exports);
-__exportStar(require("./styles/list"), exports);
-__exportStar(require("./providers/BreakpointsProvider"), exports);
-__exportStar(require("./utils/mergeStyles"), exports);
-__exportStar(require("./utils/warnings"), exports);
-__exportStar(require("./utils/getDisplayName"), exports);
-
-        

package/cjs/tasty/providers/BreakpointsProvider.js

@@ -1,20 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BreakpointsContext = void 0;
-exports.BreakpointsProvider = BreakpointsProvider;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-// Default breakpoints mirror Bootstrap defaults without md and xxl breakpoints.
-exports.BreakpointsContext = (0, react_1.createContext)([980]);
-function BreakpointsProvider({ value, children, }) {
-    return ((0, jsx_runtime_1.jsx)(exports.BreakpointsContext.Provider, { value: value, children: children }));
-}
-
-        

package/cjs/tasty/styles/align.js

@@ -1,23 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.alignStyle = alignStyle;
-function alignStyle({ align }) {
-    if (typeof align !== 'string')
-        return;
-    if (!align)
-        return;
-    return {
-        'align-items': align,
-        'align-content': align,
-    };
-}
-alignStyle.__lookupStyles = ['align'];
-
-        

package/cjs/tasty/styles/border.js

@@ -1,57 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.57.0
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.borderStyle = borderStyle;
-const styles_1 = require("../utils/styles");
-const BORDER_STYLES = [
-    'none',
-    'hidden',
-    'dotted',
-    'dashed',
-    'solid',
-    'double',
-    'groove',
-    'ridge',
-    'inset',
-    'outset',
-];
-/**
- *
- * @param border
- * @return {{border: string}|*}
- */
-function borderStyle({ border }) {
-    if (!border && border !== 0)
-        return;
-    if (border === true)
-        border = '1bw';
-    const { values, mods, color } = (0, styles_1.parseStyle)(String(border));
-    const directions = (0, styles_1.filterMods)(mods, styles_1.DIRECTIONS);
-    const typeMods = (0, styles_1.filterMods)(mods, BORDER_STYLES);
-    const value = values[0] || 'var(--border-width)';
-    const type = typeMods[0] || 'solid';
-    const borderColor = color || 'var(--border-color)';
-    const styleValue = [value, type, borderColor].join(' ');
-    if (!directions.length) {
-        return { border: styleValue };
-    }
-    const zeroValue = [0, type, borderColor].join(' ');
-    return styles_1.DIRECTIONS.reduce((styles, dir) => {
-        if (mods.includes(dir)) {
-            styles[`border-${dir}`] = styleValue;
-        }
-        else {
-            styles[`border-${dir}`] = zeroValue;
-        }
-        return styles;
-    }, {});
-}
-borderStyle.__lookupStyles = ['border'];
-
-