@commercetools-uikit/card 0.0.0-canary-2021830134526

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+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,52 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# Card
+
+## Description
+
+Cards are used to display content and actions on a single topic.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/card
+```
+
+```
+npm --save install @commercetools-uikit/card
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import Card from '@commercetools-uikit/card';
+
+const Example = () => (
+  <Card theme="light" type="raised">
+    <p>{`You'll never guess where I've been!`}</p>
+  </Card>
+);
+
+export default Example;
+```
+
+## Properties
+
+| Props        | Type                                                  | Required | Default    | Description                                                                                                                                                                                        |
+| ------------ | ----------------------------------------------------- | :------: | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`       | `union`<br/>Possible values:<br/>`'raised' , 'flat'`  |          | `'raised'` | Determines the visual effect of the card. A raised card has a box shadow while a flat card has just a border.                                                                                      |
+| `insetScale` | `union`<br/>Possible values:<br/>`'none' , 's' , 'm'` |          | `'m'`      | Determines the spacing (padding) that the content should have from the card borders. In case there is no space needed, you can pass `none`.                                                        |
+| `theme`      | `union`<br/>Possible values:<br/>`'light' , 'dark'`   |          | `'light'`  | Determines the background color of the card.                                                                                                                                                       |
+| `className`  | `string`                                              |          |            | Pass a custom CSS class, useful to override the styles.&#xA;<br>&#xA;NOTE: This is not recommended and should only be used for building new components&#xA;that require special style adjustments. |
+| `children`   | `ReactNode`                                           |          |            |                                                                                                                                                                                                    |

package/dist/commercetools-uikit-card.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";

package/dist/commercetools-uikit-card.cjs.dev.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _pt = require('prop-types');
+require('react');
+var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+var utils = require('@commercetools-uikit/utils');
+var Inset = require('@commercetools-uikit/spacings-inset');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var Inset__default = /*#__PURE__*/_interopDefault(Inset);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var Card = function Card(props) {
+  return jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
+    css: /*#__PURE__*/react.css("box-sizing:border-box;width:100%;font-size:1rem;box-shadow:", props.type === 'raised' ? designSystem.customProperties.shadow1 : 'none', ";border-radius:", designSystem.customProperties.borderRadius6, ";background:", props.theme === 'dark' ? designSystem.customProperties.colorNeutral95 : designSystem.customProperties.colorSurface, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Card;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDWSIsImZpbGUiOiJjYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgZmlsdGVyRGF0YUF0dHJpYnV0ZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC91dGlscyc7XG5pbXBvcnQgSW5zZXQgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MtaW5zZXQnO1xuXG50eXBlIFRDYXJkUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIHRoZSB2aXN1YWwgZWZmZWN0IG9mIHRoZSBjYXJkLiBBIHJhaXNlZCBjYXJkIGhhcyBhIGJveCBzaGFkb3cgd2hpbGUgYSBmbGF0IGNhcmQgaGFzIGp1c3QgYSBib3JkZXIuXG4gICAqL1xuICB0eXBlOiAncmFpc2VkJyB8ICdmbGF0JztcbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIHNwYWNpbmcgKHBhZGRpbmcpIHRoYXQgdGhlIGNvbnRlbnQgc2hvdWxkIGhhdmUgZnJvbSB0aGUgY2FyZCBib3JkZXJzLiBJbiBjYXNlIHRoZXJlIGlzIG5vIHNwYWNlIG5lZWRlZCwgeW91IGNhbiBwYXNzIGBub25lYC5cbiAgICovXG4gIGluc2V0U2NhbGU6ICdub25lJyB8ICdzJyB8ICdtJztcbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIGJhY2tncm91bmQgY29sb3Igb2YgdGhlIGNhcmQuXG4gICAqL1xuICB0aGVtZTogJ2xpZ2h0JyB8ICdkYXJrJztcbiAgLyoqXG4gICAqIFBhc3MgYSBjdXN0b20gQ1NTIGNsYXNzLCB1c2VmdWwgdG8gb3ZlcnJpZGUgdGhlIHN0eWxlcy5cbiAgICogPGJyPlxuICAgKiBOT1RFOiBUaGlzIGlzIG5vdCByZWNvbW1lbmRlZCBhbmQgc2hvdWxkIG9ubHkgYmUgdXNlZCBmb3IgYnVpbGRpbmcgbmV3IGNvbXBvbmVudHNcbiAgICogdGhhdCByZXF1aXJlIHNwZWNpYWwgc3R5bGUgYWRqdXN0bWVudHMuXG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgQ2FyZCA9IChwcm9wczogVENhcmRQcm9wcykgPT4gKFxuICA8ZGl2XG4gICAgey4uLmZpbHRlckRhdGFBdHRyaWJ1dGVzKHByb3BzKX1cbiAgICBjc3M9e2Nzc2BcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIGZvbnQtc2l6ZTogMXJlbTtcbiAgICAgIGJveC1zaGFkb3c6ICR7cHJvcHMudHlwZSA9PT0gJ3JhaXNlZCcgPyB2YXJzLnNoYWRvdzEgOiAnbm9uZSd9O1xuICAgICAgYm9yZGVyLXJhZGl1czogJHt2YXJzLmJvcmRlclJhZGl1czZ9O1xuICAgICAgYmFja2dyb3VuZDogJHtwcm9wcy50aGVtZSA9PT0gJ2RhcmsnXG4gICAgICAgID8gdmFycy5jb2xvck5ldXRyYWw5NVxuICAgICAgICA6IHZhcnMuY29sb3JTdXJmYWNlfTtcbiAgICBgfVxuICAgIC8vIEFsbG93IHRvIG92ZXJyaWRlIHRoZSBzdHlsZXMgYnkgcGFzc2luZyBhIGBjbGFzc05hbWVgIHByb3AuXG4gICAgLy8gQ3VzdG9tIHN0eWxlcyBjYW4gYWxzbyBiZSBwYXNzZWQgdXNpbmcgdGhlIGBjc3NgIHByb3AgZnJvbSBlbW90aW9uLlxuICAgIC8vIGh0dHBzOi8vZW1vdGlvbi5zaC9kb2NzL2Nzcy1wcm9wI3N0eWxlLXByZWNlZGVuY2VcbiAgICBjbGFzc05hbWU9e3Byb3BzLmNsYXNzTmFtZX1cbiAgPlxuICAgIHtwcm9wcy5pbnNldFNjYWxlID09PSAnbm9uZScgPyAoXG4gICAgICAvLyBVc2UgYSBgPGRpdj5gIHRvIGVuc3VyZSB0aGF0IHRoZXJlIGlzIGFsd2F5cyBhIHdyYXBwZXIgY29udGFpbmVyLlxuICAgICAgLy8gVGhpcyBpcyBtb3N0bHkgdXNlZnVsIGluIGNhc2UgY3VzdG9tIHN0eWxlcyBhcmUgdGFyZ2V0aW5nIHRoaXMgZWxlbWVudC5cbiAgICAgIDxkaXY+e3Byb3BzLmNoaWxkcmVufTwvZGl2PlxuICAgICkgOiAoXG4gICAgICA8SW5zZXQgc2NhbGU9e3Byb3BzLmluc2V0U2NhbGV9Pntwcm9wcy5jaGlsZHJlbn08L0luc2V0PlxuICAgICl9XG4gIDwvZGl2PlxuKTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRDYXJkUHJvcHMsICd0eXBlJyB8ICd0aGVtZScgfCAnaW5zZXRTY2FsZSc+ID0ge1xuICB0eXBlOiAncmFpc2VkJyxcbiAgdGhlbWU6ICdsaWdodCcsXG4gIGluc2V0U2NhbGU6ICdtJyxcbn07XG5cbkNhcmQuZGlzcGxheU5hbWUgPSAnQ2FyZCc7XG5DYXJkLmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgQ2FyZDtcbiJdfQ== */") // Allow to override the styles by passing a `className` prop.
+    // Custom styles can also be passed using the `css` prop from emotion.
+    // https://emotion.sh/docs/css-prop#style-precedence
+    ,
+    className: props.className,
+    children: props.insetScale === 'none' ? // Use a `<div>` to ensure that there is always a wrapper container.
+    // This is mostly useful in case custom styles are targeting this element.
+    jsxRuntime.jsx("div", {
+      children: props.children
+    }) : jsxRuntime.jsx(Inset__default['default'], {
+      scale: props.insetScale,
+      children: props.children
+    })
+  }));
+};
+
+Card.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: _pt__default['default'].oneOf(['raised', 'flat']).isRequired,
+  insetScale: _pt__default['default'].oneOf(['none', 's', 'm']).isRequired,
+  theme: _pt__default['default'].oneOf(['light', 'dark']).isRequired,
+  className: _pt__default['default'].string,
+  children: _pt__default['default'].node
+} : {};
+var defaultProps = {
+  type: 'raised',
+  theme: 'light',
+  insetScale: 'm'
+};
+Card.displayName = 'Card';
+Card.defaultProps = defaultProps;
+var Card$1 = Card;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = Card$1;
+exports.version = version;

package/dist/commercetools-uikit-card.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-card.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-card.cjs.dev.js");
+}

package/dist/commercetools-uikit-card.cjs.prod.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('prop-types');
+require('react');
+var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+var utils = require('@commercetools-uikit/utils');
+var Inset = require('@commercetools-uikit/spacings-inset');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var Inset__default = /*#__PURE__*/_interopDefault(Inset);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var Card = function Card(props) {
+  return jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
+    css: /*#__PURE__*/react.css("box-sizing:border-box;width:100%;font-size:1rem;box-shadow:", props.type === 'raised' ? designSystem.customProperties.shadow1 : 'none', ";border-radius:", designSystem.customProperties.borderRadius6, ";background:", props.theme === 'dark' ? designSystem.customProperties.colorNeutral95 : designSystem.customProperties.colorSurface, ";" + ("" ), "" ) // Allow to override the styles by passing a `className` prop.
+    // Custom styles can also be passed using the `css` prop from emotion.
+    // https://emotion.sh/docs/css-prop#style-precedence
+    ,
+    className: props.className,
+    children: props.insetScale === 'none' ? // Use a `<div>` to ensure that there is always a wrapper container.
+    // This is mostly useful in case custom styles are targeting this element.
+    jsxRuntime.jsx("div", {
+      children: props.children
+    }) : jsxRuntime.jsx(Inset__default['default'], {
+      scale: props.insetScale,
+      children: props.children
+    })
+  }));
+};
+
+Card.propTypes = {};
+var defaultProps = {
+  type: 'raised',
+  theme: 'light',
+  insetScale: 'm'
+};
+Card.displayName = 'Card';
+Card.defaultProps = defaultProps;
+var Card$1 = Card;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = Card$1;
+exports.version = version;

package/dist/commercetools-uikit-card.esm.js

@@ -0,0 +1,59 @@
+import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
+import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _pt from 'prop-types';
+import 'react';
+import { css } from '@emotion/react';
+import { customProperties } from '@commercetools-uikit/design-system';
+import { filterDataAttributes } from '@commercetools-uikit/utils';
+import Inset from '@commercetools-uikit/spacings-inset';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var Card = function Card(props) {
+  return jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(props)), {}, {
+    css: /*#__PURE__*/css("box-sizing:border-box;width:100%;font-size:1rem;box-shadow:", props.type === 'raised' ? customProperties.shadow1 : 'none', ";border-radius:", customProperties.borderRadius6, ";background:", props.theme === 'dark' ? customProperties.colorNeutral95 : customProperties.colorSurface, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Card;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDWSIsImZpbGUiOiJjYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgZmlsdGVyRGF0YUF0dHJpYnV0ZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC91dGlscyc7XG5pbXBvcnQgSW5zZXQgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MtaW5zZXQnO1xuXG50eXBlIFRDYXJkUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIHRoZSB2aXN1YWwgZWZmZWN0IG9mIHRoZSBjYXJkLiBBIHJhaXNlZCBjYXJkIGhhcyBhIGJveCBzaGFkb3cgd2hpbGUgYSBmbGF0IGNhcmQgaGFzIGp1c3QgYSBib3JkZXIuXG4gICAqL1xuICB0eXBlOiAncmFpc2VkJyB8ICdmbGF0JztcbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIHNwYWNpbmcgKHBhZGRpbmcpIHRoYXQgdGhlIGNvbnRlbnQgc2hvdWxkIGhhdmUgZnJvbSB0aGUgY2FyZCBib3JkZXJzLiBJbiBjYXNlIHRoZXJlIGlzIG5vIHNwYWNlIG5lZWRlZCwgeW91IGNhbiBwYXNzIGBub25lYC5cbiAgICovXG4gIGluc2V0U2NhbGU6ICdub25lJyB8ICdzJyB8ICdtJztcbiAgLyoqXG4gICAqIERldGVybWluZXMgdGhlIGJhY2tncm91bmQgY29sb3Igb2YgdGhlIGNhcmQuXG4gICAqL1xuICB0aGVtZTogJ2xpZ2h0JyB8ICdkYXJrJztcbiAgLyoqXG4gICAqIFBhc3MgYSBjdXN0b20gQ1NTIGNsYXNzLCB1c2VmdWwgdG8gb3ZlcnJpZGUgdGhlIHN0eWxlcy5cbiAgICogPGJyPlxuICAgKiBOT1RFOiBUaGlzIGlzIG5vdCByZWNvbW1lbmRlZCBhbmQgc2hvdWxkIG9ubHkgYmUgdXNlZCBmb3IgYnVpbGRpbmcgbmV3IGNvbXBvbmVudHNcbiAgICogdGhhdCByZXF1aXJlIHNwZWNpYWwgc3R5bGUgYWRqdXN0bWVudHMuXG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgQ2FyZCA9IChwcm9wczogVENhcmRQcm9wcykgPT4gKFxuICA8ZGl2XG4gICAgey4uLmZpbHRlckRhdGFBdHRyaWJ1dGVzKHByb3BzKX1cbiAgICBjc3M9e2Nzc2BcbiAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIGZvbnQtc2l6ZTogMXJlbTtcbiAgICAgIGJveC1zaGFkb3c6ICR7cHJvcHMudHlwZSA9PT0gJ3JhaXNlZCcgPyB2YXJzLnNoYWRvdzEgOiAnbm9uZSd9O1xuICAgICAgYm9yZGVyLXJhZGl1czogJHt2YXJzLmJvcmRlclJhZGl1czZ9O1xuICAgICAgYmFja2dyb3VuZDogJHtwcm9wcy50aGVtZSA9PT0gJ2RhcmsnXG4gICAgICAgID8gdmFycy5jb2xvck5ldXRyYWw5NVxuICAgICAgICA6IHZhcnMuY29sb3JTdXJmYWNlfTtcbiAgICBgfVxuICAgIC8vIEFsbG93IHRvIG92ZXJyaWRlIHRoZSBzdHlsZXMgYnkgcGFzc2luZyBhIGBjbGFzc05hbWVgIHByb3AuXG4gICAgLy8gQ3VzdG9tIHN0eWxlcyBjYW4gYWxzbyBiZSBwYXNzZWQgdXNpbmcgdGhlIGBjc3NgIHByb3AgZnJvbSBlbW90aW9uLlxuICAgIC8vIGh0dHBzOi8vZW1vdGlvbi5zaC9kb2NzL2Nzcy1wcm9wI3N0eWxlLXByZWNlZGVuY2VcbiAgICBjbGFzc05hbWU9e3Byb3BzLmNsYXNzTmFtZX1cbiAgPlxuICAgIHtwcm9wcy5pbnNldFNjYWxlID09PSAnbm9uZScgPyAoXG4gICAgICAvLyBVc2UgYSBgPGRpdj5gIHRvIGVuc3VyZSB0aGF0IHRoZXJlIGlzIGFsd2F5cyBhIHdyYXBwZXIgY29udGFpbmVyLlxuICAgICAgLy8gVGhpcyBpcyBtb3N0bHkgdXNlZnVsIGluIGNhc2UgY3VzdG9tIHN0eWxlcyBhcmUgdGFyZ2V0aW5nIHRoaXMgZWxlbWVudC5cbiAgICAgIDxkaXY+e3Byb3BzLmNoaWxkcmVufTwvZGl2PlxuICAgICkgOiAoXG4gICAgICA8SW5zZXQgc2NhbGU9e3Byb3BzLmluc2V0U2NhbGV9Pntwcm9wcy5jaGlsZHJlbn08L0luc2V0PlxuICAgICl9XG4gIDwvZGl2PlxuKTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRDYXJkUHJvcHMsICd0eXBlJyB8ICd0aGVtZScgfCAnaW5zZXRTY2FsZSc+ID0ge1xuICB0eXBlOiAncmFpc2VkJyxcbiAgdGhlbWU6ICdsaWdodCcsXG4gIGluc2V0U2NhbGU6ICdtJyxcbn07XG5cbkNhcmQuZGlzcGxheU5hbWUgPSAnQ2FyZCc7XG5DYXJkLmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuZXhwb3J0IGRlZmF1bHQgQ2FyZDtcbiJdfQ== */") // Allow to override the styles by passing a `className` prop.
+    // Custom styles can also be passed using the `css` prop from emotion.
+    // https://emotion.sh/docs/css-prop#style-precedence
+    ,
+    className: props.className,
+    children: props.insetScale === 'none' ? // Use a `<div>` to ensure that there is always a wrapper container.
+    // This is mostly useful in case custom styles are targeting this element.
+    jsx("div", {
+      children: props.children
+    }) : jsx(Inset, {
+      scale: props.insetScale,
+      children: props.children
+    })
+  }));
+};
+
+Card.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: _pt.oneOf(['raised', 'flat']).isRequired,
+  insetScale: _pt.oneOf(['none', 's', 'm']).isRequired,
+  theme: _pt.oneOf(['light', 'dark']).isRequired,
+  className: _pt.string,
+  children: _pt.node
+} : {};
+var defaultProps = {
+  type: 'raised',
+  theme: 'light',
+  insetScale: 'm'
+};
+Card.displayName = 'Card';
+Card.defaultProps = defaultProps;
+var Card$1 = Card;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+export { Card$1 as default, version };

package/dist/declarations/src/card.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+declare type TCardProps = {
+    type: 'raised' | 'flat';
+    insetScale: 'none' | 's' | 'm';
+    theme: 'light' | 'dark';
+    className?: string;
+    children?: ReactNode;
+};
+declare const Card: {
+    (props: TCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<TCardProps, "type" | "theme" | "insetScale">;
+};
+export default Card;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './card';
+export { default as version } from './version';

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "0.0.0-canary-2021830134526";
+export default _default;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@commercetools-uikit/card",
+  "description": "Cards are used to display content and actions on a single topic.",
+  "version": "0.0.0-canary-2021830134526",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/card"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-card.cjs.js",
+  "module": "dist/commercetools-uikit-card.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "../../../scripts/version.js replace"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.14.8",
+    "@babel/runtime-corejs3": "7.14.9",
+    "@commercetools-uikit/design-system": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/spacings-inset": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/utils": "12.2.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "prop-types": "15.7.2"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}