pallote-react 0.3.10 → 0.4.0

package/dist/index.js

@@ -1,390 +1,1416 @@
-"use strict";
+import React, { useState, useEffect, createContext, useContext, useRef } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+import { X, CalendarBlank, Clock, CaretUpDown, ArrowSquareOut, CaretDoubleLeft, CaretLeft, CaretRight, CaretDoubleRight } from '@phosphor-icons/react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Accordion", {
-  enumerable: true,
-  get: function get() {
-    return _Accordion.Accordion;
-  }
-});
-Object.defineProperty(exports, "AccordionItem", {
-  enumerable: true,
-  get: function get() {
-    return _AccordionItem.AccordionItem;
-  }
-});
-Object.defineProperty(exports, "Alert", {
-  enumerable: true,
-  get: function get() {
-    return _Alert.Alert;
-  }
-});
-Object.defineProperty(exports, "Breadcrumbs", {
-  enumerable: true,
-  get: function get() {
-    return _Breadcrumbs.Breadcrumbs;
-  }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function get() {
-    return _Button.Button;
-  }
-});
-Object.defineProperty(exports, "Buttons", {
-  enumerable: true,
-  get: function get() {
-    return _Buttons.Buttons;
-  }
-});
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function get() {
-    return _Card.Card;
-  }
-});
-Object.defineProperty(exports, "CardActions", {
-  enumerable: true,
-  get: function get() {
-    return _CardActions.CardActions;
-  }
-});
-Object.defineProperty(exports, "CardContent", {
-  enumerable: true,
-  get: function get() {
-    return _CardContent.CardContent;
-  }
-});
-Object.defineProperty(exports, "CardHeader", {
-  enumerable: true,
-  get: function get() {
-    return _CardHeader.CardHeader;
-  }
-});
-Object.defineProperty(exports, "CardMedia", {
-  enumerable: true,
-  get: function get() {
-    return _CardMedia.CardMedia;
-  }
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function get() {
-    return _Checkbox.Checkbox;
-  }
-});
-Object.defineProperty(exports, "Checkboxes", {
-  enumerable: true,
-  get: function get() {
-    return _Checkboxes.Checkboxes;
-  }
-});
-Object.defineProperty(exports, "Chip", {
-  enumerable: true,
-  get: function get() {
-    return _Chip.Chip;
-  }
-});
-Object.defineProperty(exports, "Color", {
-  enumerable: true,
-  get: function get() {
-    return _Color.Color;
-  }
-});
-Object.defineProperty(exports, "Display", {
-  enumerable: true,
-  get: function get() {
-    return _Display.Display;
-  }
-});
-Object.defineProperty(exports, "Divider", {
-  enumerable: true,
-  get: function get() {
-    return _Divider.Divider;
-  }
-});
-Object.defineProperty(exports, "Grid", {
-  enumerable: true,
-  get: function get() {
-    return _Grid.Grid;
-  }
-});
-Object.defineProperty(exports, "Input", {
-  enumerable: true,
-  get: function get() {
-    return _Input.Input;
-  }
-});
-Object.defineProperty(exports, "Link", {
-  enumerable: true,
-  get: function get() {
-    return _Link.Link;
-  }
-});
-Object.defineProperty(exports, "List", {
-  enumerable: true,
-  get: function get() {
-    return _List.List;
-  }
-});
-Object.defineProperty(exports, "ListItem", {
-  enumerable: true,
-  get: function get() {
-    return _ListItem.ListItem;
-  }
-});
-Object.defineProperty(exports, "Loader", {
-  enumerable: true,
-  get: function get() {
-    return _Loader.Loader;
-  }
-});
-Object.defineProperty(exports, "Modal", {
-  enumerable: true,
-  get: function get() {
-    return _Modal.Modal;
-  }
-});
-Object.defineProperty(exports, "ModalActions", {
-  enumerable: true,
-  get: function get() {
-    return _ModalActions.ModalActions;
-  }
-});
-Object.defineProperty(exports, "ModalContent", {
-  enumerable: true,
-  get: function get() {
-    return _ModalContent.ModalContent;
-  }
-});
-Object.defineProperty(exports, "ModalHeader", {
-  enumerable: true,
-  get: function get() {
-    return _ModalHeader.ModalHeader;
-  }
-});
-Object.defineProperty(exports, "Nav", {
-  enumerable: true,
-  get: function get() {
-    return _Nav.Nav;
-  }
-});
-Object.defineProperty(exports, "NavBar", {
-  enumerable: true,
-  get: function get() {
-    return _NavBar.NavBar;
-  }
-});
-Object.defineProperty(exports, "NavGroup", {
-  enumerable: true,
-  get: function get() {
-    return _NavGroup.NavGroup;
-  }
-});
-Object.defineProperty(exports, "NavItem", {
-  enumerable: true,
-  get: function get() {
-    return _NavItem.NavItem;
-  }
-});
-Object.defineProperty(exports, "Page", {
-  enumerable: true,
-  get: function get() {
-    return _Page.Page;
-  }
-});
-Object.defineProperty(exports, "PageHeader", {
-  enumerable: true,
-  get: function get() {
-    return _PageHeader.PageHeader;
-  }
-});
-Object.defineProperty(exports, "Radio", {
-  enumerable: true,
-  get: function get() {
-    return _Radio.Radio;
-  }
-});
-Object.defineProperty(exports, "RadioButtons", {
-  enumerable: true,
-  get: function get() {
-    return _RadioButtons.RadioButtons;
-  }
-});
-Object.defineProperty(exports, "Section", {
-  enumerable: true,
-  get: function get() {
-    return _Section.Section;
-  }
-});
-Object.defineProperty(exports, "SectionContent", {
-  enumerable: true,
-  get: function get() {
-    return _SectionContent.SectionContent;
-  }
-});
-Object.defineProperty(exports, "SectionHeader", {
-  enumerable: true,
-  get: function get() {
-    return _SectionHeader.SectionHeader;
-  }
-});
-Object.defineProperty(exports, "Select", {
-  enumerable: true,
-  get: function get() {
-    return _Select.Select;
-  }
-});
-Object.defineProperty(exports, "Snippet", {
-  enumerable: true,
-  get: function get() {
-    return _Snippet.Snippet;
-  }
-});
-Object.defineProperty(exports, "Status", {
-  enumerable: true,
-  get: function get() {
-    return _Status.Status;
-  }
-});
-Object.defineProperty(exports, "Switch", {
-  enumerable: true,
-  get: function get() {
-    return _Switch.Switch;
-  }
-});
-Object.defineProperty(exports, "Table", {
-  enumerable: true,
-  get: function get() {
-    return _Table.Table;
-  }
-});
-Object.defineProperty(exports, "TableBody", {
-  enumerable: true,
-  get: function get() {
-    return _TableBody.TableBody;
-  }
-});
-Object.defineProperty(exports, "TableCell", {
-  enumerable: true,
-  get: function get() {
-    return _TableCell.TableCell;
-  }
-});
-Object.defineProperty(exports, "TableFooter", {
-  enumerable: true,
-  get: function get() {
-    return _TableFooter.TableFooter;
-  }
-});
-Object.defineProperty(exports, "TableHead", {
-  enumerable: true,
-  get: function get() {
-    return _TableHead.TableHead;
-  }
-});
-Object.defineProperty(exports, "TableRow", {
-  enumerable: true,
-  get: function get() {
-    return _TableRow.TableRow;
-  }
-});
-Object.defineProperty(exports, "Tabs", {
-  enumerable: true,
-  get: function get() {
-    return _Tabs.Tabs;
-  }
-});
-Object.defineProperty(exports, "TabsContent", {
-  enumerable: true,
-  get: function get() {
-    return _TabsContent.TabsContent;
-  }
-});
-Object.defineProperty(exports, "TabsControl", {
-  enumerable: true,
-  get: function get() {
-    return _TabsControl.TabsControl;
-  }
-});
-Object.defineProperty(exports, "Tag", {
-  enumerable: true,
-  get: function get() {
-    return _Tag.Tag;
-  }
-});
-Object.defineProperty(exports, "Text", {
-  enumerable: true,
-  get: function get() {
-    return _Text.Text;
+const Color = ({
+  fill,
+  stroke,
+  customFill,
+  customStroke,
+  className,
+  children,
+  ...props
+}) => {
+  const style = {
+    ...(customFill ? {
+      backgroundColor: customFill
+    } : {}),
+    ...(customStroke ? {
+      border: `1px solid ${customStroke}`
+    } : {})
+  };
+  const childClassName = classnames(children.props.className, className, {
+    [`fill-${fill}`]: fill,
+    [`stroke-${stroke}`]: stroke
+  });
+  return /*#__PURE__*/React.cloneElement(children, {
+    className: childClassName,
+    style: {
+      ...children.props.style,
+      ...style
+    },
+    ...props
+  });
+};
+Color.propTypes = {
+  fill: PropTypes.oneOf(['main', 'contrast', 'grey90', 'grey80', 'grey70', 'grey60', 'grey50', 'grey40', 'grey30', 'grey20', 'grey10', 'grey5', 'default', 'paper', 'primary', 'secondary', 'success', 'info', 'warning', 'error']),
+  stroke: PropTypes.oneOf(['main', 'contrast', 'grey90', 'grey80', 'grey70', 'grey60', 'grey50', 'grey40', 'grey30', 'grey20', 'grey10', 'grey5', 'default', 'paper', 'primary', 'secondary', 'success', 'info', 'warning', 'error']),
+  customFill: PropTypes.string,
+  customStroke: PropTypes.string,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const viewportSizes = {
+  'mobile-sm': 375,
+  'mobile': 576,
+  'tablet': 768,
+  'laptop': 1024,
+  'desktop': 1280
+};
+const Display = ({
+  show,
+  hide,
+  children
+}) => {
+  const [isDisplayed, setDisplayed] = useState(false);
+  const updateMedia = () => {
+    if (show === 'touch') {
+      setDisplayed(navigator.maxTouchPoints > 0);
+    } else if (hide === 'touch') {
+      setDisplayed(navigator.maxTouchPoints === 0);
+    } else {
+      const viewportValue = viewportSizes[show || hide];
+      if (show) {
+        setDisplayed(window.innerWidth <= viewportValue);
+      } else if (hide) {
+        setDisplayed(window.innerWidth > viewportValue);
+      }
+    }
+  };
+  useEffect(() => {
+    updateMedia();
+    window.addEventListener('resize', updateMedia);
+    return () => window.removeEventListener('resize', updateMedia);
+  }, [show, hide]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isDisplayed ? children : null);
+};
+Display.propTypes = {
+  show: PropTypes.oneOf(['mobile-sm', 'mobile', 'tablet', 'laptop', 'desktop', 'touch']),
+  hide: PropTypes.oneOf(['mobile-sm', 'mobile', 'tablet', 'laptop', 'desktop', 'touch']),
+  children: PropTypes.node
+};
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+const Grid = ({
+  item,
+  wrap,
+  direction,
+  justify,
+  items,
+  self,
+  gap,
+  col,
+  colxs,
+  colsm,
+  colmd,
+  collg,
+  colxl,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames('flex', {
+      'flex-wrap': wrap,
+      [`direction-${direction}`]: direction,
+      [`justify-${justify}`]: justify,
+      [`items-${items}`]: items,
+      [`slef-${self}`]: self,
+      [`col-${col}`]: col,
+      [`col-xs-${colxs}`]: colxs,
+      [`col-sm-${colsm}`]: colsm,
+      [`col-md-${colmd}`]: colmd,
+      [`col-lg-${collg}`]: collg,
+      [`col-xl-${colxl}`]: colxl,
+      [`gap-${gap}`]: gap
+    }, className)
+  }, props), children);
+};
+Grid.propTypes = {
+  item: PropTypes.bool,
+  wrap: PropTypes.bool,
+  direction: PropTypes.oneOf(['column', 'columnReverse', 'row', 'rowReverse']),
+  justify: PropTypes.oneOf(['center', 'end', 'start', 'spaceAround', 'spaceBetween', 'spaceEvenly']),
+  items: PropTypes.oneOf(['stretch', 'center', 'end', 'start', 'baseline']),
+  self: PropTypes.oneOf(['stretch', 'center', 'end', 'start', 'baseline']),
+  col: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+  colxs: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+  colsm: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+  colmd: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+  collg: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+  colxl: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+  gap: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const Text = ({
+  variant,
+  align,
+  weight,
+  transform,
+  italic,
+  underline,
+  strikeThrough,
+  code,
+  color,
+  component,
+  className,
+  children,
+  ...props
+}) => {
+  const Component = component || 'p';
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classnames([{
+      [`${variant}`]: variant,
+      [`text-${align}`]: align,
+      [`text-${weight}`]: weight,
+      [`text-${transform}`]: transform,
+      [`text-${color}`]: color,
+      'text-italic': italic,
+      'text-underline': underline,
+      'text-strikeThrough': strikeThrough,
+      'text-code': code
+    }, className])
+  }, props), children);
+};
+Text.propTypes = {
+  variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle', 'body', 'caption', 'overline']),
+  align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
+  weight: PropTypes.oneOf(['regular', 'bold']),
+  transform: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase', 'initial', 'inherit']),
+  italic: PropTypes.bool,
+  underline: PropTypes.bool,
+  strikeThrough: PropTypes.bool,
+  code: PropTypes.bool,
+  color: PropTypes.oneOf(['default', 'alt', 'disabled', 'contrast', 'contrastAlt', 'contrastDisabled', 'primary', 'secondary', 'success', 'info', 'warning', 'error']),
+  component: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'legend']),
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const Alert = ({
+  color = 'success',
+  variant = 'toast',
+  title,
+  subtitle,
+  dense,
+  noIcon,
+  show,
+  onClose,
+  className,
+  ...props
+}) => {
+  const [shouldRender, setRender] = useState(show);
+  const [container] = useState(() => {
+    let el = document.getElementById('alerts');
+    if (!el) {
+      el = document.createElement('div');
+      el.id = 'alerts';
+      document.body.appendChild(el);
+    }
+    return el;
+  });
+  useEffect(() => {
+    if (show) setRender(true);
+  }, [show]);
+  const onAnimationEnd = () => {
+    if (!show) setRender(false);
+  };
+  let alert = /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['alert', {
+      [`alert-${color}`]: color,
+      [`alert-${variant}`]: variant,
+      'alert-slideIn': show,
+      'alert-slideOut': !show,
+      'alert-dense': dense,
+      'alert-noIcon': noIcon
+    }, className]),
+    onAnimationEnd: onAnimationEnd
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: classnames('alert_content')
+  }, title ? /*#__PURE__*/React.createElement(Text, {
+    className: classnames('alert_title'),
+    variant: dense ? 'caption' : 'body',
+    weight: "bold"
+  }, title) : null, subtitle ? /*#__PURE__*/React.createElement(Text, {
+    variant: dense ? 'overline' : 'caption',
+    className: classnames('alert_subtitle')
+  }, subtitle) : null), onClose ? /*#__PURE__*/React.createElement(X, {
+    className: classnames('alert_close'),
+    onClick: onClose,
+    size: dense ? 14 : 16
+  }) : null);
+  if (variant === 'notice') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, alert);
+  } else {
+    return /*#__PURE__*/createPortal(shouldRender && alert, container);
   }
-});
-Object.defineProperty(exports, "Textarea", {
-  enumerable: true,
-  get: function get() {
-    return _Textarea.Textarea;
+};
+Alert.propTypes = {
+  color: PropTypes.oneOf(['success', 'info', 'warning', 'error']),
+  variant: PropTypes.oneOf(['bar', 'toast', 'notice']),
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  dense: PropTypes.bool,
+  noIcon: PropTypes.bool,
+  show: PropTypes.bool,
+  onClose: PropTypes.func,
+  className: PropTypes.node
+};
+
+const Breadcrumbs = ({
+  items,
+  separator = "slash",
+  className
+}) => /*#__PURE__*/React.createElement("nav", {
+  "aria-label": "breadcrumbs",
+  className: classnames(['breadcrumbs', {
+    [`breadcrumbs-${separator}`]: separator
+  }, className])
+}, /*#__PURE__*/React.createElement("ol", null, items.map((item, index) => /*#__PURE__*/React.createElement("li", {
+  key: index,
+  className: "breadcrumbs_item"
+}, index === items.length - 1 ? /*#__PURE__*/React.createElement("p", {
+  "aria-current": "page"
+}, item.label) : /*#__PURE__*/React.createElement("a", {
+  href: item.href
+}, item.label)))));
+Breadcrumbs.propTypes = {
+  items: PropTypes.array,
+  separator: PropTypes.oneOf(['slash', 'arrow']),
+  className: PropTypes.node
+};
+Breadcrumbs.defaultProps = {};
+
+const Button = /*#__PURE__*/React.forwardRef(({
+  component = 'button',
+  kind,
+  variant = 'fill',
+  size = 'md',
+  color = 'primary',
+  fullWidth,
+  disabled,
+  iconLeft,
+  iconRight,
+  className,
+  children = 'button',
+  ...props
+}, ref) => {
+  const Component = component || 'button';
+  let content;
+  if (kind === 'icon') {
+    content = children;
+  } else {
+    content = /*#__PURE__*/React.createElement(React.Fragment, null, iconLeft && iconLeft, children, iconRight && iconRight);
   }
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classnames(['button', {
+      [`button-${size}`]: size,
+      [`button-${color}`]: color,
+      [`button-${kind}`]: kind,
+      [`button-${variant}`]: variant,
+      'button-fullWidth': fullWidth,
+      'button-disabled': disabled
+    }, className]),
+    ref: ref,
+    disabled: Component === 'button' ? disabled : undefined
+  }, props), content);
 });
-Object.defineProperty(exports, "Tooltip", {
-  enumerable: true,
-  get: function get() {
-    return _Tooltip.Tooltip;
+Button.displayName = 'Button';
+Button.propTypes = {
+  component: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a']), PropTypes.elementType]),
+  kind: PropTypes.oneOf(['text', 'icon']),
+  variant: PropTypes.oneOf(['fill', 'stroke', 'transparent']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+  color: PropTypes.oneOf(['primary', 'secondary', 'grey', 'success', 'info', 'warning', 'error', 'main', 'contrast']),
+  fullWidth: PropTypes.bool,
+  disabled: PropTypes.bool,
+  iconLeft: PropTypes.node,
+  iconRight: PropTypes.node,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const Buttons = ({
+  direction = 'landscape',
+  fullWidth,
+  wide,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['buttons', {
+      [`buttons-${direction}`]: direction,
+      'buttons-fullWidth': fullWidth,
+      'buttons-wide': wide
+    }, className])
+  }, props), children);
+};
+Buttons.propTypes = {
+  direction: PropTypes.oneOf(['landscape', 'portrait']),
+  fullWidth: PropTypes.bool,
+  wide: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const SizeContext = /*#__PURE__*/createContext('md');
+const Card = ({
+  size = 'md',
+  fill = 'paper',
+  direction = 'portrait',
+  align = 'left',
+  hasShadow = false,
+  transparent = false,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(SizeContext.Provider, {
+    value: size
+  }, /*#__PURE__*/React.createElement(Color, {
+    fill: transparent ? null : fill
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['card', {
+      [`card-${size}`]: size,
+      [`card-${direction}`]: direction,
+      [`card-${align}`]: align,
+      'card-hasShadow': hasShadow,
+      'card-transparent': transparent
+    }, className])
+  }, props), children)));
+};
+Card.propTypes = {
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  fill: PropTypes.oneOf(['default', 'paper', 'primary', 'secondary', 'success', 'info', 'warning', 'error']),
+  direction: PropTypes.oneOf(['portrait', 'landscape']),
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  hasShadow: PropTypes.bool,
+  transparent: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const CardActions = ({
+  direction,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['card_actions', {
+      [`card_actions-${direction}`]: direction
+    }, className])
+  }, props), children);
+};
+CardActions.propTypes = {
+  direction: PropTypes.oneOf(['portrait', 'landscape']),
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const CardContent = ({
+  fullWidth,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['card_content', {
+      'card_content-fullWidth': fullWidth
+    }, className])
+  }, props), children);
+};
+CardContent.propTypes = {
+  fullWidth: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const CardHeader = ({
+  label,
+  title,
+  subtitle,
+  actions,
+  className,
+  ...props
+}) => {
+  const useSize = () => useContext(SizeContext);
+  useSize();
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['card_header', className])
+  }, props), actions && /*#__PURE__*/React.createElement("div", {
+    className: "card_headerActions"
+  }, actions), label ? /*#__PURE__*/React.createElement(Text, {
+    className: classnames('card_label')
+  }, label) : null, /*#__PURE__*/React.createElement(Text, {
+    className: classnames('card_title')
+  }, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
+    className: classnames('card_subtitle')
+  }, subtitle) : null);
+};
+CardHeader.propTypes = {
+  label: PropTypes.string,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  actions: PropTypes.node,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const CardMedia = ({
+  width,
+  height,
+  image,
+  fullWidth,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['card_media', {
+      'card_media-fullWidth': fullWidth
+    }, className])
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: 'card_mediaInner',
+    style: {
+      width: width + 'px',
+      paddingBottom: height,
+      backgroundImage: `url(${image})`
+    }
+  }));
+};
+CardMedia.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  image: PropTypes.string,
+  fullWidth: PropTypes.bool,
+  className: PropTypes.node
+};
+
+const Checkbox = ({
+  id,
+  value,
+  label,
+  checked,
+  disabled,
+  optional,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(['checkbox', {
+      'checkbox-disabled': disabled
+    }, className])
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: classnames('checkbox_control'),
+    type: "checkbox",
+    name: id,
+    id: id,
+    value: value,
+    checked: checked,
+    "aria-checked": checked,
+    disabled: disabled,
+    required: !(disabled || optional)
+  }, props)), /*#__PURE__*/React.createElement("label", {
+    className: classnames('checkbox_label'),
+    htmlFor: id
+  }, label));
+};
+Checkbox.propTypes = {
+  id: PropTypes.string,
+  value: PropTypes.string,
+  label: PropTypes.string,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  className: PropTypes.node
+};
+
+const Checkboxes = ({
+  onChange,
+  id,
+  label = 'Label',
+  direction = 'portrait',
+  error,
+  disabled,
+  optional,
+  hint,
+  children,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("fieldset", {
+    className: classnames(['input', {
+      'js-error': error,
+      'input-disabled': disabled,
+      'input-optional': optional
+    }, className]),
+    onChange: onChange,
+    "aria-description": hint
+  }, label && /*#__PURE__*/React.createElement("legend", {
+    className: 'input_label',
+    htmlFor: id
+  }, label), hint && /*#__PURE__*/React.createElement("p", {
+    className: 'input_hint'
+  }, hint), /*#__PURE__*/React.createElement("div", {
+    className: classnames(['input_control', 'radios', {
+      [`radios-${direction}`]: direction
+    }])
+  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+    optional,
+    disabled
+  }) : child)));
+};
+Checkboxes.propTypes = {
+  onChange: PropTypes.func,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  direction: PropTypes.oneOf(['portrait', 'landscape']),
+  error: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  hint: PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.node
+};
+
+const Divider = ({
+  direction = 'landscape',
+  padding = 'md',
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['divider', {
+      [`divider-${direction}`]: direction,
+      [`divider-${padding}`]: padding
+    }, className])
+  }, props));
+};
+Divider.propTypes = {
+  direction: PropTypes.oneOf(['landscape', 'portrait']),
+  padding: PropTypes.oneOf(['none', 'sm', 'md', 'lg']),
+  className: PropTypes.node
+};
+
+const Input = ({
+  onChange,
+  type = 'text',
+  id,
+  placeholder,
+  label = 'Input',
+  icon,
+  isFocused,
+  error,
+  disabled,
+  optional,
+  hint,
+  className,
+  ...props
+}) => {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (isFocused && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isFocused]);
+  const customIcon = icon || type === 'date' && /*#__PURE__*/React.createElement(CalendarBlank, null) || type === 'time' && /*#__PURE__*/React.createElement(Clock, null) || type === 'number' && /*#__PURE__*/React.createElement(CaretUpDown, null);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(['input', {
+      'js-error': error,
+      'input-disabled': disabled,
+      'input-optional': optional,
+      'input-withIcon': icon
+    }, className]),
+    onChange: onChange
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: 'input_label',
+    htmlFor: id
+  }, label), hint && /*#__PURE__*/React.createElement("p", {
+    className: 'input_hint'
+  }, hint), customIcon && /*#__PURE__*/React.createElement("div", {
+    className: 'input_icon'
+  }, customIcon), /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef,
+    type: type,
+    className: 'input_control',
+    name: id,
+    id: id,
+    placeholder: placeholder,
+    disabled: disabled,
+    required: !(disabled || optional),
+    "aria-description": hint
+  }, props)));
+};
+Input.propTypes = {
+  onChange: PropTypes.func,
+  type: PropTypes.oneOf(['date', 'email', 'number', 'tel', 'text', 'time']),
+  id: PropTypes.string,
+  placeholder: PropTypes.string,
+  label: PropTypes.string,
+  icon: PropTypes.node,
+  isFocused: PropTypes.bool,
+  error: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  hint: PropTypes.string,
+  className: PropTypes.node
+};
+
+const Link = ({
+  component = 'a',
+  icon,
+  color,
+  isExternal,
+  href,
+  className,
+  children,
+  ...props
+}) => {
+  const Component = component || 'a';
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classnames(['link', {
+      [`text-${color}`]: color
+    }, className]),
+    href: isExternal ? href : undefined,
+    target: isExternal ? '_blank' : undefined,
+    rel: isExternal ? 'noopener noreferrer' : undefined
+  }, props), children, icon && !isExternal && /*#__PURE__*/React.createElement("span", {
+    className: 'link_icon'
+  }, icon), isExternal && /*#__PURE__*/React.createElement("span", {
+    className: 'link_icon'
+  }, /*#__PURE__*/React.createElement(ArrowSquareOut, null)));
+};
+Link.propTypes = {
+  component: PropTypes.oneOfType(['a', PropTypes.elementType]),
+  icon: PropTypes.node,
+  color: PropTypes.oneOf(['default', 'alt', 'disabled', 'contrast', 'contrastAlt', 'contrastDisabled', 'primary', 'secondary', 'inherit']),
+  href: PropTypes.string,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const List = ({
+  dense,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['list', {
+      'list-dense': dense
+    }, className])
+  }, props), children);
+};
+List.propTypes = {
+  dense: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const ListItem = ({
+  icon,
+  bold,
+  className,
+  children = 'List item',
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    className: classnames(['list_item', {
+      'list_item-bold': bold
+    }, className])
+  }, props), icon ? /*#__PURE__*/React.cloneElement(icon, {
+    className: `${icon.props.className ?? ''} list_itemIcon`
+  }) : null, children);
+};
+ListItem.propTypes = {
+  icon: PropTypes.node,
+  bold: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const Radio = ({
+  id,
+  name,
+  value,
+  label,
+  checked,
+  disabled,
+  optional,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(['radio', {
+      'radio-disabled': disabled
+    }, className])
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: classnames('radio_control'),
+    type: "radio",
+    id: id,
+    name: name,
+    value: value,
+    checked: checked,
+    "aria-checked": checked,
+    disabled: disabled,
+    required: !(disabled || optional)
+  }, props)), /*#__PURE__*/React.createElement("label", {
+    className: classnames('radio_label'),
+    htmlFor: id
+  }, label));
+};
+Radio.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  label: PropTypes.string,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  className: PropTypes.node
+};
+
+const RadioButtons = ({
+  onChange,
+  id,
+  label = 'Label',
+  direction = 'portrait',
+  error,
+  disabled,
+  optional,
+  hint,
+  children,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("fieldset", {
+    className: classnames(['input', {
+      'js-error': error,
+      'input-disabled': disabled,
+      'input-optional': optional
+    }, className]),
+    onChange: onChange,
+    "aria-description": hint
+  }, label && /*#__PURE__*/React.createElement("legend", {
+    className: 'input_label',
+    htmlFor: id
+  }, label), hint && /*#__PURE__*/React.createElement("p", {
+    className: 'input_hint'
+  }, hint), /*#__PURE__*/React.createElement("div", {
+    className: classnames(['input_control', 'radios', {
+      [`radios-${direction}`]: direction
+    }])
+  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+    optional,
+    disabled
+  }) : child)));
+};
+RadioButtons.propTypes = {
+  onChange: PropTypes.func,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  direction: PropTypes.oneOf(['portrait', 'landscape']),
+  error: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  hint: PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.node
+};
+
+const SectionHeader = ({
+  label,
+  title,
+  promoteTitle = false,
+  titleComponent,
+  subtitle,
+  actions,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['section_header', className])
+  }, props), label ? /*#__PURE__*/React.createElement(Text, {
+    className: classnames('section_label')
+  }, label) : null, /*#__PURE__*/React.createElement(Text, {
+    className: "section_title",
+    component: titleComponent || (promoteTitle ? 'h1' : 'h2')
+  }, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
+    className: classnames('section_subtitle')
+  }, subtitle) : null, actions ? /*#__PURE__*/React.createElement("div", {
+    className: "section_actions"
+  }, actions) : null);
+};
+SectionHeader.propTypes = {
+  label: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  promoteTitle: PropTypes.bool,
+  titleComponent: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']),
+  subtitle: PropTypes.string,
+  actions: PropTypes.node,
+  className: PropTypes.node
+};
+
+const Section = ({
+  align = 'left',
+  color = 'default',
+  landing,
+  header,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['section', {
+      [`section-${align}`]: align,
+      [`section-${color}`]: color,
+      'section-landing': landing,
+      'section-header': header
+    }, className])
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: 'section_container'
+  }, React.Children.map(children, child => {
+    if (/*#__PURE__*/React.isValidElement(child) && child.type === SectionHeader) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        promoteTitle: landing || header
+      });
+    }
+    return child;
+  })));
+};
+Section.propTypes = {
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  color: PropTypes.oneOf(['default', 'paper', 'primary', 'primaryLight']),
+  landing: PropTypes.bool,
+  header: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const SectionContent = ({
+  align = 'left',
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['section_content', {
+      [`section_content-${align}`]: align
+    }, className])
+  }, props), children);
+};
+SectionContent.propTypes = {
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const Select = ({
+  onChange,
+  id,
+  label,
+  isFocused,
+  error,
+  disabled,
+  optional,
+  dense,
+  hint,
+  children,
+  className,
+  ...props
+}) => {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (isFocused && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isFocused]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(['input', 'select', {
+      'input-focused': isFocused,
+      'js-error': error,
+      'input-disabled': disabled,
+      'input-optional': optional,
+      'input-dense': dense
+    }, className]),
+    onChange: onChange
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: 'input_label',
+    htmlFor: id
+  }, label), hint && /*#__PURE__*/React.createElement("p", {
+    className: 'input_hint'
+  }, hint), /*#__PURE__*/React.createElement("select", _extends({
+    ref: inputRef,
+    className: 'input_control',
+    name: id,
+    id: id,
+    disabled: disabled,
+    required: !(disabled || optional),
+    "aria-description": hint
+  }, props), children));
+};
+Select.propTypes = {
+  onChange: PropTypes.func,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  isFocused: PropTypes.bool,
+  error: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  dense: PropTypes.bool,
+  hint: PropTypes.string,
+  children: PropTypes.any,
+  className: PropTypes.node
+};
+
+var nnfxDark = {
+  "hljs": {
+    "display": "block",
+    "overflowX": "auto",
+    "padding": "0.5em",
+    "background": "#333",
+    "color": "#fff"
+  },
+  "xml .hljs-meta": {
+    "fontWeight": "bold",
+    "fontStyle": "italic",
+    "color": "#69f"
+  },
+  "hljs-comment": {
+    "fontStyle": "italic",
+    "color": "#9c6"
+  },
+  "hljs-quote": {
+    "fontStyle": "italic",
+    "color": "#9c6"
+  },
+  "hljs-name": {
+    "color": "#a7a",
+    "fontWeight": "bold"
+  },
+  "hljs-keyword": {
+    "color": "#a7a"
+  },
+  "hljs-attr": {
+    "fontWeight": "bold",
+    "color": "#fff"
+  },
+  "hljs-string": {
+    "fontWeight": "normal",
+    "color": "#bce"
+  },
+  "hljs-variable": {
+    "color": "#588"
+  },
+  "hljs-template-variable": {
+    "color": "#588"
+  },
+  "hljs-code": {
+    "color": "#bce"
+  },
+  "hljs-meta-string": {
+    "color": "#bce"
+  },
+  "hljs-number": {
+    "color": "#bce"
+  },
+  "hljs-regexp": {
+    "color": "#bce"
+  },
+  "hljs-link": {
+    "color": "#bce"
+  },
+  "hljs-title": {
+    "color": "#d40"
+  },
+  "hljs-symbol": {
+    "color": "#d40"
+  },
+  "hljs-bullet": {
+    "color": "#d40"
+  },
+  "hljs-built_in": {
+    "color": "#d40"
+  },
+  "hljs-builtin-name": {
+    "color": "#d40"
+  },
+  "hljs-section": {
+    "color": "#a85"
+  },
+  "hljs-meta": {
+    "color": "#a85"
+  },
+  "hljs-class .hljs-title": {
+    "color": "#96c"
+  },
+  "hljs-type": {
+    "color": "#96c"
+  },
+  "hljs-function .hljs-title": {
+    "color": "#fff"
+  },
+  "hljs-subst": {
+    "color": "#fff"
+  },
+  "hljs-formula": {
+    "backgroundColor": "#eee",
+    "fontStyle": "italic"
+  },
+  "hljs-addition": {
+    "backgroundColor": "#797"
+  },
+  "hljs-deletion": {
+    "backgroundColor": "#c99"
+  },
+  "hljs-selector-id": {
+    "color": "#964"
+  },
+  "hljs-selector-class": {
+    "color": "#964"
+  },
+  "hljs-doctag": {
+    "fontWeight": "bold"
+  },
+  "hljs-strong": {
+    "fontWeight": "bold"
+  },
+  "hljs-emphasis": {
+    "fontStyle": "italic"
   }
-});
-var _Color = require("./utilities/Color");
-var _Display = require("./utilities/Display");
-var _Text = require("./utilities/Text");
-var _Accordion = require("./components/Accordion");
-var _AccordionItem = require("./components/AccordionItem");
-var _Alert = require("./components/Alert");
-var _Grid = require("./components/Grid");
-var _Breadcrumbs = require("./components/Breadcrumbs");
-var _Button = require("./components/Button");
-var _Buttons = require("./components/Buttons");
-var _Card = require("./components/Card");
-var _CardActions = require("./components/CardActions");
-var _CardContent = require("./components/CardContent");
-var _CardHeader = require("./components/CardHeader");
-var _CardMedia = require("./components/CardMedia");
-var _Checkbox = require("./components/Checkbox");
-var _Checkboxes = require("./components/Checkboxes");
-var _Chip = require("./components/Chip");
-var _Divider = require("./components/Divider");
-var _Input = require("./components/Input");
-var _Link = require("./components/Link");
-var _List = require("./components/List");
-var _ListItem = require("./components/ListItem");
-var _Loader = require("./components/Loader");
-var _Modal = require("./components/Modal");
-var _ModalActions = require("./components/ModalActions");
-var _ModalContent = require("./components/ModalContent");
-var _ModalHeader = require("./components/ModalHeader");
-var _Nav = require("./components/Nav");
-var _NavBar = require("./components/NavBar");
-var _NavGroup = require("./components/NavGroup");
-var _NavItem = require("./components/NavItem");
-var _Page = require("./components/Page");
-var _PageHeader = require("./components/PageHeader");
-var _Radio = require("./components/Radio");
-var _RadioButtons = require("./components/RadioButtons");
-var _Section = require("./components/Section");
-var _SectionContent = require("./components/SectionContent");
-var _SectionHeader = require("./components/SectionHeader");
-var _Select = require("./components/Select");
-var _Snippet = require("./components/Snippet");
-var _Status = require("./components/Status");
-var _Switch = require("./components/Switch");
-var _Table = require("./components/Table");
-var _TableBody = require("./components/TableBody");
-var _TableCell = require("./components/TableCell");
-var _TableFooter = require("./components/TableFooter");
-var _TableHead = require("./components/TableHead");
-var _TableRow = require("./components/TableRow");
-var _Tabs = require("./components/Tabs");
-var _TabsContent = require("./components/TabsContent");
-var _TabsControl = require("./components/TabsControl");
-var _Tag = require("./components/Tag");
-var _Textarea = require("./components/Textarea");
-var _Tooltip = require("./components/Tooltip");
+};
+
+const Snippet = ({
+  content = 'Snippet',
+  isDefault = false,
+  dense = false,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('snippet__wrapper')
+  }, /*#__PURE__*/React.createElement(SyntaxHighlighter, _extends({
+    language: "javascript",
+    style: nnfxDark,
+    className: classnames(['snippet', {
+      ' snippet--dense': dense
+    }, {
+      ' snippet--default': isDefault
+    }, className])
+  }, props), content));
+};
+Snippet.propTypes = {
+  content: PropTypes.string,
+  isDefault: PropTypes.bool,
+  dense: PropTypes.bool,
+  className: PropTypes.node
+};
+
+const Status = ({
+  color = 'inactive',
+  dense,
+  className,
+  children = 'Status',
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    className: classnames(['status', {
+      [`status-${color}`]: color,
+      'status-dense': dense
+    }, className])
+  }, props), children);
+};
+Status.propTypes = {
+  color: PropTypes.oneOf(['inactive', 'success', 'info', 'warning', 'error']),
+  dense: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const Switch = ({
+  id,
+  startLabel,
+  endLabel,
+  disabled,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(['switch', {
+      'switch-disabled': disabled
+    }, className])
+  }, startLabel ? /*#__PURE__*/React.createElement(Text, {
+    className: classnames('switch_label'),
+    variant: "body"
+  }, startLabel) : null, /*#__PURE__*/React.createElement("input", _extends({
+    className: classnames('switch_input'),
+    type: "checkbox",
+    name: id,
+    id: id,
+    disabled: disabled
+  }, props)), /*#__PURE__*/React.createElement("label", {
+    className: classnames('switch_switch'),
+    htmlFor: id
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames('switch_toggle')
+  })), endLabel ? /*#__PURE__*/React.createElement(Text, {
+    className: classnames('switch_label'),
+    variant: "body"
+  }, endLabel) : null);
+};
+Switch.propTypes = {
+  id: PropTypes.string,
+  startLabel: PropTypes.string,
+  endLabel: PropTypes.string,
+  disabled: PropTypes.bool,
+  className: PropTypes.node
+};
+
+const TableFooter = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(['table_footer', className])
+  }, props), /*#__PURE__*/React.createElement(Select, {
+    dense: true,
+    id: "rows",
+    className: "table_rowSelect"
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "1"
+  }, "10"), /*#__PURE__*/React.createElement("option", {
+    value: "2"
+  }, "25"), /*#__PURE__*/React.createElement("option", {
+    value: "2"
+  }, "50"), /*#__PURE__*/React.createElement("option", {
+    value: "2"
+  }, "100"), /*#__PURE__*/React.createElement("option", {
+    value: "2"
+  }, "All")), /*#__PURE__*/React.createElement(Buttons, {
+    className: "table_pagination"
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(CaretDoubleLeft, null)), /*#__PURE__*/React.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(CaretLeft, null)), /*#__PURE__*/React.createElement(Button, {
+    kind: "icon",
+    size: "sm"
+  }, "1"), /*#__PURE__*/React.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "2"), /*#__PURE__*/React.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "3"), /*#__PURE__*/React.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "\u2026"), /*#__PURE__*/React.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "8"), /*#__PURE__*/React.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(CaretRight, null)), /*#__PURE__*/React.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(CaretDoubleRight, null))));
+};
+TableFooter.propTypes = {
+  className: PropTypes.node
+};
+
+const DenseContext = /*#__PURE__*/createContext(false);
+const Table = ({
+  striped,
+  hasHover,
+  dense,
+  border,
+  withFooter,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(DenseContext.Provider, {
+    value: dense
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames(['table', {
+      'table-striped': striped,
+      'table-hasHover': hasHover,
+      'table-dense': dense,
+      'table-border': border
+    }, className])
+  }, /*#__PURE__*/React.createElement("table", _extends({
+    cellPadding: 0,
+    cellSpacing: 0,
+    className: classnames('table_content')
+  }, props), children), withFooter ? /*#__PURE__*/React.createElement(TableFooter, {
+    dense: dense ? dense : null
+  }) : null));
+};
+Table.propTypes = {
+  striped: PropTypes.bool,
+  hasHover: PropTypes.bool,
+  dense: PropTypes.bool,
+  border: PropTypes.bool,
+  withFooter: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const TableBody = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("tbody", _extends({
+    className: classnames(['table_body', className])
+  }, props), children);
+};
+TableBody.propTypes = {
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const TableCellComponentContext = /*#__PURE__*/createContext('td');
+const TableHead = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(TableCellComponentContext.Provider, {
+    value: "th"
+  }, /*#__PURE__*/React.createElement("thead", _extends({
+    className: classnames(['table_head', className])
+  }, props), children));
+};
+TableHead.propTypes = {
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const TableCell = ({
+  kind,
+  className,
+  children,
+  ...props
+}) => {
+  const useTableCellComponent = () => useContext(TableCellComponentContext);
+  const Component = useTableCellComponent();
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classnames(['table_cell', {
+      [`table_cell-${kind}`]: kind
+    }, className])
+  }, props), children);
+};
+TableCell.propTypes = {
+  kind: PropTypes.oneOf(['default', 'number', 'action']),
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const TableRow = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("tr", _extends({
+    className: classnames(['table_row', className])
+  }, props), children);
+};
+TableRow.propTypes = {
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const Tag = ({
+  color = 'primary',
+  dense,
+  className,
+  children = 'Tag',
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    className: classnames(['tag', {
+      [`tag-${color}`]: color,
+      'tag-dense': dense
+    }, className])
+  }, props), children);
+};
+Tag.propTypes = {
+  color: PropTypes.oneOf(['primary', 'secondary', 'grey', 'success', 'info', 'warning', 'error']),
+  dense: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node
+};
+
+const Textarea = ({
+  onChange,
+  id,
+  placeholder,
+  label = 'Textarea',
+  isFocused,
+  error,
+  disabled,
+  optional,
+  hint,
+  className,
+  ...props
+}) => {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (isFocused && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isFocused]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(['input', {
+      'js-error': error,
+      'input-disabled': disabled,
+      'input-optional': optional
+    }, className]),
+    onChange: onChange
+  }, label && /*#__PURE__*/React.createElement("label", {
+    className: 'input_label',
+    htmlFor: id
+  }, label), hint && /*#__PURE__*/React.createElement("p", {
+    className: 'input_hint'
+  }, hint), /*#__PURE__*/React.createElement("textarea", _extends({
+    ref: inputRef,
+    className: 'input_control',
+    name: id,
+    id: id,
+    placeholder: placeholder,
+    disabled: disabled,
+    required: !(disabled || optional),
+    rows: 4,
+    "aria-description": hint
+  }, props)));
+};
+Textarea.propTypes = {
+  onChange: PropTypes.func,
+  id: PropTypes.string,
+  placeholder: PropTypes.string,
+  label: PropTypes.string,
+  isFocused: PropTypes.bool,
+  error: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  hint: PropTypes.string,
+  className: PropTypes.node
+};
+
+export { Alert, Breadcrumbs, Button, Buttons, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Checkboxes, Color, Display, Divider, Grid, Input, Link, List, ListItem, Radio, RadioButtons, Section, SectionContent, SectionHeader, Select, Snippet, Status, Switch, Table, TableBody, TableCell, TableFooter, TableHead, TableRow, Tag, Text, Textarea };