chaser-components - npm Package Compare versions

Comparing version 0.4.0 to 1.0.0

dist/index.js

 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var React = require('react');
+var React__default = _interopDefault(React);
 var cx = _interopDefault(require('classnames'));
 var PropTypes = require('prop-types');
 var PropTypes__default = _interopDefault(PropTypes);
-var React = require('react');
-var React__default = _interopDefault(React);
+var lodash = require('lodash');
 var isString = _interopDefault(require('lodash/isString'));
@@ -50,2 +51,315 @@ var reactRouterDom = require('react-router-dom');
 
+var style = {"heading":"_3w2Ky","baseline":"_2LtMl","h1":"_3YINZ","h2":"_2VKy6","h3":"_2o2rr"};
+
+const Heading = ({
+  level = 'h1',
+  size = 'h1',
+  as: component,
+  color = 'Dark Neutral 1',
+  children,
+  className = '',
+  baseline = true,
+  ...rest
+}) => {
+  const Comp = component || level;
+  return /*#__PURE__*/React__default.createElement(Comp, _extends({
+    className: cx(style.heading, style[size], baseline && style.baseline, className),
+    style: {
+      color: colors[color]
+    }
+  }, rest), children);
+};
+
+Heading.propTypes = {
+  color: PropTypes.oneOf(['Dark Neutral 1', 'Mid Neutral 1']),
+  level: PropTypes.oneOf(['h1', 'h2', 'h3']),
+  size: PropTypes.oneOf(['h1', 'h2', 'h3']),
+  children: PropTypes.node.isRequired,
+  as: PropTypes.elementType,
+  className: PropTypes.string,
+  baseline: PropTypes.bool,
+  innerRef: PropTypes.object
+};
+
+var style$1 = {"text":"_3jiB1","baseline":"_2BKwz","noLineHeight":"_1Vxtr","medium":"_2qwla","small":"_1sD50","xsmall":"_26p_T","xxsmall":"_1cpgU","micro":"_2Qzft","bold":"_26mYp","regular":"_3AF49","normal":"_2OmOp","oblique":"_1Mpyj","italic":"__McHW"};
+
+const Text = ({
+  size = 'small',
+  as: component,
+  children,
+  color = 'Dark Neutral 1',
+  fontStyle = 'normal',
+  className = '',
+  weight = 'regular',
+  baseline = true,
+  innerRef,
+  style: inlineStyle,
+  ...rest
+}) => {
+  const Comp = component || 'div';
+  return /*#__PURE__*/React__default.createElement(Comp, _extends({
+    className: cx(style$1.text, style$1[fontStyle], style$1[size], style$1[weight], baseline && style$1.baseline, className),
+    style: {
+      color: colors[color],
+      ...inlineStyle
+    },
+    ref: innerRef
+  }, rest), children);
+};
+
+Text.propTypes = {
+  color: PropTypes.oneOf(Object.keys(colors)),
+  size: PropTypes.oneOf(['medium', 'small', 'xsmall', 'xxsmall', 'micro']),
+  weight: PropTypes.oneOf(['regular', 'bold']),
+  fontStyle: PropTypes.oneOf(['normal', 'oblique', 'italic']),
+  style: PropTypes.object,
+  children: PropTypes.node.isRequired,
+  as: PropTypes.elementType,
+  className: PropTypes.string,
+  baseline: PropTypes.bool,
+  innerRef: PropTypes.object
+};
+
+var style$2 = {"columns":"_1jJPi","left":"_24rCq","right":"_2HpGm"};
+
+const Columns = ({
+  left,
+  right
+}) => /*#__PURE__*/React__default.createElement("div", {
+  className: style$2.columns
+}, /*#__PURE__*/React__default.createElement("div", {
+  className: style$2.left
+}, left), /*#__PURE__*/React__default.createElement("div", {
+  className: style$2.right
+}, right));
+Columns.propTypes = {
+  left: PropTypes__default.element.isRequired,
+  right: PropTypes__default.element.isRequired
+};
+
+var style$3 = {"box":"_1OpiD","not-top":"_Gj9R-","not-right":"_Y6917","not-bottom":"_3rg78","not-left":"_2lqEd","xxsmall":"_1ivsQ","xsmall":"_3f003","small":"_3fhLB","medium":"_2J-v3","large":"_4P4Qk","flex":"_7c_6G"};
+
+const Sides = {
+  top: 1 << 0,
+  right: 1 << 1,
+  bottom: 1 << 2,
+  left: 1 << 3
+};
+
+function getPaddingClassName(padding) {
+  let sides = 0;
+  padding.split(',').forEach(val => {
+    const key = val.trim();
+
+    switch (key) {
+      case 'top':
+        sides |= Sides.top;
+        break;
+
+      case 'right':
+        sides |= Sides.right;
+        break;
+
+      case 'bottom':
+        sides |= Sides.bottom;
+        break;
+
+      case 'left':
+        sides |= Sides.left;
+        break;
+
+      case 'horizontal':
+        sides |= Sides.right | Sides.left;
+        break;
+
+      case 'vertical':
+        sides |= Sides.top | Sides.bottom;
+        break;
+
+      case 'all':
+        sides |= Sides.top | Sides.right | Sides.bottom | Sides.left;
+        break;
+
+      default:
+        console.warn(`<Box />: Unknown key "${key}" in padding`);
+    }
+  });
+  return cx(...['top', 'left', 'bottom', 'right'].map(key => ~sides & Sides[key] && style$3[`not-${key}`]));
+}
+
+const Box = ({
+  as: Comp,
+  space,
+  children,
+  className,
+  padding,
+  flex,
+  justifyContent,
+  alignItems,
+  flexWrap,
+  background,
+  style: styleObj,
+  ...rest
+}) => {
+  return /*#__PURE__*/React__default.createElement(Comp, _extends({
+    className: cx(style$3.box, style$3[space], className, getPaddingClassName(padding), flex && style$3.flex),
+    style: {
+      justifyContent,
+      alignItems,
+      flexWrap,
+      backgroundColor: colors[background],
+      ...styleObj
+    }
+  }, rest), children);
+};
+
+Box.propTypes = {
+  space: PropTypes.oneOf(['none', 'xxsmall', 'xsmall', 'small', 'medium', 'large']),
+  flex: PropTypes.bool,
+  flexWrap: PropTypes.oneOf(['wrap', 'no-wrap']),
+  justifyContent: PropTypes.oneOf(['space-between', 'space-around', 'space-evenly', 'flex-start', 'flex-end', 'center']),
+  alignItems: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'stretch']),
+  padding: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.shape({}),
+  background: PropTypes.oneOf(Object.keys(colors)),
+  as: PropTypes.elementType
+};
+Box.defaultProps = {
+  background: undefined,
+  space: 'small',
+  flex: false,
+  justifyContent: 'flex-start',
+  alignItems: 'stretch',
+  flexWrap: 'no-wrap',
+  className: undefined,
+  style: {},
+  padding: 'all',
+  as: 'div'
+};
+
+var style$4 = {"xxsmall":"_V3nDw","xsmall":"_xk45j","small":"_Qn_Fn","medium":"_wvgzy","large":"_1cc9M"};
+
+const Shelf = ({
+  space,
+  children,
+  justifyContent,
+  alignItems,
+  flexWrap,
+  wrapperSpace,
+  ...wrapperProps
+}) => {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(Box, _extends({
+      space: wrapperSpace
+    }, wrapperProps), /*#__PURE__*/React__default.createElement(Box, {
+      className: cx(style$4.shelf, style$4[space]),
+      space: "none",
+      flex: true,
+      justifyContent: justifyContent,
+      alignItems: alignItems,
+      flexWrap: flexWrap
+    }, children))
+  );
+};
+
+Shelf.propTypes = {
+  space: PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large']),
+  wrapperSpace: Box.propTypes.space,
+  flexWrap: Box.propTypes.flexWrap,
+  justifyContent: Box.propTypes.justifyContent,
+  alignItems: Box.propTypes.alignItems,
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  as: PropTypes.elementType
+};
+Shelf.defaultProps = {
+  space: 'small',
+  wrapperSpace: 'none',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  className: undefined,
+  as: 'div'
+};
+
+var style$5 = {"none":"_74GDH","xsmall":"_2eMDn","small":"_2hLqA","medium":"_v6YAc","large":"_d0Jtk","flow":"_lCo5h"};
+
+const Stack = ({
+  as: Comp,
+  textAlign,
+  space,
+  flow,
+  children,
+  className,
+  dividers,
+  ...rest
+}) => {
+  return /*#__PURE__*/React__default.createElement(Comp, _extends({
+    style: {
+      textAlign
+    },
+    className: cx(style$5[space], flow && style$5.flow, className)
+  }, rest), React.Children.toArray(children).filter(Boolean).map((child, i) => /*#__PURE__*/React__default.createElement(React.Fragment, {
+    key: i
+  }, dividers && i > 0 && /*#__PURE__*/React__default.createElement("hr", null), child)));
+};
+
+Stack.propTypes = {
+  textAlign: PropTypes.oneOf(['center', 'left', 'right', 'stretch', 'justify', 'start', 'unset']),
+  space: PropTypes.oneOf(['none', 'xsmall', 'small', 'medium', 'large']),
+  flow: PropTypes.bool,
+  dividers: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  as: PropTypes.elementType
+};
+Stack.defaultProps = {
+  textAlign: undefined,
+  space: 'small',
+  flow: false,
+  dividers: false,
+  className: undefined,
+  as: 'div'
+};
+
+const ButtonGroup = ({
+  children,
+  ...rest
+}) => {
+  return /*#__PURE__*/React__default.createElement(Shelf, _extends({
+    space: "xsmall"
+  }, rest), children);
+};
+
+ButtonGroup.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+function SvgArrowDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 8,
+    height: 5,
+    viewBox: "0 0 8 5",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M4.338 4.525a.462.462 0 01-.675 0L.407 1.143C.096.821.31.258.744.258h6.512c.434 0 .648.562.337.885L4.338 4.525z",
+    fill: props.color
+  }));
+}
+
+function SvgArrowUp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 8,
+    height: 6,
+    viewBox: "0 0 8 5",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M3.663.99a.462.462 0 01.674 0l3.256 3.383c.311.323.097.885-.337.885H.744c-.434 0-.648-.563-.337-.886L3.663.99z",
+    fill: props.color
+  }));
+}
+
 function SvgHelp(props) {
@@ -233,3 +547,5 @@ return /*#__PURE__*/React.createElement("svg", _extends({
   'alert-square': SvgAlert,
-  'warning-circle': SvgWarningCircle
+  'warning-circle': SvgWarningCircle,
+  'arrow-up': SvgArrowUp,
+  'arrow-down': SvgArrowDown
 };
@@ -265,4 +581,58 @@
 
-var style = {"button":"_2X_Ir","disabled":"_1BllH","iconButton":"_3L4Ym","internal":"_O7XA6","narrow":"_3C2Hj","primary":"_pg7GC","secondary":"_2ce5v","active":"_m3LR-","minimal":"_3PCDa","exit":"_1GUWs","info":"_1KC6w","neutral":"_1e4fL","positive":"_1cLyE","danger":"_2udvv"};
+function getColor(sign) {
+  if (sign === -1) return "Red";
+  if (sign === 1) return "Green";
+  return "Mid Neutral 1";
+}
 
+function toCurrency(amount, code) {
+  const formatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: code,
+    minimumFractionDigits: Math.floor(amount) === amount ? 0 : 2,
+    maximumFractionDigits: 2
+  });
+  return amount === 0 || lodash.toFinite(amount) ? formatter.format(amount) : '';
+}
+
+function getIcon(sign) {
+  if (sign === -1) return "arrow-down";
+  return "arrow-up";
+}
+
+const Stock = ({
+  amount,
+  size,
+  currencyCode,
+  as: Comp,
+  ...rest
+}) => {
+  const sign = Math.sign(amount);
+  return /*#__PURE__*/React__default.createElement(Shelf, {
+    space: "xxsmall"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    size: 8,
+    name: getIcon(sign),
+    color: getColor(sign)
+  }), /*#__PURE__*/React__default.createElement(Comp, _extends({
+    color: getColor(sign),
+    size: size
+  }, rest), toCurrency(amount, currencyCode)));
+};
+
+Stock.propTypes = {
+  as: React.elementType,
+  amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  currency: PropTypes.string
+};
+Stock.defaultProps = {
+  as: Text,
+  amount: 0,
+  size: 'small',
+  currency: 'GBP'
+};
+
+var style$6 = {"button":"_2X_Ir","disabled":"_1BllH","iconButton":"_3L4Ym","internal":"_O7XA6","narrow":"_3C2Hj","primary":"_pg7GC","secondary":"_2ce5v","active":"_m3LR-","minimal":"_3PCDa","exit":"_1GUWs","info":"_1KC6w","neutral":"_1e4fL","positive":"_1cLyE","danger":"_2udvv"};
+
 const InternalButton = ({
@@ -273,3 +643,3 @@ to,
 }) => /*#__PURE__*/React__default.createElement(reactRouterDom.Link, _extends({
-  className: style.internal,
+  className: style$6.internal,
   to: to
@@ -306,3 +676,3 @@ }, rest), button);
   const intent = intentProp || (appearance === 'secondary' ? 'neutral' : 'info');
-  const buttonClassName = cx(style.button, active && style.active, style[appearance], narrow && style.narrow, style[intent], disabled && style.disabled, icon && style.iconButton, className);
+  const buttonClassName = cx(style$6.button, active && style$6.active, style$6[appearance], narrow && style$6.narrow, style$6[intent], disabled && style$6.disabled, icon && style$6.iconButton, className);
   const isButton = onClick && !to || type;
@@ -312,3 +682,3 @@ const Comp = isButton ? 'button' : 'span';
     name: icon,
-    className: style.icon
+    className: style$6.icon
   }) : icon;
@@ -368,291 +738,2 @@ const button = /*#__PURE__*/React__default.createElement(Comp, _extends({
 
-var style$1 = {"text":"_3jiB1","baseline":"_2BKwz","noLineHeight":"_1Vxtr","medium":"_2qwla","small":"_1sD50","xsmall":"_26p_T","xxsmall":"_1cpgU","micro":"_2Qzft","bold":"_26mYp","regular":"_3AF49","normal":"_2OmOp","oblique":"_1Mpyj","italic":"__McHW"};
-
-const Text = ({
-  size = 'small',
-  as: component,
-  children,
-  color = 'Dark Neutral 1',
-  fontStyle = 'normal',
-  className = '',
-  weight = 'regular',
-  baseline = true,
-  innerRef,
-  style: inlineStyle,
-  ...rest
-}) => {
-  const Comp = component || 'div';
-  return /*#__PURE__*/React__default.createElement(Comp, _extends({
-    className: cx(style$1.text, style$1[fontStyle], style$1[size], style$1[weight], baseline && style$1.baseline, className),
-    style: {
-      color: colors[color],
-      ...inlineStyle
-    },
-    ref: innerRef
-  }, rest), children);
-};
-
-Text.propTypes = {
-  color: PropTypes.oneOf(Object.keys(colors)),
-  size: PropTypes.oneOf(['medium', 'small', 'xsmall', 'xxsmall', 'micro']),
-  weight: PropTypes.oneOf(['regular', 'bold']),
-  fontStyle: PropTypes.oneOf(['normal', 'oblique', 'italic']),
-  style: PropTypes.object,
-  children: PropTypes.node.isRequired,
-  as: PropTypes.elementType,
-  className: PropTypes.string,
-  baseline: PropTypes.bool,
-  innerRef: PropTypes.object
-};
-
-var style$2 = {"heading":"_3w2Ky","baseline":"_2LtMl","h1":"_3YINZ","h2":"_2VKy6","h3":"_2o2rr"};
-
-const Heading = ({
-  level = 'h1',
-  size = 'h1',
-  as: component,
-  color = 'Dark Neutral 1',
-  children,
-  className = '',
-  baseline = true,
-  ...rest
-}) => {
-  const Comp = component || level;
-  return /*#__PURE__*/React__default.createElement(Comp, _extends({
-    className: cx(style$2.heading, style$2[size], baseline && style$2.baseline, className),
-    style: {
-      color: colors[color]
-    }
-  }, rest), children);
-};
-
-Heading.propTypes = {
-  color: PropTypes.oneOf(['Dark Neutral 1', 'Mid Neutral 1']),
-  level: PropTypes.oneOf(['h1', 'h2', 'h3']),
-  size: PropTypes.oneOf(['h1', 'h2', 'h3']),
-  children: PropTypes.node.isRequired,
-  as: PropTypes.elementType,
-  className: PropTypes.string,
-  baseline: PropTypes.bool,
-  innerRef: PropTypes.object
-};
-
-var style$3 = {"columns":"_1jJPi","left":"_24rCq","right":"_2HpGm"};
-
-const Columns = ({
-  left,
-  right
-}) => /*#__PURE__*/React__default.createElement("div", {
-  className: style$3.columns
-}, /*#__PURE__*/React__default.createElement("div", {
-  className: style$3.left
-}, left), /*#__PURE__*/React__default.createElement("div", {
-  className: style$3.right
-}, right));
-Columns.propTypes = {
-  left: PropTypes__default.element.isRequired,
-  right: PropTypes__default.element.isRequired
-};
-
-var style$4 = {"box":"_1OpiD","not-top":"_Gj9R-","not-right":"_Y6917","not-bottom":"_3rg78","not-left":"_2lqEd","xxsmall":"_1ivsQ","xsmall":"_3f003","small":"_3fhLB","medium":"_2J-v3","large":"_4P4Qk","flex":"_7c_6G"};
-
-const Sides = {
-  top: 1 << 0,
-  right: 1 << 1,
-  bottom: 1 << 2,
-  left: 1 << 3
-};
-
-function getPaddingClassName(padding) {
-  let sides = 0;
-  padding.split(',').forEach(val => {
-    const key = val.trim();
-
-    switch (key) {
-      case 'top':
-        sides |= Sides.top;
-        break;
-
-      case 'right':
-        sides |= Sides.right;
-        break;
-
-      case 'bottom':
-        sides |= Sides.bottom;
-        break;
-
-      case 'left':
-        sides |= Sides.left;
-        break;
-
-      case 'horizontal':
-        sides |= Sides.right | Sides.left;
-        break;
-
-      case 'vertical':
-        sides |= Sides.top | Sides.bottom;
-        break;
-
-      case 'all':
-        sides |= Sides.top | Sides.right | Sides.bottom | Sides.left;
-        break;
-
-      default:
-        console.warn(`<Box />: Unknown key "${key}" in padding`);
-    }
-  });
-  return cx(...['top', 'left', 'bottom', 'right'].map(key => ~sides & Sides[key] && style$4[`not-${key}`]));
-}
-
-const Box = ({
-  as: Comp,
-  space,
-  children,
-  className,
-  padding,
-  flex,
-  justifyContent,
-  alignItems,
-  flexWrap,
-  background,
-  style: styleObj,
-  ...rest
-}) => {
-  return /*#__PURE__*/React__default.createElement(Comp, _extends({
-    className: cx(style$4.box, style$4[space], className, getPaddingClassName(padding), flex && style$4.flex),
-    style: {
-      justifyContent,
-      alignItems,
-      flexWrap,
-      backgroundColor: colors[background],
-      ...styleObj
-    }
-  }, rest), children);
-};
-
-Box.propTypes = {
-  space: PropTypes.oneOf(['none', 'xxsmall', 'xsmall', 'small', 'medium', 'large']),
-  flex: PropTypes.bool,
-  flexWrap: PropTypes.oneOf(['wrap', 'no-wrap']),
-  justifyContent: PropTypes.oneOf(['space-between', 'space-around', 'space-evenly', 'flex-start', 'flex-end', 'center']),
-  alignItems: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'stretch']),
-  padding: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.shape({}),
-  background: PropTypes.oneOf(Object.keys(colors)),
-  as: PropTypes.elementType
-};
-Box.defaultProps = {
-  background: undefined,
-  space: 'small',
-  flex: false,
-  justifyContent: 'flex-start',
-  alignItems: 'stretch',
-  flexWrap: 'no-wrap',
-  className: undefined,
-  style: {},
-  padding: 'all',
-  as: 'div'
-};
-
-var style$5 = {"xxsmall":"_V3nDw","xsmall":"_xk45j","small":"_Qn_Fn","medium":"_wvgzy","large":"_1cc9M"};
-
-const Shelf = ({
-  space,
-  children,
-  justifyContent,
-  alignItems,
-  flexWrap,
-  wrapperSpace,
-  ...wrapperProps
-}) => {
-  return (
-    /*#__PURE__*/
-    React__default.createElement(Box, _extends({
-      space: wrapperSpace
-    }, wrapperProps), /*#__PURE__*/React__default.createElement(Box, {
-      className: cx(style$5.shelf, style$5[space]),
-      space: "none",
-      flex: true,
-      justifyContent: justifyContent,
-      alignItems: alignItems,
-      flexWrap: flexWrap
-    }, children))
-  );
-};
-
-Shelf.propTypes = {
-  space: PropTypes.oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large']),
-  wrapperSpace: Box.propTypes.space,
-  flexWrap: Box.propTypes.flexWrap,
-  justifyContent: Box.propTypes.justifyContent,
-  alignItems: Box.propTypes.alignItems,
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  as: PropTypes.elementType
-};
-Shelf.defaultProps = {
-  space: 'small',
-  wrapperSpace: 'none',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  flexWrap: 'wrap',
-  className: undefined,
-  as: 'div'
-};
-
-var style$6 = {"none":"_74GDH","xsmall":"_2eMDn","small":"_2hLqA","medium":"_v6YAc","large":"_d0Jtk","flow":"_lCo5h"};
-
-const Stack = ({
-  as: Comp,
-  textAlign,
-  space,
-  flow,
-  children,
-  className,
-  dividers,
-  ...rest
-}) => {
-  return /*#__PURE__*/React__default.createElement(Comp, _extends({
-    style: {
-      textAlign
-    },
-    className: cx(style$6[space], flow && style$6.flow, className)
-  }, rest), React.Children.toArray(children).filter(Boolean).map((child, i) => /*#__PURE__*/React__default.createElement(React.Fragment, {
-    key: i
-  }, dividers && i > 0 && /*#__PURE__*/React__default.createElement("hr", null), child)));
-};
-
-Stack.propTypes = {
-  textAlign: PropTypes.oneOf(['center', 'left', 'right', 'stretch', 'justify', 'start', 'unset']),
-  space: PropTypes.oneOf(['none', 'xsmall', 'small', 'medium', 'large']),
-  flow: PropTypes.bool,
-  dividers: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  as: PropTypes.elementType
-};
-Stack.defaultProps = {
-  textAlign: undefined,
-  space: 'small',
-  flow: false,
-  dividers: false,
-  className: undefined,
-  as: 'div'
-};
-
-const ButtonGroup = ({
-  children,
-  ...rest
-}) => {
-  return /*#__PURE__*/React__default.createElement(Shelf, _extends({
-    space: "xsmall"
-  }, rest), children);
-};
-
-ButtonGroup.propTypes = {
-  children: PropTypes.node.isRequired
-};
-
 var style$7 = {"healthScore":"_27RmL","small":"_3A1iT","healthy":"_d1_Zw","average":"_1XVcz","unhealthy":"_3OPFu","NA":"_1yA3K","large":"_b6lBj","text":"_2u2Jt","active":"_31lmN"};
@@ -1191,4 +1272,5 @@
 exports.Stack = Stack;
+exports.Stock = Stock;
 exports.Text = Text;
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -0,4 +1,5 @@
+import React__default, { Children, Fragment as Fragment$1, createElement, elementType as elementType$1, useContext, useState, useRef, useEffect, cloneElement } from 'react';
 import cx from 'classnames';
-import PropTypes, { number, string, oneOf, object, node, elementType, bool, shape, oneOfType, func, element, any, arrayOf, objectOf } from 'prop-types';
-import React__default, { createElement, Children, Fragment as Fragment$1, useContext, useState, useRef, useEffect, cloneElement } from 'react';
+import PropTypes, { oneOf, node, elementType, string, bool, object, shape, number, oneOfType, func, element, any, arrayOf, objectOf } from 'prop-types';
+import { toFinite } from 'lodash';
 import isString from 'lodash/isString';
@@ -46,2 +47,315 @@ import { Link } from 'react-router-dom';
 
+var style = {"heading":"_3w2Ky","baseline":"_2LtMl","h1":"_3YINZ","h2":"_2VKy6","h3":"_2o2rr"};
+
+const Heading = ({
+  level = 'h1',
+  size = 'h1',
+  as: component,
+  color = 'Dark Neutral 1',
+  children,
+  className = '',
+  baseline = true,
+  ...rest
+}) => {
+  const Comp = component || level;
+  return /*#__PURE__*/React__default.createElement(Comp, _extends({
+    className: cx(style.heading, style[size], baseline && style.baseline, className),
+    style: {
+      color: colors[color]
+    }
+  }, rest), children);
+};
+
+Heading.propTypes = {
+  color: oneOf(['Dark Neutral 1', 'Mid Neutral 1']),
+  level: oneOf(['h1', 'h2', 'h3']),
+  size: oneOf(['h1', 'h2', 'h3']),
+  children: node.isRequired,
+  as: elementType,
+  className: string,
+  baseline: bool,
+  innerRef: object
+};
+
+var style$1 = {"text":"_3jiB1","baseline":"_2BKwz","noLineHeight":"_1Vxtr","medium":"_2qwla","small":"_1sD50","xsmall":"_26p_T","xxsmall":"_1cpgU","micro":"_2Qzft","bold":"_26mYp","regular":"_3AF49","normal":"_2OmOp","oblique":"_1Mpyj","italic":"__McHW"};
+
+const Text = ({
+  size = 'small',
+  as: component,
+  children,
+  color = 'Dark Neutral 1',
+  fontStyle = 'normal',
+  className = '',
+  weight = 'regular',
+  baseline = true,
+  innerRef,
+  style: inlineStyle,
+  ...rest
+}) => {
+  const Comp = component || 'div';
+  return /*#__PURE__*/React__default.createElement(Comp, _extends({
+    className: cx(style$1.text, style$1[fontStyle], style$1[size], style$1[weight], baseline && style$1.baseline, className),
+    style: {
+      color: colors[color],
+      ...inlineStyle
+    },
+    ref: innerRef
+  }, rest), children);
+};
+
+Text.propTypes = {
+  color: oneOf(Object.keys(colors)),
+  size: oneOf(['medium', 'small', 'xsmall', 'xxsmall', 'micro']),
+  weight: oneOf(['regular', 'bold']),
+  fontStyle: oneOf(['normal', 'oblique', 'italic']),
+  style: object,
+  children: node.isRequired,
+  as: elementType,
+  className: string,
+  baseline: bool,
+  innerRef: object
+};
+
+var style$2 = {"columns":"_1jJPi","left":"_24rCq","right":"_2HpGm"};
+
+const Columns = ({
+  left,
+  right
+}) => /*#__PURE__*/React__default.createElement("div", {
+  className: style$2.columns
+}, /*#__PURE__*/React__default.createElement("div", {
+  className: style$2.left
+}, left), /*#__PURE__*/React__default.createElement("div", {
+  className: style$2.right
+}, right));
+Columns.propTypes = {
+  left: PropTypes.element.isRequired,
+  right: PropTypes.element.isRequired
+};
+
+var style$3 = {"box":"_1OpiD","not-top":"_Gj9R-","not-right":"_Y6917","not-bottom":"_3rg78","not-left":"_2lqEd","xxsmall":"_1ivsQ","xsmall":"_3f003","small":"_3fhLB","medium":"_2J-v3","large":"_4P4Qk","flex":"_7c_6G"};
+
+const Sides = {
+  top: 1 << 0,
+  right: 1 << 1,
+  bottom: 1 << 2,
+  left: 1 << 3
+};
+
+function getPaddingClassName(padding) {
+  let sides = 0;
+  padding.split(',').forEach(val => {
+    const key = val.trim();
+
+    switch (key) {
+      case 'top':
+        sides |= Sides.top;
+        break;
+
+      case 'right':
+        sides |= Sides.right;
+        break;
+
+      case 'bottom':
+        sides |= Sides.bottom;
+        break;
+
+      case 'left':
+        sides |= Sides.left;
+        break;
+
+      case 'horizontal':
+        sides |= Sides.right | Sides.left;
+        break;
+
+      case 'vertical':
+        sides |= Sides.top | Sides.bottom;
+        break;
+
+      case 'all':
+        sides |= Sides.top | Sides.right | Sides.bottom | Sides.left;
+        break;
+
+      default:
+        console.warn(`<Box />: Unknown key "${key}" in padding`);
+    }
+  });
+  return cx(...['top', 'left', 'bottom', 'right'].map(key => ~sides & Sides[key] && style$3[`not-${key}`]));
+}
+
+const Box = ({
+  as: Comp,
+  space,
+  children,
+  className,
+  padding,
+  flex,
+  justifyContent,
+  alignItems,
+  flexWrap,
+  background,
+  style: styleObj,
+  ...rest
+}) => {
+  return /*#__PURE__*/React__default.createElement(Comp, _extends({
+    className: cx(style$3.box, style$3[space], className, getPaddingClassName(padding), flex && style$3.flex),
+    style: {
+      justifyContent,
+      alignItems,
+      flexWrap,
+      backgroundColor: colors[background],
+      ...styleObj
+    }
+  }, rest), children);
+};
+
+Box.propTypes = {
+  space: oneOf(['none', 'xxsmall', 'xsmall', 'small', 'medium', 'large']),
+  flex: bool,
+  flexWrap: oneOf(['wrap', 'no-wrap']),
+  justifyContent: oneOf(['space-between', 'space-around', 'space-evenly', 'flex-start', 'flex-end', 'center']),
+  alignItems: oneOf(['flex-start', 'flex-end', 'center', 'stretch']),
+  padding: string,
+  children: node.isRequired,
+  className: string,
+  style: shape({}),
+  background: oneOf(Object.keys(colors)),
+  as: elementType
+};
+Box.defaultProps = {
+  background: undefined,
+  space: 'small',
+  flex: false,
+  justifyContent: 'flex-start',
+  alignItems: 'stretch',
+  flexWrap: 'no-wrap',
+  className: undefined,
+  style: {},
+  padding: 'all',
+  as: 'div'
+};
+
+var style$4 = {"xxsmall":"_V3nDw","xsmall":"_xk45j","small":"_Qn_Fn","medium":"_wvgzy","large":"_1cc9M"};
+
+const Shelf = ({
+  space,
+  children,
+  justifyContent,
+  alignItems,
+  flexWrap,
+  wrapperSpace,
+  ...wrapperProps
+}) => {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(Box, _extends({
+      space: wrapperSpace
+    }, wrapperProps), /*#__PURE__*/React__default.createElement(Box, {
+      className: cx(style$4.shelf, style$4[space]),
+      space: "none",
+      flex: true,
+      justifyContent: justifyContent,
+      alignItems: alignItems,
+      flexWrap: flexWrap
+    }, children))
+  );
+};
+
+Shelf.propTypes = {
+  space: oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large']),
+  wrapperSpace: Box.propTypes.space,
+  flexWrap: Box.propTypes.flexWrap,
+  justifyContent: Box.propTypes.justifyContent,
+  alignItems: Box.propTypes.alignItems,
+  className: string,
+  children: node.isRequired,
+  as: elementType
+};
+Shelf.defaultProps = {
+  space: 'small',
+  wrapperSpace: 'none',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  className: undefined,
+  as: 'div'
+};
+
+var style$5 = {"none":"_74GDH","xsmall":"_2eMDn","small":"_2hLqA","medium":"_v6YAc","large":"_d0Jtk","flow":"_lCo5h"};
+
+const Stack = ({
+  as: Comp,
+  textAlign,
+  space,
+  flow,
+  children,
+  className,
+  dividers,
+  ...rest
+}) => {
+  return /*#__PURE__*/React__default.createElement(Comp, _extends({
+    style: {
+      textAlign
+    },
+    className: cx(style$5[space], flow && style$5.flow, className)
+  }, rest), Children.toArray(children).filter(Boolean).map((child, i) => /*#__PURE__*/React__default.createElement(Fragment$1, {
+    key: i
+  }, dividers && i > 0 && /*#__PURE__*/React__default.createElement("hr", null), child)));
+};
+
+Stack.propTypes = {
+  textAlign: oneOf(['center', 'left', 'right', 'stretch', 'justify', 'start', 'unset']),
+  space: oneOf(['none', 'xsmall', 'small', 'medium', 'large']),
+  flow: bool,
+  dividers: bool,
+  children: node.isRequired,
+  className: string,
+  as: elementType
+};
+Stack.defaultProps = {
+  textAlign: undefined,
+  space: 'small',
+  flow: false,
+  dividers: false,
+  className: undefined,
+  as: 'div'
+};
+
+const ButtonGroup = ({
+  children,
+  ...rest
+}) => {
+  return /*#__PURE__*/React__default.createElement(Shelf, _extends({
+    space: "xsmall"
+  }, rest), children);
+};
+
+ButtonGroup.propTypes = {
+  children: node.isRequired
+};
+
+function SvgArrowDown(props) {
+  return /*#__PURE__*/createElement("svg", _extends({
+    width: 8,
+    height: 5,
+    viewBox: "0 0 8 5",
+    fill: "none"
+  }, props), /*#__PURE__*/createElement("path", {
+    d: "M4.338 4.525a.462.462 0 01-.675 0L.407 1.143C.096.821.31.258.744.258h6.512c.434 0 .648.562.337.885L4.338 4.525z",
+    fill: props.color
+  }));
+}
+
+function SvgArrowUp(props) {
+  return /*#__PURE__*/createElement("svg", _extends({
+    width: 8,
+    height: 6,
+    viewBox: "0 0 8 5",
+    fill: "none"
+  }, props), /*#__PURE__*/createElement("path", {
+    d: "M3.663.99a.462.462 0 01.674 0l3.256 3.383c.311.323.097.885-.337.885H.744c-.434 0-.648-.563-.337-.886L3.663.99z",
+    fill: props.color
+  }));
+}
+
 function SvgHelp(props) {
@@ -229,3 +543,5 @@ return /*#__PURE__*/createElement("svg", _extends({
   'alert-square': SvgAlert,
-  'warning-circle': SvgWarningCircle
+  'warning-circle': SvgWarningCircle,
+  'arrow-up': SvgArrowUp,
+  'arrow-down': SvgArrowDown
 };
@@ -261,4 +577,58 @@
 
-var style = {"button":"_2X_Ir","disabled":"_1BllH","iconButton":"_3L4Ym","internal":"_O7XA6","narrow":"_3C2Hj","primary":"_pg7GC","secondary":"_2ce5v","active":"_m3LR-","minimal":"_3PCDa","exit":"_1GUWs","info":"_1KC6w","neutral":"_1e4fL","positive":"_1cLyE","danger":"_2udvv"};
+function getColor(sign) {
+  if (sign === -1) return "Red";
+  if (sign === 1) return "Green";
+  return "Mid Neutral 1";
+}
 
+function toCurrency(amount, code) {
+  const formatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: code,
+    minimumFractionDigits: Math.floor(amount) === amount ? 0 : 2,
+    maximumFractionDigits: 2
+  });
+  return amount === 0 || toFinite(amount) ? formatter.format(amount) : '';
+}
+
+function getIcon(sign) {
+  if (sign === -1) return "arrow-down";
+  return "arrow-up";
+}
+
+const Stock = ({
+  amount,
+  size,
+  currencyCode,
+  as: Comp,
+  ...rest
+}) => {
+  const sign = Math.sign(amount);
+  return /*#__PURE__*/React__default.createElement(Shelf, {
+    space: "xxsmall"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    size: 8,
+    name: getIcon(sign),
+    color: getColor(sign)
+  }), /*#__PURE__*/React__default.createElement(Comp, _extends({
+    color: getColor(sign),
+    size: size
+  }, rest), toCurrency(amount, currencyCode)));
+};
+
+Stock.propTypes = {
+  as: elementType$1,
+  amount: oneOfType([string, number]),
+  size: oneOfType([string, number]),
+  currency: string
+};
+Stock.defaultProps = {
+  as: Text,
+  amount: 0,
+  size: 'small',
+  currency: 'GBP'
+};
+
+var style$6 = {"button":"_2X_Ir","disabled":"_1BllH","iconButton":"_3L4Ym","internal":"_O7XA6","narrow":"_3C2Hj","primary":"_pg7GC","secondary":"_2ce5v","active":"_m3LR-","minimal":"_3PCDa","exit":"_1GUWs","info":"_1KC6w","neutral":"_1e4fL","positive":"_1cLyE","danger":"_2udvv"};
+
 const InternalButton = ({
@@ -269,3 +639,3 @@ to,
 }) => /*#__PURE__*/React__default.createElement(Link, _extends({
-  className: style.internal,
+  className: style$6.internal,
   to: to
@@ -302,3 +672,3 @@ }, rest), button);
   const intent = intentProp || (appearance === 'secondary' ? 'neutral' : 'info');
-  const buttonClassName = cx(style.button, active && style.active, style[appearance], narrow && style.narrow, style[intent], disabled && style.disabled, icon && style.iconButton, className);
+  const buttonClassName = cx(style$6.button, active && style$6.active, style$6[appearance], narrow && style$6.narrow, style$6[intent], disabled && style$6.disabled, icon && style$6.iconButton, className);
   const isButton = onClick && !to || type;
@@ -308,3 +678,3 @@ const Comp = isButton ? 'button' : 'span';
     name: icon,
-    className: style.icon
+    className: style$6.icon
   }) : icon;
@@ -364,291 +734,2 @@ const button = /*#__PURE__*/React__default.createElement(Comp, _extends({
 
-var style$1 = {"text":"_3jiB1","baseline":"_2BKwz","noLineHeight":"_1Vxtr","medium":"_2qwla","small":"_1sD50","xsmall":"_26p_T","xxsmall":"_1cpgU","micro":"_2Qzft","bold":"_26mYp","regular":"_3AF49","normal":"_2OmOp","oblique":"_1Mpyj","italic":"__McHW"};
-
-const Text = ({
-  size = 'small',
-  as: component,
-  children,
-  color = 'Dark Neutral 1',
-  fontStyle = 'normal',
-  className = '',
-  weight = 'regular',
-  baseline = true,
-  innerRef,
-  style: inlineStyle,
-  ...rest
-}) => {
-  const Comp = component || 'div';
-  return /*#__PURE__*/React__default.createElement(Comp, _extends({
-    className: cx(style$1.text, style$1[fontStyle], style$1[size], style$1[weight], baseline && style$1.baseline, className),
-    style: {
-      color: colors[color],
-      ...inlineStyle
-    },
-    ref: innerRef
-  }, rest), children);
-};
-
-Text.propTypes = {
-  color: oneOf(Object.keys(colors)),
-  size: oneOf(['medium', 'small', 'xsmall', 'xxsmall', 'micro']),
-  weight: oneOf(['regular', 'bold']),
-  fontStyle: oneOf(['normal', 'oblique', 'italic']),
-  style: object,
-  children: node.isRequired,
-  as: elementType,
-  className: string,
-  baseline: bool,
-  innerRef: object
-};
-
-var style$2 = {"heading":"_3w2Ky","baseline":"_2LtMl","h1":"_3YINZ","h2":"_2VKy6","h3":"_2o2rr"};
-
-const Heading = ({
-  level = 'h1',
-  size = 'h1',
-  as: component,
-  color = 'Dark Neutral 1',
-  children,
-  className = '',
-  baseline = true,
-  ...rest
-}) => {
-  const Comp = component || level;
-  return /*#__PURE__*/React__default.createElement(Comp, _extends({
-    className: cx(style$2.heading, style$2[size], baseline && style$2.baseline, className),
-    style: {
-      color: colors[color]
-    }
-  }, rest), children);
-};
-
-Heading.propTypes = {
-  color: oneOf(['Dark Neutral 1', 'Mid Neutral 1']),
-  level: oneOf(['h1', 'h2', 'h3']),
-  size: oneOf(['h1', 'h2', 'h3']),
-  children: node.isRequired,
-  as: elementType,
-  className: string,
-  baseline: bool,
-  innerRef: object
-};
-
-var style$3 = {"columns":"_1jJPi","left":"_24rCq","right":"_2HpGm"};
-
-const Columns = ({
-  left,
-  right
-}) => /*#__PURE__*/React__default.createElement("div", {
-  className: style$3.columns
-}, /*#__PURE__*/React__default.createElement("div", {
-  className: style$3.left
-}, left), /*#__PURE__*/React__default.createElement("div", {
-  className: style$3.right
-}, right));
-Columns.propTypes = {
-  left: PropTypes.element.isRequired,
-  right: PropTypes.element.isRequired
-};
-
-var style$4 = {"box":"_1OpiD","not-top":"_Gj9R-","not-right":"_Y6917","not-bottom":"_3rg78","not-left":"_2lqEd","xxsmall":"_1ivsQ","xsmall":"_3f003","small":"_3fhLB","medium":"_2J-v3","large":"_4P4Qk","flex":"_7c_6G"};
-
-const Sides = {
-  top: 1 << 0,
-  right: 1 << 1,
-  bottom: 1 << 2,
-  left: 1 << 3
-};
-
-function getPaddingClassName(padding) {
-  let sides = 0;
-  padding.split(',').forEach(val => {
-    const key = val.trim();
-
-    switch (key) {
-      case 'top':
-        sides |= Sides.top;
-        break;
-
-      case 'right':
-        sides |= Sides.right;
-        break;
-
-      case 'bottom':
-        sides |= Sides.bottom;
-        break;
-
-      case 'left':
-        sides |= Sides.left;
-        break;
-
-      case 'horizontal':
-        sides |= Sides.right | Sides.left;
-        break;
-
-      case 'vertical':
-        sides |= Sides.top | Sides.bottom;
-        break;
-
-      case 'all':
-        sides |= Sides.top | Sides.right | Sides.bottom | Sides.left;
-        break;
-
-      default:
-        console.warn(`<Box />: Unknown key "${key}" in padding`);
-    }
-  });
-  return cx(...['top', 'left', 'bottom', 'right'].map(key => ~sides & Sides[key] && style$4[`not-${key}`]));
-}
-
-const Box = ({
-  as: Comp,
-  space,
-  children,
-  className,
-  padding,
-  flex,
-  justifyContent,
-  alignItems,
-  flexWrap,
-  background,
-  style: styleObj,
-  ...rest
-}) => {
-  return /*#__PURE__*/React__default.createElement(Comp, _extends({
-    className: cx(style$4.box, style$4[space], className, getPaddingClassName(padding), flex && style$4.flex),
-    style: {
-      justifyContent,
-      alignItems,
-      flexWrap,
-      backgroundColor: colors[background],
-      ...styleObj
-    }
-  }, rest), children);
-};
-
-Box.propTypes = {
-  space: oneOf(['none', 'xxsmall', 'xsmall', 'small', 'medium', 'large']),
-  flex: bool,
-  flexWrap: oneOf(['wrap', 'no-wrap']),
-  justifyContent: oneOf(['space-between', 'space-around', 'space-evenly', 'flex-start', 'flex-end', 'center']),
-  alignItems: oneOf(['flex-start', 'flex-end', 'center', 'stretch']),
-  padding: string,
-  children: node.isRequired,
-  className: string,
-  style: shape({}),
-  background: oneOf(Object.keys(colors)),
-  as: elementType
-};
-Box.defaultProps = {
-  background: undefined,
-  space: 'small',
-  flex: false,
-  justifyContent: 'flex-start',
-  alignItems: 'stretch',
-  flexWrap: 'no-wrap',
-  className: undefined,
-  style: {},
-  padding: 'all',
-  as: 'div'
-};
-
-var style$5 = {"xxsmall":"_V3nDw","xsmall":"_xk45j","small":"_Qn_Fn","medium":"_wvgzy","large":"_1cc9M"};
-
-const Shelf = ({
-  space,
-  children,
-  justifyContent,
-  alignItems,
-  flexWrap,
-  wrapperSpace,
-  ...wrapperProps
-}) => {
-  return (
-    /*#__PURE__*/
-    React__default.createElement(Box, _extends({
-      space: wrapperSpace
-    }, wrapperProps), /*#__PURE__*/React__default.createElement(Box, {
-      className: cx(style$5.shelf, style$5[space]),
-      space: "none",
-      flex: true,
-      justifyContent: justifyContent,
-      alignItems: alignItems,
-      flexWrap: flexWrap
-    }, children))
-  );
-};
-
-Shelf.propTypes = {
-  space: oneOf(['xxsmall', 'xsmall', 'small', 'medium', 'large']),
-  wrapperSpace: Box.propTypes.space,
-  flexWrap: Box.propTypes.flexWrap,
-  justifyContent: Box.propTypes.justifyContent,
-  alignItems: Box.propTypes.alignItems,
-  className: string,
-  children: node.isRequired,
-  as: elementType
-};
-Shelf.defaultProps = {
-  space: 'small',
-  wrapperSpace: 'none',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  flexWrap: 'wrap',
-  className: undefined,
-  as: 'div'
-};
-
-var style$6 = {"none":"_74GDH","xsmall":"_2eMDn","small":"_2hLqA","medium":"_v6YAc","large":"_d0Jtk","flow":"_lCo5h"};
-
-const Stack = ({
-  as: Comp,
-  textAlign,
-  space,
-  flow,
-  children,
-  className,
-  dividers,
-  ...rest
-}) => {
-  return /*#__PURE__*/React__default.createElement(Comp, _extends({
-    style: {
-      textAlign
-    },
-    className: cx(style$6[space], flow && style$6.flow, className)
-  }, rest), Children.toArray(children).filter(Boolean).map((child, i) => /*#__PURE__*/React__default.createElement(Fragment$1, {
-    key: i
-  }, dividers && i > 0 && /*#__PURE__*/React__default.createElement("hr", null), child)));
-};
-
-Stack.propTypes = {
-  textAlign: oneOf(['center', 'left', 'right', 'stretch', 'justify', 'start', 'unset']),
-  space: oneOf(['none', 'xsmall', 'small', 'medium', 'large']),
-  flow: bool,
-  dividers: bool,
-  children: node.isRequired,
-  className: string,
-  as: elementType
-};
-Stack.defaultProps = {
-  textAlign: undefined,
-  space: 'small',
-  flow: false,
-  dividers: false,
-  className: undefined,
-  as: 'div'
-};
-
-const ButtonGroup = ({
-  children,
-  ...rest
-}) => {
-  return /*#__PURE__*/React__default.createElement(Shelf, _extends({
-    space: "xsmall"
-  }, rest), children);
-};
-
-ButtonGroup.propTypes = {
-  children: node.isRequired
-};
-
 var style$7 = {"healthScore":"_27RmL","small":"_3A1iT","healthy":"_d1_Zw","average":"_1XVcz","unhealthy":"_3OPFu","NA":"_1yA3K","large":"_b6lBj","text":"_2u2Jt","active":"_31lmN"};
@@ -1173,3 +1254,3 @@
 
-export { Box, Button, ButtonGroup, Columns, Dropdown, DropdownItem, DropdownLabel, DropdownSublevel, Heading, Healthscore, Icon, Modal, Shelf, Stack, Text, Tooltip };
+export { Box, Button, ButtonGroup, Columns, Dropdown, DropdownItem, DropdownLabel, DropdownSublevel, Heading, Healthscore, Icon, Modal, Shelf, Stack, Stock, Text, Tooltip };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "chaser-components",
   "description": "Chaser HQ Component Library",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "module": "dist/index.modern.js",

src/components/Icon/Icons/index.jsx

@@ -0,1 +1,3 @@
+export { default as ArrowDown } from './ArrowDown'
+export { default as ArrowUp } from './ArrowUp'
 export { default as Help } from './Help'
@@ -2,0 +4,0 @@ export { default as Clock } from './Clock'

src/components/Icon/index.jsx

@@ -15,2 +15,4 @@ import React from 'react';
   Help,
+  ArrowUp,
+  ArrowDown,
 } from './Icons';
@@ -29,2 +31,4 @@
   'warning-circle': WarningCircle,
+  'arrow-up': ArrowUp,
+  'arrow-down': ArrowDown,
 };
@@ -31,0 +35,0 @@

src/index.js

 import './index.scss';
 
 // complete-components
+export { default as Stock } from './components/Stock/index';
 export { default as Button } from './components/Button/index';
@@ -5,0 +6,0 @@ export { default as Icon } from './components/Icon/index';

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

374459

increased by4.58%

Number of package files

104

increased by2.97%

Lines of code

5048

increased by4.8%

Number of low quality alerts

1

decreased by-50%

No dependency changes