@jobber/components 2.86.0 → 2.86.2

package/dist/InputValidation/InputValidation.d.ts

@@ -1,8 +1,8 @@
-interface InputValidationProps {
-    /**
-     * Validation message to be displayed
-     */
-    message: string;
-}
-export declare function InputValidation({ message }: InputValidationProps): JSX.Element;
-export {};
+interface InputValidationProps {
+    /**
+     * Validation message to be displayed
+     */
+    message: string;
+}
+export declare function InputValidation({ message }: InputValidationProps): JSX.Element;
+export {};

package/dist/InputValidation/index.d.ts

@@ -1 +1 @@
-export * from "./InputValidation";
+export * from "./InputValidation";

package/dist/InputValidation/index.js

@@ -2,31 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
+var InputValidation = require('../InputValidation-24d3621a.js');
+require('react');
+require('framer-motion');
+require('../style-inject.es-dcee06b6.js');
+require('../Text-9bc093e9.js');
+require('../Typography-7e542a72.js');
+require('../tslib.es6-5b50eb8e.js');
 require('classnames');
-require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
-var framerMotion = require('framer-motion');
 
-var css = "._9gFxrZogiKbS3gPLv_I79 {\n  margin-top: var(--space-smaller);\n}\n\n._3QUt88pIWZatkYLVYFlRuL {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-smaller);\n  padding-left: 0;\n}\n\n._3QUt88pIWZatkYLVYFlRuL > svg {\n  margin-right: var(--space-smaller);\n}\n\n._3QUt88pIWZatkYLVYFlRuL:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n";
-var styles = {"hasValidationMessage":"_9gFxrZogiKbS3gPLv_I79","message":"_3QUt88pIWZatkYLVYFlRuL"};
-__chunk_2.styleInject(css);
 
-function InputValidation(_a) {
-    var message = _a.message;
-    var messages = [message];
-    var variants = {
-        slideOut: { y: "5%", height: 0, opacity: 0 },
-        slideIn: { y: 0, height: "100%", opacity: 1 },
-    };
-    return (React__default.createElement(React__default.Fragment, null, messages && messages.length > 0 && (React__default.createElement(framerMotion.AnimatePresence, null, messages.map(function (msg) { return (React__default.createElement(framerMotion.motion.div, { key: "validation-" + msg, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
-        React__default.createElement("div", { className: styles.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
-            React__default.createElement(index$1.Text, { variation: "error" }, msg)))); })))));
-}
 
-exports.InputValidation = InputValidation;
+exports.InputValidation = InputValidation.InputValidation;

package/dist/InputValidation-24d3621a.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var Text = require('./Text-9bc093e9.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css = "._9gFxrZogiKbS3gPLv_I79 {\n  margin-top: var(--space-smaller);\n}\n\n._3QUt88pIWZatkYLVYFlRuL {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-smaller);\n  padding-left: 0;\n}\n\n._3QUt88pIWZatkYLVYFlRuL > svg {\n  margin-right: var(--space-smaller);\n}\n\n._3QUt88pIWZatkYLVYFlRuL:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n";
+var styles = {"hasValidationMessage":"_9gFxrZogiKbS3gPLv_I79","message":"_3QUt88pIWZatkYLVYFlRuL"};
+styleInject_es.styleInject(css);
+
+function InputValidation(_a) {
+    var message = _a.message;
+    var messages = [message];
+    var variants = {
+        slideOut: { y: "5%", height: 0, opacity: 0 },
+        slideIn: { y: 0, height: "100%", opacity: 1 },
+    };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, messages && messages.length > 0 && (React__default["default"].createElement(framerMotion.AnimatePresence, null, messages.map(function (msg) { return (React__default["default"].createElement(framerMotion.motion.div, { key: "validation-" + msg, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
+        React__default["default"].createElement("div", { className: styles.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
+            React__default["default"].createElement(Text.Text, { variation: "error" }, msg)))); })))));
+}
+
+exports.InputValidation = InputValidation;

package/dist/LightBox/LightBox.d.ts

@@ -1,37 +1,37 @@
-import "react-image-lightbox/style.css";
-interface PresentedImage {
-    title?: string;
-    caption?: string;
-    url: string;
-}
-interface RequestCloseOptions {
-    lastPosition: number;
-}
-interface LightBoxProps {
-    /**
-     * Specify if the Lightbox is open or closed.
-     */
-    readonly open: boolean;
-    /**
-     * Images is an array of objects defining a LightBox image. This object consists of
-     * `title`, `caption` and `url`. `title` and `caption` are optional, `url` is
-     * required, for each image.
-     */
-    readonly images: PresentedImage[];
-    /**
-     * Use this to specify which image in `images` to initialize the lightbox with.
-     * This is useful when you have a collection of thumbnails as you only need one
-     * collection of image urls, order doesn't matter.
-     */
-    readonly imageIndex?: number;
-    /**
-     * This function must set open to false in order to close the lightbox. Note there
-     * is a 300ms easing animation on lightbox close that occurs before this function
-     * is called.
-     * This function receives an object as an argument with the key `lastPosition`
-     * that has the index of the image the user was on when LightBox was closed.
-     */
-    onRequestClose(options: RequestCloseOptions): void;
-}
-export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): JSX.Element;
-export {};
+import "react-image-lightbox/style.css";
+interface PresentedImage {
+    title?: string;
+    caption?: string;
+    url: string;
+}
+interface RequestCloseOptions {
+    lastPosition: number;
+}
+interface LightBoxProps {
+    /**
+     * Specify if the Lightbox is open or closed.
+     */
+    readonly open: boolean;
+    /**
+     * Images is an array of objects defining a LightBox image. This object consists of
+     * `title`, `caption` and `url`. `title` and `caption` are optional, `url` is
+     * required, for each image.
+     */
+    readonly images: PresentedImage[];
+    /**
+     * Use this to specify which image in `images` to initialize the lightbox with.
+     * This is useful when you have a collection of thumbnails as you only need one
+     * collection of image urls, order doesn't matter.
+     */
+    readonly imageIndex?: number;
+    /**
+     * This function must set open to false in order to close the lightbox. Note there
+     * is a 300ms easing animation on lightbox close that occurs before this function
+     * is called.
+     * This function receives an object as an argument with the key `lastPosition`
+     * that has the index of the image the user was on when LightBox was closed.
+     */
+    onRequestClose(options: RequestCloseOptions): void;
+}
+export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): JSX.Element;
+export {};

package/dist/LightBox/index.d.ts

@@ -1 +1 @@
-export { LightBox } from "./LightBox";
+export { LightBox } from "./LightBox";

package/dist/LightBox/index.js

@@ -2,41 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var ExternalLightBox = _interopDefault(require('react-image-lightbox'));
+var LightBox = require('../LightBox-b893b656.js');
+require('../tslib.es6-5b50eb8e.js');
+require('react');
+require('react-image-lightbox');
+require('../style-inject.es-dcee06b6.js');
 require('react-image-lightbox/style.css');
 
-var css = "._23H2TI8rNmnv0zlHOHZooa.ril__outer {\n  font-family: \"Source Sans Pro\", Helvetica, Arial, sans-serif;\n  background-color: transparent;\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer:before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-overlay);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__captionContent {\n  color: var(--color-greyBlue--lighter);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__toolbarItem {\n  color: var(--color-greyBlue--lighter);\n}\n";
-var styles = {"wrapper":"_23H2TI8rNmnv0zlHOHZooa"};
-__chunk_2.styleInject(css);
 
-function LightBox(_a) {
-    var open = _a.open, images = _a.images, _b = _a.imageIndex, imageIndex = _b === void 0 ? 0 : _b, onRequestClose = _a.onRequestClose;
-    var _c = __chunk_1.__read(React.useState(imageIndex), 2), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
-    var nextSrc = undefined;
-    var prevSrc = undefined;
-    if (images.length > 1) {
-        nextSrc = images[(currentImageIndex + 1) % images.length].url;
-        prevSrc =
-            images[(currentImageIndex + images.length - 1) % images.length].url;
-    }
-    React.useEffect(function () {
-        setCurrentImageIndex(imageIndex);
-    }, [imageIndex]);
-    return (React__default.createElement(React__default.Fragment, null, open && (React__default.createElement(ExternalLightBox, { wrapperClassName: styles.wrapper, mainSrc: images[currentImageIndex].url, enableZoom: false, nextSrc: nextSrc, prevSrc: prevSrc, imageTitle: images[currentImageIndex].title, imageCaption: images[currentImageIndex].caption, onCloseRequest: function () {
-            return onRequestClose({ lastPosition: currentImageIndex });
-        }, onMovePrevRequest: handleMovePrevious, onMoveNextRequest: handleMoveNext }))));
-    function handleMovePrevious() {
-        setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
-    }
-    function handleMoveNext() {
-        setCurrentImageIndex((currentImageIndex + 1) % images.length);
-    }
-}
 
-exports.LightBox = LightBox;
+exports.LightBox = LightBox.LightBox;

package/dist/LightBox-b893b656.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var ExternalLightBox = require('react-image-lightbox');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+require('react-image-lightbox/style.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ExternalLightBox__default = /*#__PURE__*/_interopDefaultLegacy(ExternalLightBox);
+
+var css = "._23H2TI8rNmnv0zlHOHZooa.ril__outer {\n  font-family: \"Source Sans Pro\", Helvetica, Arial, sans-serif;\n  background-color: transparent;\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer:before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-overlay);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__captionContent {\n  color: var(--color-greyBlue--lighter);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__toolbarItem {\n  color: var(--color-greyBlue--lighter);\n}\n";
+var styles = {"wrapper":"_23H2TI8rNmnv0zlHOHZooa"};
+styleInject_es.styleInject(css);
+
+function LightBox(_a) {
+    var open = _a.open, images = _a.images, _b = _a.imageIndex, imageIndex = _b === void 0 ? 0 : _b, onRequestClose = _a.onRequestClose;
+    var _c = tslib_es6.__read(React.useState(imageIndex), 2), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
+    var nextSrc = undefined;
+    var prevSrc = undefined;
+    if (images.length > 1) {
+        nextSrc = images[(currentImageIndex + 1) % images.length].url;
+        prevSrc =
+            images[(currentImageIndex + images.length - 1) % images.length].url;
+    }
+    React.useEffect(function () {
+        setCurrentImageIndex(imageIndex);
+    }, [imageIndex]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement(ExternalLightBox__default["default"], { wrapperClassName: styles.wrapper, mainSrc: images[currentImageIndex].url, enableZoom: false, nextSrc: nextSrc, prevSrc: prevSrc, imageTitle: images[currentImageIndex].title, imageCaption: images[currentImageIndex].caption, onCloseRequest: function () {
+            return onRequestClose({ lastPosition: currentImageIndex });
+        }, onMovePrevRequest: handleMovePrevious, onMoveNextRequest: handleMoveNext }))));
+    function handleMovePrevious() {
+        setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
+    }
+    function handleMoveNext() {
+        setCurrentImageIndex((currentImageIndex + 1) % images.length);
+    }
+}
+
+exports.LightBox = LightBox;

package/dist/List/List.d.ts

@@ -1,11 +1,11 @@
-import { ListItemProps } from "./ListItem";
-interface ListProps {
-    /**
-     * Array of the list items.
-     *
-     * {@link https://atlantis.frend.space/components/list#list-item-props List Item Props}
-     */
-    readonly items: ListItemProps[];
-}
-export declare function List({ items }: ListProps): JSX.Element;
-export {};
+import { ListItemProps } from "./ListItem";
+interface ListProps {
+    /**
+     * Array of the list items.
+     *
+     * {@link https://atlantis.frend.space/components/list#list-item-props List Item Props}
+     */
+    readonly items: ListItemProps[];
+}
+export declare function List({ items }: ListProps): JSX.Element;
+export {};

package/dist/List/ListItem.d.ts

@@ -1,54 +1,54 @@
-import React from "react";
-import { IconColorNames, IconNames } from "@jobber/design";
-export interface ListItemProps {
-    /**
-     * Subdued text under the `content` prop.
-     */
-    readonly caption?: string;
-    /**
-     * List item content. This accepts a string for a simple content and an array
-     * for a multi line content.
-     * This supports basic markdown node types such as `_italic_` and `**bold**`.
-     */
-    readonly content: string | string[];
-    /**
-     * Shows an icon on the left side of the contents.
-     */
-    readonly icon?: IconNames;
-    /**
-     * Changes the color of the icons.
-     */
-    readonly iconColor?: IconColorNames;
-    /**
-     * The ID of the list item. This will be helpful to know the selected list
-     * items when a batch action is implemented.
-     */
-    readonly id: number | string;
-    /**
-     * Highlights the list item with the lightest green icon. This communicates
-     * that the line item needs attention.
-     */
-    readonly isActive?: boolean;
-    /**
-     * This determines how and when to group the list items
-     */
-    readonly section?: string;
-    /**
-     * Adds a heading.
-     */
-    readonly title?: string;
-    /**
-     * This turns the list item into a clickable link.
-     */
-    readonly url?: string;
-    /**
-     * A numeric value of a row. This always shows up in the right side of the row
-     * with a text aligned to the right.
-     */
-    readonly value?: string;
-    /**
-     * Callback when a list item gets clicked.
-     */
-    onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
-}
-export declare function ListItem({ caption, content, icon, iconColor, id, isActive, onClick, title, url, value, }: ListItemProps): JSX.Element;
+import React from "react";
+import { IconColorNames, IconNames } from "@jobber/design";
+export interface ListItemProps {
+    /**
+     * Subdued text under the `content` prop.
+     */
+    readonly caption?: string;
+    /**
+     * List item content. This accepts a string for a simple content and an array
+     * for a multi line content.
+     * This supports basic markdown node types such as `_italic_` and `**bold**`.
+     */
+    readonly content: string | string[];
+    /**
+     * Shows an icon on the left side of the contents.
+     */
+    readonly icon?: IconNames;
+    /**
+     * Changes the color of the icons.
+     */
+    readonly iconColor?: IconColorNames;
+    /**
+     * The ID of the list item. This will be helpful to know the selected list
+     * items when a batch action is implemented.
+     */
+    readonly id: number | string;
+    /**
+     * Highlights the list item with the lightest green icon. This communicates
+     * that the line item needs attention.
+     */
+    readonly isActive?: boolean;
+    /**
+     * This determines how and when to group the list items
+     */
+    readonly section?: string;
+    /**
+     * Adds a heading.
+     */
+    readonly title?: string;
+    /**
+     * This turns the list item into a clickable link.
+     */
+    readonly url?: string;
+    /**
+     * A numeric value of a row. This always shows up in the right side of the row
+     * with a text aligned to the right.
+     */
+    readonly value?: string;
+    /**
+     * Callback when a list item gets clicked.
+     */
+    onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
+}
+export declare function ListItem({ caption, content, icon, iconColor, id, isActive, onClick, title, url, value, }: ListItemProps): JSX.Element;

package/dist/List/index.d.ts

@@ -1 +1 @@
-export { List } from "./List";
+export { List } from "./List";

package/dist/List/index.js

@@ -2,91 +2,93 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
+var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-var index = require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
-require('@jobber/design');
-var index$2 = require('../Icon/index.js');
-var index$3 = require('../Heading/index.js');
+var classnames = require('classnames');
 var lodash = require('lodash');
-require('../Content/index.js');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var Icon = require('../Icon-d5ad1a6d.js');
+var Text = require('../Text-9bc093e9.js');
+var Heading = require('../Heading-56750113.js');
+var Typography = require('../Typography-7e542a72.js');
+var Markdown = require('../Markdown-69986c49.js');
+var Emphasis = require('../Emphasis-fd845639.js');
+require('@jobber/design');
 require('react-markdown');
-var index$4$1 = require('../Emphasis/index.js');
-var index$6 = require('../Markdown/index.js');
+require('../Content-18de5fbb.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var css = "._234cpupwZcQnNH7lwFvu3w {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.-W0NAXIbeNMPrAHa9AjQF:not(:last-child) {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._3gKGIvbWaCDPfDxdX_9dIp {\n  position: relative;\n}\n\n._3gKGIvbWaCDPfDxdX_9dIp:not(:last-child) ._234cpupwZcQnNH7lwFvu3w {\n  padding-bottom: var(--space-large);\n}\n";
-var styles = {"list":"_234cpupwZcQnNH7lwFvu3w","item":"-W0NAXIbeNMPrAHa9AjQF","section":"_3gKGIvbWaCDPfDxdX_9dIp"};
-__chunk_2.styleInject(css);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css$2 = "._234cpupwZcQnNH7lwFvu3w {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.-W0NAXIbeNMPrAHa9AjQF:not(:last-child) {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._3gKGIvbWaCDPfDxdX_9dIp {\n  position: relative;\n}\n\n._3gKGIvbWaCDPfDxdX_9dIp:not(:last-child) ._234cpupwZcQnNH7lwFvu3w {\n  padding-bottom: var(--space-large);\n}\n";
+var styles$1 = {"list":"_234cpupwZcQnNH7lwFvu3w","item":"-W0NAXIbeNMPrAHa9AjQF","section":"_3gKGIvbWaCDPfDxdX_9dIp"};
+styleInject_es.styleInject(css$2);
 
 var css$1 = ".LPbjUDShk6cK3GXbzTC55 {\n  position: sticky;\n  top: 0;\n  padding: var(--space-small) var(--space-base);\n  border-bottom: 1px solid var(--color-border--section);\n  background-color: var(--color-surface);\n}\n\n._20KoAmqdzhCQHgym7QjG7l {\n  border-bottom-color: var(--color-greyBlue--light);\n  color: var(--color-greyBlue--light);\n}\n\n._1oDR35oSyONUPA0d94_kD- {\n  border-bottom-color: var(--color-green);\n  color: var(--color-green);\n}\n\n._17GCZtU8iTLoixbxcutdmt,\n._2GunPnEK6S7nxA3WhlBVoi {\n  border-bottom-color: var(--color-blue);\n  color: var(--color-blue);\n}\n\n._3pKjX8118O_JdihnJByRU7 {\n  border-bottom-color: var(--color-orange);\n  color: var(--color-orange);\n}\n\n._3Mm3SSqRayToZ4YENnBXTi {\n  border-bottom-color: var(--color-red);\n  color: var(--color-red);\n}\n\n._1JgWVq-AQjSXSFCthM9I_i {\n  border-bottom-color: var(--color-teal);\n  color: var(--color-teal);\n}\n";
 var sectionStyles = {"sectionHeader":"LPbjUDShk6cK3GXbzTC55","greyBlue":"_20KoAmqdzhCQHgym7QjG7l","green":"_1oDR35oSyONUPA0d94_kD-","blue":"_17GCZtU8iTLoixbxcutdmt","archived":"_2GunPnEK6S7nxA3WhlBVoi","orange":"_3pKjX8118O_JdihnJByRU7","red":"_3Mm3SSqRayToZ4YENnBXTi","teal":"_1JgWVq-AQjSXSFCthM9I_i"};
-__chunk_2.styleInject(css$1);
+styleInject_es.styleInject(css$1);
 
-var css$2 = "._2iTo0SHtApSj1Pz0jAi44D {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: none;\n  text-align: left;\n  text-decoration: none;\n  background-color: transparent;\n  transition: background-color var(--timing-base);\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._2iTo0SHtApSj1Pz0jAi44D > * {\n  padding: var(--space-small);\n}\n\n._3fuo63dN8BYlteQspAWEB {\n  cursor: pointer;\n}\n\n._3fuo63dN8BYlteQspAWEB:hover,\n._3fuo63dN8BYlteQspAWEB:focus {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._2Ba10JIy4V4gV8mql4xqHo {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  width: var(--space-large);\n  height: var(--space-large);\n  box-sizing: content-box;\n}\n\n._1vz3KPZUhpnltJyF8wN7V1 {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  min-width: 0;\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._1vkwx_Vuhn930_zHsgEmz3 {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  text-align: right;\n}\n\n/* States */\n\n._2QvWobst7cPMHu3OkCl2SG {\n  background-color: var(--color-surface--active);\n}\n\n/* TODO: Move truncate in typography */\n\n.d36Bq7j0EKz3c5tj7HrWN {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
-var styles$1 = {"action":"_2iTo0SHtApSj1Pz0jAi44D","hoverable":"_3fuo63dN8BYlteQspAWEB","icon":"_2Ba10JIy4V4gV8mql4xqHo","info":"_1vz3KPZUhpnltJyF8wN7V1","amount":"_1vkwx_Vuhn930_zHsgEmz3","isActive":"_2QvWobst7cPMHu3OkCl2SG","truncate":"d36Bq7j0EKz3c5tj7HrWN"};
-__chunk_2.styleInject(css$2);
+var css = "._2iTo0SHtApSj1Pz0jAi44D {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: none;\n  text-align: left;\n  text-decoration: none;\n  background-color: transparent;\n  transition: background-color var(--timing-base);\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._2iTo0SHtApSj1Pz0jAi44D > * {\n  padding: var(--space-small);\n}\n\n._3fuo63dN8BYlteQspAWEB {\n  cursor: pointer;\n}\n\n._3fuo63dN8BYlteQspAWEB:hover,\n._3fuo63dN8BYlteQspAWEB:focus {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._2Ba10JIy4V4gV8mql4xqHo {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  width: var(--space-large);\n  height: var(--space-large);\n  box-sizing: content-box;\n}\n\n._1vz3KPZUhpnltJyF8wN7V1 {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  min-width: 0;\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._1vkwx_Vuhn930_zHsgEmz3 {\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  text-align: right;\n}\n\n/* States */\n\n._2QvWobst7cPMHu3OkCl2SG {\n  background-color: var(--color-surface--active);\n}\n\n/* TODO: Move truncate in typography */\n\n.d36Bq7j0EKz3c5tj7HrWN {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+var styles = {"action":"_2iTo0SHtApSj1Pz0jAi44D","hoverable":"_3fuo63dN8BYlteQspAWEB","icon":"_2Ba10JIy4V4gV8mql4xqHo","info":"_1vz3KPZUhpnltJyF8wN7V1","amount":"_1vkwx_Vuhn930_zHsgEmz3","isActive":"_2QvWobst7cPMHu3OkCl2SG","truncate":"d36Bq7j0EKz3c5tj7HrWN"};
+styleInject_es.styleInject(css);
 
-function ListItem(_a) {
-    var caption = _a.caption, content = _a.content, icon = _a.icon, iconColor = _a.iconColor, id = _a.id, isActive = _a.isActive, onClick = _a.onClick, title = _a.title, url = _a.url, value = _a.value;
-    var actionClasses = classnames(styles$1.action, isActive && styles$1.isActive, (onClick || url) && styles$1.hoverable);
-    var Wrapper = url ? "a" : "button";
-    var buttonProps = __chunk_1.__assign({}, (Wrapper === "button" && { role: "button", type: "button" }));
-    return (React__default.createElement(Wrapper, __chunk_1.__assign({ id: id.toString(), className: actionClasses, href: url, onClick: onClick }, buttonProps),
-        icon && (React__default.createElement("div", { className: styles$1.icon },
-            React__default.createElement(index$2.Icon, { name: icon, color: iconColor }))),
-        React__default.createElement("div", { className: styles$1.info },
-            title && React__default.createElement(index$3.Heading, { level: 5 }, title),
-            React__default.createElement(Description, { content: content }),
-            caption && (React__default.createElement(index$1.Text, { variation: "subdued" },
-                React__default.createElement(index.Typography, { element: "span", size: "small", emphasisType: "italic" }, caption)))),
-        value && (React__default.createElement("div", { className: styles$1.amount },
-            React__default.createElement(index$1.Text, null,
-                React__default.createElement(index$4$1.Emphasis, { variation: "bold" }, value))))));
-}
-function Description(_a) {
-    var content = _a.content;
-    if (content instanceof Array) {
-        return (React__default.createElement(React__default.Fragment, null, content.map(function (item, i) { return (React__default.createElement(index$1.Text, { key: i },
-            React__default.createElement("span", { className: styles$1.truncate },
-                React__default.createElement(index$6.Markdown, { content: item, basicUsage: true })))); })));
-    }
-    else {
-        return (React__default.createElement(index$1.Text, null,
-            React__default.createElement("span", { className: styles$1.truncate },
-                React__default.createElement(index$6.Markdown, { content: content, basicUsage: true }))));
-    }
+function ListItem(_a) {
+    var caption = _a.caption, content = _a.content, icon = _a.icon, iconColor = _a.iconColor, id = _a.id, isActive = _a.isActive, onClick = _a.onClick, title = _a.title, url = _a.url, value = _a.value;
+    var actionClasses = classnames__default["default"](styles.action, isActive && styles.isActive, (onClick || url) && styles.hoverable);
+    var Wrapper = url ? "a" : "button";
+    var buttonProps = tslib_es6.__assign({}, (Wrapper === "button" && { role: "button", type: "button" }));
+    return (React__default["default"].createElement(Wrapper, tslib_es6.__assign({ id: id.toString(), className: actionClasses, href: url, onClick: onClick }, buttonProps),
+        icon && (React__default["default"].createElement("div", { className: styles.icon },
+            React__default["default"].createElement(Icon.Icon, { name: icon, color: iconColor }))),
+        React__default["default"].createElement("div", { className: styles.info },
+            title && React__default["default"].createElement(Heading.Heading, { level: 5 }, title),
+            React__default["default"].createElement(Description, { content: content }),
+            caption && (React__default["default"].createElement(Text.Text, { variation: "subdued" },
+                React__default["default"].createElement(Typography.Typography, { element: "span", size: "small", emphasisType: "italic" }, caption)))),
+        value && (React__default["default"].createElement("div", { className: styles.amount },
+            React__default["default"].createElement(Text.Text, null,
+                React__default["default"].createElement(Emphasis.Emphasis, { variation: "bold" }, value))))));
+}
+function Description(_a) {
+    var content = _a.content;
+    if (content instanceof Array) {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null, content.map(function (item, i) { return (React__default["default"].createElement(Text.Text, { key: i },
+            React__default["default"].createElement("span", { className: styles.truncate },
+                React__default["default"].createElement(Markdown.Markdown, { content: item, basicUsage: true })))); })));
+    }
+    else {
+        return (React__default["default"].createElement(Text.Text, null,
+            React__default["default"].createElement("span", { className: styles.truncate },
+                React__default["default"].createElement(Markdown.Markdown, { content: content, basicUsage: true }))));
+    }
 }
 
-function List(_a) {
-    var items = _a.items;
-    var isSectioned = items.some(function (item) { return item.section; });
-    if (isSectioned) {
-        return React__default.createElement(SectionedList, { items: items });
-    }
-    else {
-        return React__default.createElement(DisplayList, { items: items });
-    }
-}
-function DisplayList(_a) {
-    var items = _a.items;
-    return (React__default.createElement("ul", { className: styles.list }, items.map(function (item) { return (React__default.createElement("li", { key: item.id, className: styles.item },
-        React__default.createElement(ListItem, __chunk_1.__assign({}, item)))); })));
-}
-function SectionedList(_a) {
-    var items = _a.items;
-    var sectionedItems = lodash.groupBy(items, function (item) { return lodash.get(item, "section", "Other"); });
-    var sectionHeaderClassNames = classnames(sectionStyles.sectionHeader);
-    return (React__default.createElement("ul", { className: styles.list }, Object.keys(sectionedItems).map(function (sectionName) { return (React__default.createElement("li", { key: sectionName, className: styles.section },
-        React__default.createElement("div", { className: sectionHeaderClassNames },
-            React__default.createElement(index.Typography, { element: "h4", fontWeight: "bold", size: "large" }, sectionName)),
-        React__default.createElement("ul", { className: styles.list }, sectionedItems[sectionName].map(function (item) { return (React__default.createElement("li", { key: item.id, className: styles.item },
-            React__default.createElement(ListItem, __chunk_1.__assign({}, item)))); })))); })));
+function List(_a) {
+    var items = _a.items;
+    var isSectioned = items.some(function (item) { return item.section; });
+    if (isSectioned) {
+        return React__default["default"].createElement(SectionedList, { items: items });
+    }
+    else {
+        return React__default["default"].createElement(DisplayList, { items: items });
+    }
+}
+function DisplayList(_a) {
+    var items = _a.items;
+    return (React__default["default"].createElement("ul", { className: styles$1.list }, items.map(function (item) { return (React__default["default"].createElement("li", { key: item.id, className: styles$1.item },
+        React__default["default"].createElement(ListItem, tslib_es6.__assign({}, item)))); })));
+}
+function SectionedList(_a) {
+    var items = _a.items;
+    var sectionedItems = lodash.groupBy(items, function (item) { return lodash.get(item, "section", "Other"); });
+    var sectionHeaderClassNames = classnames__default["default"](sectionStyles.sectionHeader);
+    return (React__default["default"].createElement("ul", { className: styles$1.list }, Object.keys(sectionedItems).map(function (sectionName) { return (React__default["default"].createElement("li", { key: sectionName, className: styles$1.section },
+        React__default["default"].createElement("div", { className: sectionHeaderClassNames },
+            React__default["default"].createElement(Typography.Typography, { element: "h4", fontWeight: "bold", size: "large" }, sectionName)),
+        React__default["default"].createElement("ul", { className: styles$1.list }, sectionedItems[sectionName].map(function (item) { return (React__default["default"].createElement("li", { key: item.id, className: styles$1.item },
+            React__default["default"].createElement(ListItem, tslib_es6.__assign({}, item)))); })))); })));
 }
 
 exports.List = List;

package/dist/Markdown/Markdown.d.ts

@@ -1,17 +1,17 @@
-interface MarkdownProps {
-    /**
-     * Rich text content.
-     */
-    readonly content: string;
-    /**
-     * Open all links in new tab.
-     */
-    readonly externalLink?: boolean;
-    /**
-     * Only allow basic inline elements such as `_italic_`, `**bold**`, and
-     * `[link name](url)`
-     */
-    readonly basicUsage?: boolean;
-}
-export declare function Markdown({ content, externalLink, basicUsage }: MarkdownProps): JSX.Element;
-export {};
+interface MarkdownProps {
+    /**
+     * Rich text content.
+     */
+    readonly content: string;
+    /**
+     * Open all links in new tab.
+     */
+    readonly externalLink?: boolean;
+    /**
+     * Only allow basic inline elements such as `_italic_`, `**bold**`, and
+     * `[link name](url)`
+     */
+    readonly basicUsage?: boolean;
+}
+export declare function Markdown({ content, externalLink, basicUsage }: MarkdownProps): JSX.Element;
+export {};

package/dist/Markdown/index.d.ts

@@ -1 +1 @@
-export { Markdown } from "./Markdown";
+export { Markdown } from "./Markdown";