@synerise/ds-card 0.9.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,101 @@
+---
+id: card
+title: Card
+---
+
+Cards contain content and actions related to a single subject.
+
+## When to use it
+
+---
+
+To display any kind of content (for example, tables, charts, dashboards, and more).
+
+## Component anatomy
+
+---
+
+This component is complex, which means it consists of other components:
+
+- [icon](/docs/components/icon/)
+- [typography](/docs/components/typography/)
+
+## Installation
+
+---
+
+```
+npm i @synerise/ds-card
+```
+
+or
+
+```
+yarn add @synerise/ds-card
+```
+
+## Usage
+
+---
+
+```
+<Card
+        lively
+        withHeader
+        title="Card Example"
+        description="Some description"
+        icon={<IconComponent />}
+        iconColor="#54cb0b"
+        size="medium"
+      >
+       Content
+      </Card>
+```
+
+## Card single
+
+---
+
+<iframe src="/storybook-static/iframe.html?id=components-card--single"></iframe>
+
+## Card group
+
+---
+
+<iframe src="/storybook-static/iframe.html?id=components-card--group"></iframe>
+
+## API
+
+---
+
+### Properties
+
+| Property                          | Description                                                                                                           | Type                                                                         | Default |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------- |
+| background                        | Background of Card container                                                                                          | `white` / `white-shadow` / `grey` / `grey-shadow` / `outline`                | `white` |
+| children                          | Defines if the button casts a shadow when the cursor is hovered over                                                  | React.ReactNode                                                              | -       |
+| className                         | Defines the class name of the container                                                                               | string                                                                       | -       |
+| compactHeader                     | Set as `true`, displays the description next to the header. Set as `false`, displays the description below the header | boolean                                                                      | -       |
+| description                       | Defines the content of the card description (in the header)                                                           | React.ReactNode                                                              | string  |
+| disabled                          | Defines if the state of the component is disabled                                                                     | boolean                                                                      | -       |
+| headerBorderBottom                | Show line under CardHeader                                                                                            | boolean                                                                      | `false` |
+| headerSideChildren                | Defines if the container includes a button (in the header)                                                            | React.ReactNode                                                              | -       |
+| staticContent                     | Defines content that's visible even if hideContent is `true`                                                          | React.ReactNode                                                              | -       |
+| hideContent                       | Defines the initial visibility of the content                                                                         | boolean                                                                      | `false` |
+| icon                              | Icon of CardBadge                                                                                                     | React.ReactNode                                                              | -       |
+| iconColor                         | Defines the color of the icon                                                                                         | string                                                                       | -       |
+| lively                            | Defines if the container casts a shadow when the cursor is hovered over                                               | boolean                                                                      | -       |
+| raised                            | Defines if the container casts a shadow on the background                                                             | boolean                                                                      | -       |
+| style                             | Defines the CSS of the container                                                                                      | React.CSSProperties                                                          | -       |
+| size                              | Defines the width of the container (the container width is set to 100% when this property is not passed).             | `small` (472px) / `medium` (588px) / `large` (966px) / `extraLarge` (1232px) | -       |
+| title                             | Defines the title of the card (in the header)                                                                         | string                                                                       | -       |
+| withHeader                        | Defines if the header is shown                                                                                        | boolean                                                                      | -       |
+| withoutPadding                    | Reset padding of ContentContainer                                                                                     | boolean                                                                      | `false` |
+| showSideChildrenWhenHeaderHidden  | Show headerSideChildren on the bottom when header is scrolled out of view                                             | boolean                                                                      | `false` |
+
+#### CardBadge
+
+| Property | Description                         | Type                                        | Default   |
+| -------- | ----------------------------------- | ------------------------------------------- | --------- |
+| Icon     | Icon rendered in badge              | React.ReactNode                             | -         |
+| Status   | Defines the color of badge and icon | `success` / `error` / `warning` / `default` | `default` |

package/dist/Card/Card.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { CardProps } from './Card.types';
+declare const Card: React.FC<CardProps>;
+export default Card;

package/dist/Card/Card.js

@@ -0,0 +1,99 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import * as React from 'react';
+import Icon from '@synerise/ds-icon';
+import AnimateHeight from 'react-animate-height';
+import VisibilitySensor from 'react-visibility-sensor';
+import * as S from './Card.styles';
+
+var Card = function Card(_ref) {
+  var children = _ref.children,
+      raised = _ref.raised,
+      disabled = _ref.disabled,
+      style = _ref.style,
+      className = _ref.className,
+      lively = _ref.lively,
+      withHeader = _ref.withHeader,
+      title = _ref.title,
+      description = _ref.description,
+      compactHeader = _ref.compactHeader,
+      icon = _ref.icon,
+      iconColor = _ref.iconColor,
+      headerSideChildren = _ref.headerSideChildren,
+      onHeaderClick = _ref.onHeaderClick,
+      withoutPadding = _ref.withoutPadding,
+      headerBorderBottom = _ref.headerBorderBottom,
+      _ref$background = _ref.background,
+      background = _ref$background === void 0 ? 'white-shadow' : _ref$background,
+      hideContent = _ref.hideContent,
+      staticContent = _ref.staticContent,
+      showSideChildrenWhenHeaderHidden = _ref.showSideChildrenWhenHeaderHidden;
+  var fatTitle = !description || description && compactHeader;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      headerActionsVisible = _React$useState2[0],
+      setHeaderActionsVisible = _React$useState2[1];
+
+  return React.createElement(S.Container, {
+    raised: raised,
+    disabled: disabled,
+    style: style,
+    className: "ds-card ".concat(className || ''),
+    lively: lively,
+    background: background
+  }, withHeader && React.createElement(S.Header, {
+    onClick: onHeaderClick,
+    headerBorderBottom: headerBorderBottom
+  }, icon && React.createElement(S.IconContainer, {
+    description: description,
+    compact: compactHeader
+  }, React.createElement(Icon, {
+    component: icon,
+    color: iconColor
+  })), React.createElement(S.HeaderContent, {
+    compact: compactHeader,
+    hasIcon: !!icon
+  }, title && React.createElement(S.Title, {
+    description: description,
+    level: 4,
+    fat: !!fatTitle
+  }, title), description && React.createElement(S.Description, null, description)), headerSideChildren && React.createElement(VisibilitySensor, {
+    partialVisibility: true,
+    onChange: setHeaderActionsVisible
+  }, React.createElement(S.HeaderSideChildren, {
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, headerSideChildren))), staticContent && React.createElement(AnimateHeight, {
+    className: "static-content-card-animation",
+    duration: 300,
+    height: hideContent ? 'auto' : 0
+  }, React.createElement(S.ChildrenContainer, null, React.createElement(S.PaddingWrapper, {
+    withoutPadding: withoutPadding,
+    withHeader: withHeader
+  }, staticContent))), React.createElement(AnimateHeight, {
+    className: "card-animation",
+    duration: 300,
+    height: hideContent ? 0 : 'auto'
+  }, React.createElement(S.ChildrenContainer, null, React.createElement(S.PaddingWrapper, {
+    withoutPadding: withoutPadding,
+    withHeader: withHeader
+  }, children))), showSideChildrenWhenHeaderHidden && React.createElement(AnimateHeight, {
+    className: "card-animation-footer",
+    duration: 0,
+    height: headerSideChildren && !headerActionsVisible ? 'auto' : 0
+  }, React.createElement(S.FooterContainer, null, headerSideChildren)));
+};
+
+export default Card;

package/dist/Card/Card.styles.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Backgrounds } from './Card.types';
+declare type IconContainerProps = {
+    compact?: boolean;
+    description?: React.ReactNode;
+};
+export declare const HeaderSideChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, IconContainerProps, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    raised?: boolean | undefined;
+    disabled?: boolean | undefined;
+    lively?: boolean | undefined;
+    background: Backgrounds;
+}, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", any, {
+    onClick?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+    headerBorderBottom?: boolean | undefined;
+}, never>;
+export declare const Title: import("styled-components").StyledComponent<React.FC<Pick<import("antd/lib/typography/Base").BlockProps & {
+    level?: 1 | 2 | 3 | 4 | 5 | undefined;
+}, "code" | "mark" | "style" | "title" | "type" | "className" | "id" | "aria-label" | "children" | "disabled" | "editable" | "copyable" | "ellipsis" | "underline" | "delete" | "keyboard" | "prefixCls" | "level">>, any, {
+    fat: boolean;
+    description?: React.ReactNode;
+}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderContent: import("styled-components").StyledComponent<"div", any, {
+    compact?: boolean | undefined;
+    hasIcon: boolean;
+}, never>;
+export declare const ChildrenContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PaddingWrapper: import("styled-components").StyledComponent<"div", any, {
+    withHeader?: boolean | undefined;
+    withoutPadding?: boolean | undefined;
+}, never>;
+export declare const FooterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/Card/Card.styles.js

@@ -0,0 +1,111 @@
+import styled, { css } from 'styled-components';
+import Typography from '@synerise/ds-typography';
+var whiteBg = ['white', 'white-shadow'];
+var greyBg = ['grey', 'grey-shadow'];
+var withBoxShadow = ['white-shadow', 'grey-shadow'];
+var withOutline = ['outline'];
+
+var backgroundColor = function backgroundColor(props) {
+  if (whiteBg.includes(props.background)) return props.theme.palette.white;
+  if (greyBg.includes(props.background)) return props.theme.palette['grey-050'];
+  return props.theme.palette.transparent;
+};
+
+var boxShadow = function boxShadow(props) {
+  if (withBoxShadow.includes(props.background)) return "0 4px 12px 0 rgba(35, 41, 54, 0.04)";
+  if (withOutline.includes(props.background)) return "".concat(props.theme.palette['grey-200'], " 0px 0px 0px 1px inset");
+  return 'none';
+};
+
+var getHeight = function getHeight(props) {
+  if (props.compact && props.description) {
+    return ' 32px';
+  }
+
+  if (props.compact) {
+    return ' 32px';
+  }
+
+  if (props.description) {
+    return '24px';
+  }
+
+  return ' 32px';
+};
+
+export var HeaderSideChildren = styled.div.withConfig({
+  displayName: "Cardstyles__HeaderSideChildren",
+  componentId: "sc-18exblx-0"
+})(["position:relative;padding-left:24px;"]);
+export var IconContainer = styled.div.withConfig({
+  displayName: "Cardstyles__IconContainer",
+  componentId: "sc-18exblx-1"
+})(["display:flex;width:24px;height:", ";align-items:center;"], function (props) {
+  return getHeight(props);
+});
+export var Container = styled.div.withConfig({
+  displayName: "Cardstyles__Container",
+  componentId: "sc-18exblx-2"
+})(["background-color:", ";box-shadow:", ";border-radius:", ";display:flex;flex-flow:column;width:100%;.card-animation{> *{transition:opacity 0.3s ease;opacity:0;}&.rah-static--height-auto{> *{opacity:1;}}}", " ", ";", ""], function (props) {
+  return props.background ? backgroundColor(props) : props.theme.palette.transparent;
+}, function (props) {
+  return props.background ? boxShadow(props) : 'none';
+}, function (props) {
+  return props.theme.variable('@border-radius-base');
+}, function (props) {
+  return !!props.raised && css(["box-shadow:", ";"], props.theme.variable('@box-shadow-active'));
+}, function (props) {
+  return !!props.disabled && css(["pointer-events:none;opacity:0.4;", "{opacity:0.16;}", "{opacity:0.4;}"], HeaderSideChildren, IconContainer);
+}, function (props) {
+  return !!props.lively && css(["&:hover{box-shadow:", ";}"], props.theme.variable('@box-shadow-active'));
+});
+export var Header = styled.div.withConfig({
+  displayName: "Cardstyles__Header",
+  componentId: "sc-18exblx-3"
+})(["padding:24px 24px 24px 24px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;position:relative;&:after{position:absolute;bottom:0;left:24px;right:24px;height:1px;content:'';display:", ";background-color:", ";}&:hover{", "}"], function (props) {
+  return props.headerBorderBottom ? 'block' : 'none';
+}, function (props) {
+  return props.theme.palette['grey-100'];
+}, function (props) {
+  return !!props.onClick && "cursor:pointer;";
+});
+export var Title = styled(Typography.Title).withConfig({
+  displayName: "Cardstyles__Title",
+  componentId: "sc-18exblx-4"
+})(["&&{display:flex;align-items:center;min-height:", ";margin:0;margin-bottom:", ";}"], function (props) {
+  return props.fat ? '32px' : '20px';
+}, function (props) {
+  return props.description ? '6px' : '0';
+});
+export var Description = styled.div.withConfig({
+  displayName: "Cardstyles__Description",
+  componentId: "sc-18exblx-5"
+})(["&&{margin:0;}"]);
+export var HeaderContent = styled.div.withConfig({
+  displayName: "Cardstyles__HeaderContent",
+  componentId: "sc-18exblx-6"
+})(["max-width:100%;flex:1;", ";", ""], function (props) {
+  return props.hasIcon && css(["margin:0 0 0 20px;"]);
+}, function (props) {
+  return !!props.compact && css(["display:flex;align-items:flex-start;flex-direction:row;", "{height:32px;line-height:32px;margin:0;}", "{border-left:1px solid ", ";height:32px;line-height:32px;padding:0 0 0 24px;margin:0 0 0 24px;}"], Title, Description, props.theme.palette['grey-200']);
+});
+export var ChildrenContainer = styled.div.withConfig({
+  displayName: "Cardstyles__ChildrenContainer",
+  componentId: "sc-18exblx-7"
+})([""]);
+export var PaddingWrapper = styled.div.withConfig({
+  displayName: "Cardstyles__PaddingWrapper",
+  componentId: "sc-18exblx-8"
+})(["padding:", ";", ""], function (props) {
+  return props.withoutPadding ? '0' : "24px";
+}, function (props) {
+  return !!props.withHeader && "padding-top: 0;";
+});
+export var FooterContainer = styled.div.withConfig({
+  displayName: "Cardstyles__FooterContainer",
+  componentId: "sc-18exblx-9"
+})(["padding:24px;display:flex;align-items:center;justify-content:flex-end;background:", ";border-top:solid 1px ", ";"], function (props) {
+  return props.theme.palette.white;
+}, function (props) {
+  return props.theme.palette['grey-100'];
+});

package/dist/Card/Card.types.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export declare type Backgrounds = 'white' | 'white-shadow' | 'grey' | 'grey-shadow' | 'outline';
+export interface CardProps {
+    raised?: boolean;
+    disabled?: boolean;
+    className?: string;
+    lively?: boolean;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    withHeader?: boolean;
+    compactHeader?: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    iconColor?: string;
+    staticContent?: React.ReactNode;
+    headerSideChildren?: React.ReactNode;
+    onHeaderClick?: (e: React.SyntheticEvent) => void;
+    withoutPadding?: boolean;
+    headerBorderBottom?: boolean;
+    background?: Backgrounds;
+    hideContent?: boolean;
+    showSideChildrenWhenHeaderHidden?: boolean;
+}

package/dist/CardBadge/CardBadge.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { CardBadgeProps } from './CardBadge.types';
+declare const CardBadge: React.FC<CardBadgeProps>;
+export default CardBadge;

package/dist/CardBadge/CardBadge.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Icon from '@synerise/ds-icon';
+import * as S from './CardBadge.styles';
+
+var CardBadge = function CardBadge(_ref) {
+  var icon = _ref.icon,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? 'default' : _ref$status;
+  return React.createElement(S.CardBadge, {
+    status: status
+  }, React.createElement(Icon, {
+    component: icon
+  }));
+};
+
+export default CardBadge;

package/dist/CardBadge/CardBadge.styles.d.ts

@@ -0,0 +1,4 @@
+import { BadgeStatus } from './CardBadge.types';
+export declare const CardBadge: import("styled-components").StyledComponent<"div", any, {
+    status: BadgeStatus;
+}, never>;

package/dist/CardBadge/CardBadge.styles.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+
+var background = {
+  success: 'green-600',
+  warning: 'yellow-600',
+  error: 'red-600',
+  "default": 'transparent'
+};
+var color = {
+  success: 'white',
+  warning: 'white',
+  error: 'white',
+  "default": 'grey-400'
+};
+
+var boxShadow = function boxShadow(props) {
+  return props.status === 'default' ? "".concat(props.theme.palette['grey-400'], " 0px 0px 0px 1.5px inset") : 'none';
+}; // eslint-disable-next-line import/prefer-default-export
+
+
+export var CardBadge = styled.div.withConfig({
+  displayName: "CardBadgestyles__CardBadge",
+  componentId: "sc-1xcnpyh-0"
+})(["width:24px;height:24px;display:flex;align-items:center;justify-content:center;background-color:", ";box-shadow:", ";border-radius:50%;&&& svg{color:", ";fill:", ";}"], function (props) {
+  return props.theme.palette[background[props.status]];
+}, function (props) {
+  return boxShadow(props);
+}, function (props) {
+  return props.theme.palette[color[props.status]];
+}, function (props) {
+  return props.theme.palette[color[props.status]];
+});

package/dist/CardBadge/CardBadge.types.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare type BadgeStatus = 'success' | 'checked' | 'warning' | 'error' | 'default';
+export declare type CardBadgeProps = {
+    icon: React.ReactNode;
+    status?: BadgeStatus;
+};

package/dist/CardGroup/CardGroup.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { CardGroupProps } from './CardGroup.types';
+declare const CardGroup: React.FC<CardGroupProps>;
+export default CardGroup;

package/dist/CardGroup/CardGroup.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as S from './CardGroup.styles';
+
+var CardGroup = function CardGroup(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      columns = _ref.columns;
+  return React.createElement(S.Container, {
+    className: className,
+    items: columns
+  }, children);
+};
+
+export default CardGroup;

package/dist/CardGroup/CardGroup.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    items: number;
+}, never>;

package/dist/CardGroup/CardGroup.styles.js

@@ -0,0 +1,22 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import styled from 'styled-components'; // eslint-disable-next-line import/prefer-default-export
+
+export var Container = styled.div.withConfig({
+  displayName: "CardGroupstyles__Container",
+  componentId: "qyudjs-0"
+})(["display:grid;grid-column-gap:24px;grid-row-gap:24px;grid-template-columns:", ";width:100%;"], function (props) {
+  return _toConsumableArray(new Array(props.items)).map(function () {
+    return '1fr';
+  }).join(' ');
+});

package/dist/CardGroup/CardGroup.types.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface CardGroupProps {
+    className?: string;
+    children: React.ReactNode;
+    columns: number;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Card/Card';
+export { default as CardGroup } from './CardGroup/CardGroup';
+export { default as CardBadge } from './CardBadge/CardBadge';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default } from './Card/Card';
+export { default as CardGroup } from './CardGroup/CardGroup';
+export { default as CardBadge } from './CardBadge/CardBadge';

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@synerise/ds-card",
+  "version": "0.9.2",
+  "description": "Card UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-icon": "^0.45.0",
+    "@synerise/ds-typography": "^0.11.9",
+    "@synerise/ds-utils": "^0.8.31",
+    "react-animate-height": "^2.0.23",
+    "react-visibility-sensor": "^5.1.1"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "antd": "^4",
+    "react": ">=16.9.0 < 17.0.0"
+  },
+  "gitHead": "a9b2577e3c7e6b51625ab3ecca84600819ad0eeb"
+}