pallote-react 0.15.0 → 0.15.2

package/dist/index.js

@@ -0,0 +1,1655 @@
+import React, { useState, useEffect, useRef, createContext, useContext } 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';
+
+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);
+  }
+};
+Alert.propTypes = {
+  color: PropTypes.oneOf(['success', 'info', 'warning', 'error']),
+  variant: PropTypes.oneOf(['bar', 'toast', 'notice']),
+  title: PropTypes.string.isRequired,
+  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.isRequired,
+  separator: PropTypes.oneOf(['slash', 'arrow']),
+  className: PropTypes.node
+};
+
+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);
+});
+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.isRequired
+};
+
+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.isRequired
+};
+
+const Card = ({
+  size = 'md',
+  fill = 'paper',
+  direction = 'portrait',
+  align = 'left',
+  hasShadow = false,
+  transparent = false,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__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.isRequired
+};
+
+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.isRequired
+};
+
+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.isRequired
+};
+
+const CardHeader = ({
+  label,
+  title,
+  subtitle,
+  actions,
+  className,
+  ...props
+}) => {
+  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.isRequired,
+  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.isRequired,
+  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.isRequired,
+  value: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  className: PropTypes.node
+};
+
+const InputLabel = ({
+  isLegend = false,
+  htmlFor,
+  label = 'Input label',
+  hint,
+  error
+}) => {
+  const LabelTag = isLegend ? 'legend' : 'label';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelTag, _extends({
+    className: 'input_label'
+  }, !isLegend && {
+    htmlFor
+  }), label), hint && /*#__PURE__*/React.createElement("p", {
+    id: htmlFor + '-hint',
+    className: 'input_hint'
+  }, hint), error && /*#__PURE__*/React.createElement("p", {
+    id: htmlFor + '-error',
+    className: 'input_error'
+  }, error));
+};
+InputLabel.propTypes = {
+  isLegend: PropTypes.bool,
+  htmlFor: (props, propName, componentName) => {
+    if (!props.isLegend && !props[propName]) {
+      return new Error(`The prop \`${propName}\` is required in \`${componentName}\` when \`isLegend\` is false.`);
+    }
+  },
+  label: PropTypes.string.isRequired,
+  hint: PropTypes.string,
+  error: PropTypes.string
+};
+
+const Checkboxes = ({
+  onChange,
+  id,
+  label = 'Label',
+  direction = 'portrait',
+  error,
+  disabled,
+  optional,
+  hint,
+  children,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("fieldset", _extends({
+    className: classnames(['input', {
+      'js-error': error,
+      'input-disabled': disabled,
+      'input-optional': optional
+    }, className]),
+    onChange: onChange
+  }, hint || error ? {
+    'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
+  } : null), /*#__PURE__*/React.createElement(InputLabel, {
+    isLegend: true,
+    label: label,
+    hint: hint,
+    error: error
+  }), /*#__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.isRequired,
+  label: PropTypes.string.isRequired,
+  direction: PropTypes.oneOf(['portrait', 'landscape']),
+  error: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  hint: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  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
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    htmlFor: id,
+    label: label,
+    hint: hint,
+    error: error
+  }), 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)
+  }, hint || error ? {
+    'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
+  } : null, props)));
+};
+Input.propTypes = {
+  onChange: PropTypes.func,
+  type: PropTypes.oneOf(['date', 'email', 'number', 'tel', 'text', 'time']),
+  id: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  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.isRequired
+};
+
+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.isRequired
+};
+
+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.isRequired
+};
+
+const Nav = ({
+  direction,
+  dense,
+  className,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("nav", _extends({
+    className: classnames(['nav', {
+      [`nav-${direction}`]: direction,
+      'nav-dense': dense
+    }, className])
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "nav_container"
+  }, children));
+};
+Nav.propTypes = {
+  direction: PropTypes.oneOf(['portrait', 'landscape']),
+  dense: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+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']).isRequired,
+  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.isRequired
+};
+
+const NavBar = ({
+  logo,
+  align,
+  className,
+  children,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleNav = () => {
+    setIsOpen(!isOpen);
+    document.body.classList.toggle('js-navbar', !isOpen);
+  };
+  return /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(Section, _extends({
+    className: classnames(['navbar', {
+      [`navbar-${align}`]: align,
+      'js-opened': isOpen
+    }, className])
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "navbar_main"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "navbar_logo"
+  }, logo), /*#__PURE__*/React.createElement("button", {
+    "aria-label": "Open mobile menu",
+    className: classnames('navbar_button', {
+      'js-opened': isOpen
+    }),
+    onClick: toggleNav
+  }, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("nav", {
+    "aria-label": "main-nav",
+    className: classnames('navbar_nav nav', {
+      'js-opened': isOpen
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "nav_container"
+  }, children))));
+};
+NavBar.propTypes = {
+  logo: PropTypes.node,
+  align: PropTypes.oneOf(['left', 'right']),
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+const NavItem = ({
+  component,
+  label,
+  active,
+  dropdown,
+  icon,
+  end,
+  to,
+  className,
+  ...props
+}) => {
+  const dropdownRef = useRef(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const onClick = () => setIsExpanded(!isExpanded);
+  let Component;
+  if (dropdown) {
+    Component = 'button';
+  } else {
+    Component = component || "a";
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(['nav_item', {
+      'nav_item-dropdown': dropdown,
+      'js-show': isExpanded
+    }, className])
+  }, /*#__PURE__*/React.createElement(Component, _extends({
+    end: end,
+    to: to,
+    className: classnames(['nav_trigger', {
+      'nav_trigger-active': active
+    }]),
+    onClick: onClick
+  }, props), icon ? /*#__PURE__*/React.createElement("span", {
+    className: classnames('nav_icon')
+  }, icon) : null, label), dropdown ? /*#__PURE__*/React.createElement("div", {
+    ref: dropdownRef,
+    className: "nav_target"
+  }, dropdown) : null);
+};
+NavItem.propTypes = {
+  label: PropTypes.string.isRequired,
+  active: PropTypes.bool,
+  dropdown: PropTypes.object,
+  icon: PropTypes.node,
+  end: PropTypes.node,
+  to: PropTypes.node,
+  className: 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.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  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", _extends({
+    className: classnames(['input', {
+      'js-error': error,
+      'input-disabled': disabled,
+      'input-optional': optional
+    }, className]),
+    onChange: onChange
+  }, hint || error ? {
+    'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
+  } : null), /*#__PURE__*/React.createElement(InputLabel, {
+    isLegend: true,
+    label: label,
+    hint: hint,
+    error: error
+  }), /*#__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.isRequired,
+  label: PropTypes.string.isRequired,
+  direction: PropTypes.oneOf(['portrait', 'landscape']),
+  error: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  hint: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  className: 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.isRequired
+};
+
+const Select = ({
+  onChange,
+  id,
+  label = 'Select',
+  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
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    htmlFor: id,
+    label: label,
+    hint: hint,
+    error: error
+  }), /*#__PURE__*/React.createElement("select", _extends({
+    ref: inputRef,
+    className: 'input_control',
+    name: id,
+    id: id,
+    disabled: disabled,
+    required: !(disabled || optional)
+  }, hint || error ? {
+    'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
+  } : null, props), children));
+};
+Select.propTypes = {
+  onChange: PropTypes.func,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  isFocused: PropTypes.bool,
+  error: PropTypes.bool,
+  disabled: PropTypes.bool,
+  optional: PropTypes.bool,
+  dense: PropTypes.bool,
+  hint: PropTypes.string,
+  children: PropTypes.any.isRequired,
+  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"
+  }
+};
+
+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.isRequired,
+  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.isRequired
+};
+
+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 TabsContext = /*#__PURE__*/createContext();
+const Tabs = ({
+  direction,
+  dense,
+  hasBorder,
+  className,
+  children
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
+    value: {
+      activeIndex,
+      setActiveIndex
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames(['tabs', {
+      [`tabs-${direction}`]: direction,
+      'tabs-dense': dense,
+      'tabs-hasBorder': hasBorder
+    }, className])
+  }, children));
+};
+Tabs.propTypes = {
+  direction: PropTypes.oneOf(['portrait', 'landscape']),
+  dense: PropTypes.bool,
+  hasBorder: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+const Tab = ({
+  index,
+  label,
+  className
+}) => {
+  const {
+    activeIndex,
+    setActiveIndex
+  } = useContext(TabsContext);
+  const isSelected = activeIndex === index;
+  return /*#__PURE__*/React.createElement("button", {
+    className: classnames(['tab', {
+      'tab-active': isSelected
+    }, className]),
+    role: "tab",
+    "aria-selected": isSelected,
+    "aria-controls": `tabpanel-${index}`,
+    id: `tab-${index}`,
+    tabIndex: isSelected ? 0 : -1,
+    onClick: () => setActiveIndex(index)
+  }, label);
+};
+Tab.propTypes = {
+  label: PropTypes.string,
+  className: PropTypes.node.isRequired
+};
+
+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.isRequired
+};
+
+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.isRequired
+};
+
+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.isRequired
+};
+
+const TableCell = ({
+  kind = 'default',
+  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.isRequired
+};
+
+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.isRequired
+};
+
+const TabsControl = ({
+  className,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    role: "tablist",
+    className: classnames(['tabs_controls', className])
+  }, children);
+};
+TabsControl.propTypes = {
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+const TabsPanel = ({
+  index,
+  className,
+  children
+}) => {
+  const {
+    activeIndex
+  } = useContext(TabsContext);
+  const isActive = activeIndex === index;
+  return isActive ? /*#__PURE__*/React.createElement("div", {
+    className: classnames(['tabs_panel', className]),
+    role: "tabpanel",
+    id: `tabpanel-${index}`,
+    "aria-labelledby": `tab-${index}`,
+    hidden: !isActive
+  }, children) : null;
+};
+TabsPanel.propTypes = {
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+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.isRequired
+};
+
+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
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    htmlFor: id,
+    label: label,
+    hint: hint,
+    error: error
+  }), /*#__PURE__*/React.createElement("textarea", _extends({
+    ref: inputRef,
+    className: 'input_control',
+    name: id,
+    id: id,
+    placeholder: placeholder,
+    disabled: disabled,
+    required: !(disabled || optional),
+    rows: 4
+  }, hint || error ? {
+    'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ')
+  } : null, props)));
+};
+Textarea.propTypes = {
+  onChange: PropTypes.func,
+  id: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  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, InputLabel, Link, List, ListItem, Nav, NavBar, NavItem, Radio, RadioButtons, Section, SectionContent, SectionHeader, Select, Snippet, Status, Switch, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableRow, Tabs, TabsControl, TabsPanel, Tag, Text, Textarea };