@steroidsjs/core 3.0.0-beta.13 → 3.0.0-beta.15

package/index.d.ts

@@ -50,7 +50,7 @@ declare type Size = 'small' | 'middle' | 'large' | string;
 /**
  * Макет формы или ее части, влияющий на расположение полей
  */
-declare type FormLayoutName = 'default' | 'horizontal' | 'inline' | string;
+declare type FormLayoutName = 'default' | 'vertical' | 'inline' | string;
 
 /**
  * Свойства для настройки макета формы

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.13",
+ "version": "3.0.0-beta.15",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {

package/ui/content/Badge/Badge.d.ts

@@ -11,7 +11,7 @@ export interface IBadgeProps {
     /**
      * Тип badge
      */
-    type: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    type: ColorName;
     /**
      * Стиль скругления
      */
@@ -41,7 +41,7 @@ export interface IBadgeProps {
     /**
      * Размер для badge
      */
-    size: 'small' | 'medium' | 'large';
+    size: Size;
 }
 export interface IBadgeViewProps extends IBadgeProps {
     isExist: boolean;

package/ui/content/Badge/Badge.js

@@ -27,7 +27,7 @@ function Badge(props) {
 Badge.defaultProps = {
     type: 'primary',
     roundingStyle: 'squarer',
-    size: 'medium',
+    size: 'md',
     counter: false,
     showClose: false
 };

package/ui/content/Card/Card.d.ts

@@ -1,9 +1,7 @@
+import { IButtonProps } from 'src/ui/form/Button/Button';
+import { ILinkProps } from 'src/ui/nav/Link/Link';
+import { IAvatarProps } from '../Avatar/Avatar';
 export interface ICardProps {
-    /**
-     * Цвет границы (если передать false, то граница будет скрыта)
-     * @example success
-     */
-    borderColor?: ColorName | 'default' | boolean;
     /**
      * Дополнительный CSS-класс
      */
@@ -12,11 +10,6 @@ export interface ICardProps {
      * Дочерние элементы
      */
     children?: CustomView;
-    /**
-     * Цвет состояния
-     * @example success
-     */
-    color?: ColorName;
     /**
      * Обложка для карточки, нужно передать ссылку на изображение
      * @example 'https://cat/cat.png'
@@ -28,23 +21,30 @@ export interface ICardProps {
      */
     description?: string;
     /**
-     * Текст для header
+     * Контент хедера
      */
-    header?: string;
+    header?: {
+        avatar?: IAvatarProps;
+        menu?: boolean;
+        head?: string;
+        subhead?: string;
+    };
     /**
-     * Текст для footer
+     * Контент футера
      */
-    footer?: string;
+    footer?: {
+        head: string;
+        subhead: string;
+    };
     /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
-     */
-    orientation?: 'vertical' | 'vertical-reverse' | 'horizontal' | string;
+    * Коллекция ссылок
+    * @example {}
+    */
+    links: ILinkProps[];
     /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
+     * Коллекция кнопок
      */
-    shape?: 'square' | 'circle';
+    buttons: IButtonProps[];
     /**
      * Объект CSS стилей
      * @example {width: '30px'}
@@ -63,11 +63,4 @@ export interface ICardProps {
 }
 export type ICardViewProps = ICardProps;
 declare function Card(props: ICardProps): any;
-declare namespace Card {
-    var defaultProps: {
-        borderColor: string;
-        orientation: string;
-        shape: string;
-    };
-}
 export default Card;

package/ui/content/Card/Card.js

@@ -16,9 +16,4 @@ function Card(props) {
     var components = (0, hooks_1.useComponents)();
     return components.ui.renderView(props.view || 'content.CardView', __assign({}, props));
 }
-Card.defaultProps = {
-    borderColor: 'default',
-    orientation: 'vertical',
-    shape: 'circle'
-};
 exports["default"] = Card;

package/ui/form/CheckboxField/CheckboxField.js

@@ -32,6 +32,7 @@ CheckboxField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
+    size: 'md',
     inputProps: {}
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxField', CheckboxField, { label: false });

package/ui/form/DropDownField/DropDownField.d.ts

@@ -1,16 +1,34 @@
+/// <reference types="react" />
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
 import { IFieldWrapperInputProps } from '../../form/Field/fieldWrapper';
+export type ContentType = 'checkbox' | 'radio' | 'icon' | 'img';
+export interface IDropDownFieldItem {
+    id: number;
+    label: string;
+    contentType?: ContentType;
+    contentSrc?: 'string' | React.ReactElement;
+}
 /**
  * DropDownField
  * Выпадающий список для выбора одного или нескольких значений
  */
-export interface IDropDownFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'> {
+export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'> {
     /**
      * Placeholder подсказка
      * @example Your text...
      */
     searchPlaceholder?: string;
+    /**
+     * Цвет состояния
+     * @example success
+     */
+    color?: ColorName;
+    /**
+    * Включает стиль `outline`, когда у DropDownField остается только `border`, а задний фон становится прозрачным
+    * @example true
+    */
+    outline?: boolean;
     inputProps?: any;
     /**
      * Дополнительный CSS-класс
@@ -22,15 +40,15 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, IDataProvi
      */
     style?: any;
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: any;
-    /**
-     * Показать кнопку для сброса выбранного значения
+     * Показать иконку сброса для выбранных значений
      * @example true
      */
     showReset?: boolean;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
     /**
      * Атрибут, в котором должны лежать дочерние элементы списка (для группировки)
      * Если аттрибут не задан - группировка не производится
@@ -38,15 +56,27 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, IDataProvi
      */
     groupAttribute?: string;
     /**
-     * Включает стиль без 'border'
-     * @example true
+     * Свойство, которое устанавливает один type и src контента для всех пунктов
+     * @example {type: 'icon', src: 'user'}
+     */
+    itemsContent?: {
+        type: ContentType;
+        src?: 'string' | React.ReactElement;
+    };
+    /**
+     * Элементы вложенные внутрь DropDownField
+     * @example [{id: 1, label: 'Ivan Ivanov', type: 'icon', typeSrc: 'user'}]
+     */
+    items: IDropDownFieldItem[];
+    /**
+     * Нужно ли использовать троеточие при переполнении DropDownField
+     * @example {'true'}
      */
-    noBorder?: boolean;
+    showEllipses?: boolean;
     [key: string]: any;
 }
-export interface IDropDownFieldViewProps extends Omit<IDropDownFieldProps, 'items'> {
+export interface IDropDownFieldViewProps extends IDropDownFieldProps {
     errors?: string[];
-    items: Record<string, unknown>[];
     selectedItems: Record<string, unknown>[];
     hoveredId: PrimaryKey | any;
     selectedIds: (PrimaryKey | any)[];
@@ -67,9 +97,24 @@ export interface IDropDownFieldViewProps extends Omit<IDropDownFieldProps, 'item
     onItemHover: (id: PrimaryKey | any) => void;
     onItemRemove: (id: PrimaryKey | any) => void;
     onClose: () => void;
-    placeholder: string;
+    onOpen: () => void;
     isAutoComplete?: boolean;
     isSearchAutoFocus?: boolean;
+    primaryKey: string;
+}
+export interface IDropDownItemViewProps extends Pick<IDropDownFieldProps, 'itemsContent'>, Pick<IFieldWrapperInputProps, 'size'> {
+    item: {
+        id: number;
+        label: string;
+        contentType?: ContentType;
+        contentSrc?: 'string' | React.ReactElement;
+    };
+    primaryKey: PrimaryKey;
+    hoveredId: string;
+    selectedIds: (PrimaryKey | any)[];
+    onItemSelect: (id: PrimaryKey | any) => void;
+    onItemHover: (id: PrimaryKey | any) => void;
+    groupAttribute?: string;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDropDownFieldProps>;
 export default _default;

package/ui/form/DropDownField/DropDownField.js

@@ -105,6 +105,9 @@ function DropDownField(props) {
 }
 DropDownField.defaultProps = {
     primaryKey: 'id',
+    outline: false,
+    size: 'md',
+    color: 'basic',
     disabled: false,
     required: false,
     className: '',

package/ui/form/Field/fieldWrapper.d.ts

@@ -46,6 +46,10 @@ export interface IFieldWrapperInputProps {
      * @example 'horizontal'
      */
     layout?: FormLayout;
+    /**
+     * Input ID для связи поля с label
+     */
+    id?: string;
     value?: any;
     onChange?: (...args: any[]) => any;
     /**

package/ui/form/Field/fieldWrapper.js

@@ -131,8 +131,10 @@ function fieldWrapper(componentId, Component, optionsConfig) {
         }
         // Resolve layout
         var layout = (0, react_1.useMemo)(function () { return (0, form_1.mergeLayoutProp)(context.layout, props.layout); }, [context.layout, props.layout]);
+        var uniqueId = (0, hooks_1.useUniqueId)('input');
+        var inputId = props.id || uniqueId;
         if (layout !== null) {
-            return components.ui.renderView(FieldLayout_1["default"], __assign(__assign({}, attributesProps), { layout: layout, size: props.size || context.size || null, required: (0, has_1["default"])(props, 'required') ? props.required : metaProps.required, label: options.label === false ? null : ((0, has_1["default"])(props, 'label') ? props.label : metaProps.label), hint: (0, has_1["default"])(props, 'hint') ? props.hint : metaProps.hint, errors: props.errors, children: (React.createElement(Component.DynamicField, __assign({}, props))) }));
+            return components.ui.renderView(FieldLayout_1["default"], __assign(__assign({}, attributesProps), { layout: layout, size: props.size || context.size || null, required: (0, has_1["default"])(props, 'required') ? props.required : metaProps.required, label: options.label === false ? null : ((0, has_1["default"])(props, 'label') ? props.label : metaProps.label), hint: (0, has_1["default"])(props, 'hint') ? props.hint : metaProps.hint, errors: props.errors, id: inputId, children: (React.createElement(Component.DynamicField, __assign({}, props, { id: inputId }))) }));
         }
         return components.ui.renderView(Component.DynamicField, props);
     };

package/ui/form/FieldLayout/FieldLayout.d.ts

@@ -48,6 +48,7 @@ export interface IFieldLayoutViewProps {
     hint: string | boolean;
     errors: string[];
     successful: boolean;
+    id: string;
     size: Size;
     layout?: {
         layout: FormLayoutName | boolean;

package/ui/form/Form/Form.d.ts

@@ -140,11 +140,6 @@ export interface IFormProps {
      * @example 'addComment'
      */
     captchaActionName?: string;
-    /**
-     * Включает рамки и тень.
-     * @example true
-     */
-    isBordered?: boolean;
     /**
      * Очищать ли данные формы с redux хранилища при размонтировании компонента. По-умолчанию - false
      * @example false

package/ui/form/RadioListField/RadioListField.js

@@ -55,6 +55,7 @@ RadioListField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
-    errors: null
+    errors: null,
+    size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('RadioListField', RadioListField);

package/ui/layout/Tooltip/calculate.js

@@ -80,7 +80,7 @@ function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
         case 'topRight':
         case 'bottomRight':
             // Ширина tooltip больше родителя - стрелка на середину родителя
-            style.right = document.body.clientWidth - parentDimensions.right;
+            style.left = parentDimensions.right - tooltipSize.width;
             if (parentDimensions.width < tooltipSize.width) {
                 arrowPosition = {
                     left: null,

package/ui/content/Card/demo/basic.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-/**
- * Body
- * @order 4
- * @col 12
- */
-declare const _default: () => JSX.Element;
-export default _default;

package/ui/content/Card/demo/basic.js

@@ -1,39 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-/* eslint-disable max-len */
-var React = __importStar(require("react"));
-var Card_1 = __importDefault(require("../Card"));
-/**
- * Body
- * @order 4
- * @col 12
- */
-exports["default"] = (function () { return (React.createElement("div", { style: { display: 'flex', gridGap: '40px' } },
-    React.createElement(Card_1["default"], { title: 'Card title' }, "All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet."),
-    React.createElement(Card_1["default"], null, "All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet."))); });

package/ui/content/Card/demo/border color.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
-export default _default;

package/ui/content/Card/demo/border color.js

@@ -1,52 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var Card_1 = __importDefault(require("../Card"));
-/**
- * Border color types
- * @order 7
- * @col 12
- */
-var colors = {
-    primary: 'primary',
-    sd: 'secondary',
-    sc: 'success',
-    "if": 'info',
-    wr: 'warning',
-    dn: 'danger',
-    lg: 'light',
-    dr: 'dark'
-};
-var text = 'Some quick example text to build on the card title and make up the bulk of the card\'s content.';
-function capitalize(s) {
-    return s[0].toUpperCase() + s.slice(1);
-}
-exports["default"] = (function () { return (React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } }, Object.values(colors).map(function (color) { return (React.createElement("div", { style: { marginRight: '30px', marginBottom: '30px' }, key: color },
-    React.createElement(React.Fragment, null,
-        React.createElement(Card_1["default"], { style: { width: '320px' }, header: 'Header', title: capitalize(color) + ' card title', borderColor: color }, text)))); }))); });

package/ui/content/Card/demo/color.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
-export default _default;

package/ui/content/Card/demo/color.js

@@ -1,52 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var Card_1 = __importDefault(require("../Card"));
-/**
- * Color types
- * @order 6
- * @col 12
- */
-var colors = {
-    pr: 'primary',
-    sd: 'secondary',
-    sc: 'success',
-    "if": 'info',
-    wr: 'warning',
-    dn: 'danger',
-    lg: 'light',
-    dr: 'dark'
-};
-var text = 'Some quick example text to build on the card title and make up the bulk of the card\'s content.';
-function capitalize(s) {
-    return s[0].toUpperCase() + s.slice(1);
-}
-exports["default"] = (function () { return (React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap' } }, Object.values(colors).map(function (color) { return (React.createElement("div", { style: { marginRight: '30px', marginBottom: '30px' }, key: color },
-    React.createElement(React.Fragment, null,
-        React.createElement(Card_1["default"], { style: { width: '320px' }, header: 'Header', title: capitalize(color) + ' card title', color: color }, text)))); }))); });

package/ui/content/Card/demo/header.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
-export default _default;

package/ui/content/Card/demo/header.js

@@ -1,47 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var form_1 = require("../../../form");
-var Card_1 = __importDefault(require("../Card"));
-/**
- * Header and footer
- * @order 3
- * @col 12
- */
-var text = 'Some quick example text to build on the card title and make up the bulk of the card\'s content.';
-exports["default"] = (function () { return (React.createElement("div", { style: { display: 'grid', gridAutoFlow: 'column', gridGap: '30px' } },
-    React.createElement(Card_1["default"], { title: 'Card title', header: 'Header' },
-        text,
-        React.createElement(form_1.Button, null, "Button")),
-    React.createElement(Card_1["default"], { title: 'Card title', footer: 'Footer' },
-        text,
-        React.createElement(form_1.Button, null, "Button")),
-    React.createElement(Card_1["default"], { title: 'Card title', header: 'Header', footer: 'Footer' },
-        text,
-        React.createElement(form_1.Button, null, "Button")))); });

package/ui/content/Card/demo/hover.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
-export default _default;

package/ui/content/Card/demo/hover.js

@@ -1,42 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var form_1 = require("../../../form");
-var Card_1 = __importDefault(require("../Card"));
-/**
- * Hover image
- * @order 1
- * @col 8
- */
-var text = 'Some quick example text to build on the card title and make up the bulk of the card\'s content.';
-exports["default"] = (function () { return (React.createElement("div", { style: { display: 'flex', gridGap: '15px' } },
-    React.createElement(Card_1["default"], { title: 'Card title', cover: 'https://i.ibb.co/rK9tsnJ/swamp.png' },
-        text,
-        React.createElement(form_1.Button, null, "Button")),
-    React.createElement(Card_1["default"], { title: 'Card title', cover: 'https://i.ibb.co/rK9tsnJ/swamp.png' }, text))); });

package/ui/content/Card/demo/link.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const _default: () => JSX.Element;
-export default _default;

package/ui/content/Card/demo/link.js

@@ -1,43 +0,0 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var form_1 = require("../../../form");
-var Card_1 = __importDefault(require("../Card"));
-/**
- * Titles, text, and links
- * @order 2
- * @col 4
- */
-var text = 'Some quick example text to build on the card title and make up the bulk of the card\'s content.';
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Card_1["default"], { title: 'Card title' },
-        text,
-        React.createElement("div", { style: { display: 'flex', gridGap: '16px', padding: 0 } },
-            React.createElement(form_1.Button, { link: true }, "Link"),
-            React.createElement(form_1.Button, { link: true }, "Another link"))))); });