pallote-react 0.5.0 → 0.8.0

package/index.js

@@ -0,0 +1,3615 @@
+import * as React from 'react';
+import React__default, { 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__default.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__default.createElement(React__default.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__default.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__default.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__default.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__default.createElement("div", {
+    className: classnames('alert_content')
+  }, title ? /*#__PURE__*/React__default.createElement(Text, {
+    className: classnames('alert_title'),
+    variant: dense ? 'caption' : 'body',
+    weight: "bold"
+  }, title) : null, subtitle ? /*#__PURE__*/React__default.createElement(Text, {
+    variant: dense ? 'overline' : 'caption',
+    className: classnames('alert_subtitle')
+  }, subtitle) : null), onClose ? /*#__PURE__*/React__default.createElement(X, {
+    className: classnames('alert_close'),
+    onClick: onClose,
+    size: dense ? 14 : 16
+  }) : null);
+  if (variant === 'notice') {
+    return /*#__PURE__*/React__default.createElement(React__default.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__default.createElement("nav", {
+  "aria-label": "breadcrumbs",
+  className: classnames(['breadcrumbs', {
+    [`breadcrumbs-${separator}`]: separator
+  }, className])
+}, /*#__PURE__*/React__default.createElement("ol", null, items.map((item, index) => /*#__PURE__*/React__default.createElement("li", {
+  key: index,
+  className: "breadcrumbs_item"
+}, index === items.length - 1 ? /*#__PURE__*/React__default.createElement("p", {
+  "aria-current": "page"
+}, item.label) : /*#__PURE__*/React__default.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__default.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__default.createElement(React__default.Fragment, null, iconLeft && iconLeft, children, iconRight && iconRight);
+  }
+  return /*#__PURE__*/React__default.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__default.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__default.createElement(Color, {
+    fill: transparent ? null : fill
+  }, /*#__PURE__*/React__default.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__default.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__default.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__default.createElement("div", _extends({
+    className: classnames(['card_header', className])
+  }, props), actions && /*#__PURE__*/React__default.createElement("div", {
+    className: "card_headerActions"
+  }, actions), label ? /*#__PURE__*/React__default.createElement(Text, {
+    className: classnames('card_label')
+  }, label) : null, /*#__PURE__*/React__default.createElement(Text, {
+    className: classnames('card_title')
+  }, title), subtitle ? /*#__PURE__*/React__default.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__default.createElement("div", _extends({
+    className: classnames(['card_media', {
+      'card_media-fullWidth': fullWidth
+    }, className])
+  }, props), /*#__PURE__*/React__default.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__default.createElement("div", {
+    className: classnames(['checkbox', {
+      'checkbox-disabled': disabled
+    }, className])
+  }, /*#__PURE__*/React__default.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__default.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__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement(LabelTag, _extends({
+    className: 'input_label'
+  }, !isLegend && {
+    htmlFor
+  }), label), hint && /*#__PURE__*/React__default.createElement("p", {
+    id: htmlFor + '-hint',
+    className: 'input_hint'
+  }, hint), error && /*#__PURE__*/React__default.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__default.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__default.createElement(InputLabel, {
+    isLegend: true,
+    label: label,
+    hint: hint,
+    error: error
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(['input_control', 'radios', {
+      [`radios-${direction}`]: direction
+    }])
+  }, React__default.Children.map(children, child => /*#__PURE__*/React__default.isValidElement(child) ? /*#__PURE__*/React__default.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__default.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__default.createElement(CalendarBlank, null) || type === 'time' && /*#__PURE__*/React__default.createElement(Clock, null) || type === 'number' && /*#__PURE__*/React__default.createElement(CaretUpDown, null);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(['input', {
+      'js-error': error,
+      'input-disabled': disabled,
+      'input-optional': optional,
+      'input-withIcon': icon
+    }, className]),
+    onChange: onChange
+  }, /*#__PURE__*/React__default.createElement(InputLabel, {
+    htmlFor: id,
+    label: label,
+    hint: hint,
+    error: error
+  }), customIcon && /*#__PURE__*/React__default.createElement("div", {
+    className: 'input_icon'
+  }, customIcon), /*#__PURE__*/React__default.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$1 = ({
+  component = 'a',
+  icon,
+  color,
+  isExternal,
+  href,
+  className,
+  children,
+  ...props
+}) => {
+  const Component = component || 'a';
+  return /*#__PURE__*/React__default.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__default.createElement("span", {
+    className: 'link_icon'
+  }, icon), isExternal && /*#__PURE__*/React__default.createElement("span", {
+    className: 'link_icon'
+  }, /*#__PURE__*/React__default.createElement(ArrowSquareOut, null)));
+};
+Link$1.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__default.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__default.createElement(Text, _extends({
+    className: classnames(['list_item', {
+      'list_item-bold': bold
+    }, className])
+  }, props), icon ? /*#__PURE__*/React__default.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__default.createElement("nav", _extends({
+    className: classnames(['nav', {
+      [`nav-${direction}`]: direction,
+      'nav-dense': dense
+    }, className])
+  }, props), /*#__PURE__*/React__default.createElement("div", {
+    className: "nav_container"
+  }, children));
+};
+Nav.propTypes = {
+  direction: PropTypes.oneOf(['portrait', 'landscape']),
+  dense: PropTypes.bool,
+  className: PropTypes.node,
+  children: PropTypes.node.isRequired
+};
+
+var dist = {};
+
+var hasRequiredDist;
+function requireDist() {
+  if (hasRequiredDist) return dist;
+  hasRequiredDist = 1;
+  Object.defineProperty(dist, "__esModule", {
+    value: true
+  });
+  dist.parse = parse;
+  dist.serialize = serialize;
+  /**
+   * RegExp to match cookie-name in RFC 6265 sec 4.1.1
+   * This refers out to the obsoleted definition of token in RFC 2616 sec 2.2
+   * which has been replaced by the token definition in RFC 7230 appendix B.
+   *
+   * cookie-name       = token
+   * token             = 1*tchar
+   * tchar             = "!" / "#" / "$" / "%" / "&" / "'" /
+   *                     "*" / "+" / "-" / "." / "^" / "_" /
+   *                     "`" / "|" / "~" / DIGIT / ALPHA
+   *
+   * Note: Allowing more characters - https://github.com/jshttp/cookie/issues/191
+   * Allow same range as cookie value, except `=`, which delimits end of name.
+   */
+  const cookieNameRegExp = /^[\u0021-\u003A\u003C\u003E-\u007E]+$/;
+  /**
+   * RegExp to match cookie-value in RFC 6265 sec 4.1.1
+   *
+   * cookie-value      = *cookie-octet / ( DQUOTE *cookie-octet DQUOTE )
+   * cookie-octet      = %x21 / %x23-2B / %x2D-3A / %x3C-5B / %x5D-7E
+   *                     ; US-ASCII characters excluding CTLs,
+   *                     ; whitespace DQUOTE, comma, semicolon,
+   *                     ; and backslash
+   *
+   * Allowing more characters: https://github.com/jshttp/cookie/issues/191
+   * Comma, backslash, and DQUOTE are not part of the parsing algorithm.
+   */
+  const cookieValueRegExp = /^[\u0021-\u003A\u003C-\u007E]*$/;
+  /**
+   * RegExp to match domain-value in RFC 6265 sec 4.1.1
+   *
+   * domain-value      = <subdomain>
+   *                     ; defined in [RFC1034], Section 3.5, as
+   *                     ; enhanced by [RFC1123], Section 2.1
+   * <subdomain>       = <label> | <subdomain> "." <label>
+   * <label>           = <let-dig> [ [ <ldh-str> ] <let-dig> ]
+   *                     Labels must be 63 characters or less.
+   *                     'let-dig' not 'letter' in the first char, per RFC1123
+   * <ldh-str>         = <let-dig-hyp> | <let-dig-hyp> <ldh-str>
+   * <let-dig-hyp>     = <let-dig> | "-"
+   * <let-dig>         = <letter> | <digit>
+   * <letter>          = any one of the 52 alphabetic characters A through Z in
+   *                     upper case and a through z in lower case
+   * <digit>           = any one of the ten digits 0 through 9
+   *
+   * Keep support for leading dot: https://github.com/jshttp/cookie/issues/173
+   *
+   * > (Note that a leading %x2E ("."), if present, is ignored even though that
+   * character is not permitted, but a trailing %x2E ("."), if present, will
+   * cause the user agent to ignore the attribute.)
+   */
+  const domainValueRegExp = /^([.]?[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)([.][a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)*$/i;
+  /**
+   * RegExp to match path-value in RFC 6265 sec 4.1.1
+   *
+   * path-value        = <any CHAR except CTLs or ";">
+   * CHAR              = %x01-7F
+   *                     ; defined in RFC 5234 appendix B.1
+   */
+  const pathValueRegExp = /^[\u0020-\u003A\u003D-\u007E]*$/;
+  const __toString = Object.prototype.toString;
+  const NullObject = /* @__PURE__ */(() => {
+    const C = function () {};
+    C.prototype = Object.create(null);
+    return C;
+  })();
+  /**
+   * Parse a cookie header.
+   *
+   * Parse the given cookie header string into an object
+   * The object has the various cookies as keys(names) => values
+   */
+  function parse(str, options) {
+    const obj = new NullObject();
+    const len = str.length;
+    // RFC 6265 sec 4.1.1, RFC 2616 2.2 defines a cookie name consists of one char minimum, plus '='.
+    if (len < 2) return obj;
+    const dec = options?.decode || decode;
+    let index = 0;
+    do {
+      const eqIdx = str.indexOf("=", index);
+      if (eqIdx === -1) break; // No more cookie pairs.
+      const colonIdx = str.indexOf(";", index);
+      const endIdx = colonIdx === -1 ? len : colonIdx;
+      if (eqIdx > endIdx) {
+        // backtrack on prior semicolon
+        index = str.lastIndexOf(";", eqIdx - 1) + 1;
+        continue;
+      }
+      const keyStartIdx = startIndex(str, index, eqIdx);
+      const keyEndIdx = endIndex(str, eqIdx, keyStartIdx);
+      const key = str.slice(keyStartIdx, keyEndIdx);
+      // only assign once
+      if (obj[key] === undefined) {
+        let valStartIdx = startIndex(str, eqIdx + 1, endIdx);
+        let valEndIdx = endIndex(str, endIdx, valStartIdx);
+        const value = dec(str.slice(valStartIdx, valEndIdx));
+        obj[key] = value;
+      }
+      index = endIdx + 1;
+    } while (index < len);
+    return obj;
+  }
+  function startIndex(str, index, max) {
+    do {
+      const code = str.charCodeAt(index);
+      if (code !== 0x20 /*   */ && code !== 0x09 /* \t */) return index;
+    } while (++index < max);
+    return max;
+  }
+  function endIndex(str, index, min) {
+    while (index > min) {
+      const code = str.charCodeAt(--index);
+      if (code !== 0x20 /*   */ && code !== 0x09 /* \t */) return index + 1;
+    }
+    return min;
+  }
+  /**
+   * Serialize data into a cookie header.
+   *
+   * Serialize a name value pair into a cookie string suitable for
+   * http headers. An optional options object specifies cookie parameters.
+   *
+   * serialize('foo', 'bar', { httpOnly: true })
+   *   => "foo=bar; httpOnly"
+   */
+  function serialize(name, val, options) {
+    const enc = options?.encode || encodeURIComponent;
+    if (!cookieNameRegExp.test(name)) {
+      throw new TypeError(`argument name is invalid: ${name}`);
+    }
+    const value = enc(val);
+    if (!cookieValueRegExp.test(value)) {
+      throw new TypeError(`argument val is invalid: ${val}`);
+    }
+    let str = name + "=" + value;
+    if (!options) return str;
+    if (options.maxAge !== undefined) {
+      if (!Number.isInteger(options.maxAge)) {
+        throw new TypeError(`option maxAge is invalid: ${options.maxAge}`);
+      }
+      str += "; Max-Age=" + options.maxAge;
+    }
+    if (options.domain) {
+      if (!domainValueRegExp.test(options.domain)) {
+        throw new TypeError(`option domain is invalid: ${options.domain}`);
+      }
+      str += "; Domain=" + options.domain;
+    }
+    if (options.path) {
+      if (!pathValueRegExp.test(options.path)) {
+        throw new TypeError(`option path is invalid: ${options.path}`);
+      }
+      str += "; Path=" + options.path;
+    }
+    if (options.expires) {
+      if (!isDate(options.expires) || !Number.isFinite(options.expires.valueOf())) {
+        throw new TypeError(`option expires is invalid: ${options.expires}`);
+      }
+      str += "; Expires=" + options.expires.toUTCString();
+    }
+    if (options.httpOnly) {
+      str += "; HttpOnly";
+    }
+    if (options.secure) {
+      str += "; Secure";
+    }
+    if (options.partitioned) {
+      str += "; Partitioned";
+    }
+    if (options.priority) {
+      const priority = typeof options.priority === "string" ? options.priority.toLowerCase() : undefined;
+      switch (priority) {
+        case "low":
+          str += "; Priority=Low";
+          break;
+        case "medium":
+          str += "; Priority=Medium";
+          break;
+        case "high":
+          str += "; Priority=High";
+          break;
+        default:
+          throw new TypeError(`option priority is invalid: ${options.priority}`);
+      }
+    }
+    if (options.sameSite) {
+      const sameSite = typeof options.sameSite === "string" ? options.sameSite.toLowerCase() : options.sameSite;
+      switch (sameSite) {
+        case true:
+        case "strict":
+          str += "; SameSite=Strict";
+          break;
+        case "lax":
+          str += "; SameSite=Lax";
+          break;
+        case "none":
+          str += "; SameSite=None";
+          break;
+        default:
+          throw new TypeError(`option sameSite is invalid: ${options.sameSite}`);
+      }
+    }
+    return str;
+  }
+  /**
+   * URL-decode string value. Optimized to skip native call when no %.
+   */
+  function decode(str) {
+    if (str.indexOf("%") === -1) return str;
+    try {
+      return decodeURIComponent(str);
+    } catch (e) {
+      return str;
+    }
+  }
+  /**
+   * Determine if value is a Date.
+   */
+  function isDate(val) {
+    return __toString.call(val) === "[object Date]";
+  }
+  return dist;
+}
+
+requireDist();
+
+/**
+ * react-router v7.3.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+function invariant(value, message) {
+  if (value === false || value === null || typeof value === "undefined") {
+    throw new Error(message);
+  }
+}
+function warning(cond, message) {
+  if (!cond) {
+    if (typeof console !== "undefined") console.warn(message);
+    try {
+      throw new Error(message);
+    } catch (e) {
+    }
+  }
+}
+function createPath({
+  pathname = "/",
+  search = "",
+  hash = ""
+}) {
+  if (search && search !== "?")
+    pathname += search.charAt(0) === "?" ? search : "?" + search;
+  if (hash && hash !== "#")
+    pathname += hash.charAt(0) === "#" ? hash : "#" + hash;
+  return pathname;
+}
+function parsePath(path) {
+  let parsedPath = {};
+  if (path) {
+    let hashIndex = path.indexOf("#");
+    if (hashIndex >= 0) {
+      parsedPath.hash = path.substring(hashIndex);
+      path = path.substring(0, hashIndex);
+    }
+    let searchIndex = path.indexOf("?");
+    if (searchIndex >= 0) {
+      parsedPath.search = path.substring(searchIndex);
+      path = path.substring(0, searchIndex);
+    }
+    if (path) {
+      parsedPath.pathname = path;
+    }
+  }
+  return parsedPath;
+}
+function matchRoutes(routes, locationArg, basename = "/") {
+  return matchRoutesImpl(routes, locationArg, basename, false);
+}
+function matchRoutesImpl(routes, locationArg, basename, allowPartial) {
+  let location = typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
+  let pathname = stripBasename(location.pathname || "/", basename);
+  if (pathname == null) {
+    return null;
+  }
+  let branches = flattenRoutes(routes);
+  rankRouteBranches(branches);
+  let matches = null;
+  for (let i = 0; matches == null && i < branches.length; ++i) {
+    let decoded = decodePath(pathname);
+    matches = matchRouteBranch(
+      branches[i],
+      decoded,
+      allowPartial
+    );
+  }
+  return matches;
+}
+function flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = "") {
+  let flattenRoute = (route, index, relativePath) => {
+    let meta = {
+      relativePath: relativePath === void 0 ? route.path || "" : relativePath,
+      caseSensitive: route.caseSensitive === true,
+      childrenIndex: index,
+      route
+    };
+    if (meta.relativePath.startsWith("/")) {
+      invariant(
+        meta.relativePath.startsWith(parentPath),
+        `Absolute route path "${meta.relativePath}" nested under path "${parentPath}" is not valid. An absolute child route path must start with the combined path of all its parent routes.`
+      );
+      meta.relativePath = meta.relativePath.slice(parentPath.length);
+    }
+    let path = joinPaths([parentPath, meta.relativePath]);
+    let routesMeta = parentsMeta.concat(meta);
+    if (route.children && route.children.length > 0) {
+      invariant(
+        // Our types know better, but runtime JS may not!
+        // @ts-expect-error
+        route.index !== true,
+        `Index routes must not have child routes. Please remove all child routes from route path "${path}".`
+      );
+      flattenRoutes(route.children, branches, routesMeta, path);
+    }
+    if (route.path == null && !route.index) {
+      return;
+    }
+    branches.push({
+      path,
+      score: computeScore(path, route.index),
+      routesMeta
+    });
+  };
+  routes.forEach((route, index) => {
+    if (route.path === "" || !route.path?.includes("?")) {
+      flattenRoute(route, index);
+    } else {
+      for (let exploded of explodeOptionalSegments(route.path)) {
+        flattenRoute(route, index, exploded);
+      }
+    }
+  });
+  return branches;
+}
+function explodeOptionalSegments(path) {
+  let segments = path.split("/");
+  if (segments.length === 0) return [];
+  let [first, ...rest] = segments;
+  let isOptional = first.endsWith("?");
+  let required = first.replace(/\?$/, "");
+  if (rest.length === 0) {
+    return isOptional ? [required, ""] : [required];
+  }
+  let restExploded = explodeOptionalSegments(rest.join("/"));
+  let result = [];
+  result.push(
+    ...restExploded.map(
+      (subpath) => subpath === "" ? required : [required, subpath].join("/")
+    )
+  );
+  if (isOptional) {
+    result.push(...restExploded);
+  }
+  return result.map(
+    (exploded) => path.startsWith("/") && exploded === "" ? "/" : exploded
+  );
+}
+function rankRouteBranches(branches) {
+  branches.sort(
+    (a, b) => a.score !== b.score ? b.score - a.score : compareIndexes(
+      a.routesMeta.map((meta) => meta.childrenIndex),
+      b.routesMeta.map((meta) => meta.childrenIndex)
+    )
+  );
+}
+var paramRe = /^:[\w-]+$/;
+var dynamicSegmentValue = 3;
+var indexRouteValue = 2;
+var emptySegmentValue = 1;
+var staticSegmentValue = 10;
+var splatPenalty = -2;
+var isSplat = (s) => s === "*";
+function computeScore(path, index) {
+  let segments = path.split("/");
+  let initialScore = segments.length;
+  if (segments.some(isSplat)) {
+    initialScore += splatPenalty;
+  }
+  if (index) {
+    initialScore += indexRouteValue;
+  }
+  return segments.filter((s) => !isSplat(s)).reduce(
+    (score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue),
+    initialScore
+  );
+}
+function compareIndexes(a, b) {
+  let siblings = a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]);
+  return siblings ? (
+    // If two routes are siblings, we should try to match the earlier sibling
+    // first. This allows people to have fine-grained control over the matching
+    // behavior by simply putting routes with identical paths in the order they
+    // want them tried.
+    a[a.length - 1] - b[b.length - 1]
+  ) : (
+    // Otherwise, it doesn't really make sense to rank non-siblings by index,
+    // so they sort equally.
+    0
+  );
+}
+function matchRouteBranch(branch, pathname, allowPartial = false) {
+  let { routesMeta } = branch;
+  let matchedParams = {};
+  let matchedPathname = "/";
+  let matches = [];
+  for (let i = 0; i < routesMeta.length; ++i) {
+    let meta = routesMeta[i];
+    let end = i === routesMeta.length - 1;
+    let remainingPathname = matchedPathname === "/" ? pathname : pathname.slice(matchedPathname.length) || "/";
+    let match = matchPath(
+      { path: meta.relativePath, caseSensitive: meta.caseSensitive, end },
+      remainingPathname
+    );
+    let route = meta.route;
+    if (!match && end && allowPartial && !routesMeta[routesMeta.length - 1].route.index) {
+      match = matchPath(
+        {
+          path: meta.relativePath,
+          caseSensitive: meta.caseSensitive,
+          end: false
+        },
+        remainingPathname
+      );
+    }
+    if (!match) {
+      return null;
+    }
+    Object.assign(matchedParams, match.params);
+    matches.push({
+      // TODO: Can this as be avoided?
+      params: matchedParams,
+      pathname: joinPaths([matchedPathname, match.pathname]),
+      pathnameBase: normalizePathname(
+        joinPaths([matchedPathname, match.pathnameBase])
+      ),
+      route
+    });
+    if (match.pathnameBase !== "/") {
+      matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
+    }
+  }
+  return matches;
+}
+function matchPath(pattern, pathname) {
+  if (typeof pattern === "string") {
+    pattern = { path: pattern, caseSensitive: false, end: true };
+  }
+  let [matcher, compiledParams] = compilePath(
+    pattern.path,
+    pattern.caseSensitive,
+    pattern.end
+  );
+  let match = pathname.match(matcher);
+  if (!match) return null;
+  let matchedPathname = match[0];
+  let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
+  let captureGroups = match.slice(1);
+  let params = compiledParams.reduce(
+    (memo2, { paramName, isOptional }, index) => {
+      if (paramName === "*") {
+        let splatValue = captureGroups[index] || "";
+        pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
+      }
+      const value = captureGroups[index];
+      if (isOptional && !value) {
+        memo2[paramName] = void 0;
+      } else {
+        memo2[paramName] = (value || "").replace(/%2F/g, "/");
+      }
+      return memo2;
+    },
+    {}
+  );
+  return {
+    params,
+    pathname: matchedPathname,
+    pathnameBase,
+    pattern
+  };
+}
+function compilePath(path, caseSensitive = false, end = true) {
+  warning(
+    path === "*" || !path.endsWith("*") || path.endsWith("/*"),
+    `Route path "${path}" will be treated as if it were "${path.replace(/\*$/, "/*")}" because the \`*\` character must always follow a \`/\` in the pattern. To get rid of this warning, please change the route path to "${path.replace(/\*$/, "/*")}".`
+  );
+  let params = [];
+  let regexpSource = "^" + path.replace(/\/*\*?$/, "").replace(/^\/*/, "/").replace(/[\\.*+^${}|()[\]]/g, "\\$&").replace(
+    /\/:([\w-]+)(\?)?/g,
+    (_, paramName, isOptional) => {
+      params.push({ paramName, isOptional: isOptional != null });
+      return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
+    }
+  );
+  if (path.endsWith("*")) {
+    params.push({ paramName: "*" });
+    regexpSource += path === "*" || path === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$";
+  } else if (end) {
+    regexpSource += "\\/*$";
+  } else if (path !== "" && path !== "/") {
+    regexpSource += "(?:(?=\\/|$))";
+  } else ;
+  let matcher = new RegExp(regexpSource, caseSensitive ? void 0 : "i");
+  return [matcher, params];
+}
+function decodePath(value) {
+  try {
+    return value.split("/").map((v) => decodeURIComponent(v).replace(/\//g, "%2F")).join("/");
+  } catch (error) {
+    warning(
+      false,
+      `The URL path "${value}" could not be decoded because it is a malformed URL segment. This is probably due to a bad percent encoding (${error}).`
+    );
+    return value;
+  }
+}
+function stripBasename(pathname, basename) {
+  if (basename === "/") return pathname;
+  if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
+    return null;
+  }
+  let startIndex = basename.endsWith("/") ? basename.length - 1 : basename.length;
+  let nextChar = pathname.charAt(startIndex);
+  if (nextChar && nextChar !== "/") {
+    return null;
+  }
+  return pathname.slice(startIndex) || "/";
+}
+function resolvePath(to, fromPathname = "/") {
+  let {
+    pathname: toPathname,
+    search = "",
+    hash = ""
+  } = typeof to === "string" ? parsePath(to) : to;
+  let pathname = toPathname ? toPathname.startsWith("/") ? toPathname : resolvePathname(toPathname, fromPathname) : fromPathname;
+  return {
+    pathname,
+    search: normalizeSearch(search),
+    hash: normalizeHash(hash)
+  };
+}
+function resolvePathname(relativePath, fromPathname) {
+  let segments = fromPathname.replace(/\/+$/, "").split("/");
+  let relativeSegments = relativePath.split("/");
+  relativeSegments.forEach((segment) => {
+    if (segment === "..") {
+      if (segments.length > 1) segments.pop();
+    } else if (segment !== ".") {
+      segments.push(segment);
+    }
+  });
+  return segments.length > 1 ? segments.join("/") : "/";
+}
+function getInvalidPathError(char, field, dest, path) {
+  return `Cannot include a '${char}' character in a manually specified \`to.${field}\` field [${JSON.stringify(
+    path
+  )}].  Please separate it out to the \`to.${dest}\` field. Alternatively you may provide the full path as a string in <Link to="..."> and the router will parse it for you.`;
+}
+function getPathContributingMatches(matches) {
+  return matches.filter(
+    (match, index) => index === 0 || match.route.path && match.route.path.length > 0
+  );
+}
+function getResolveToMatches(matches) {
+  let pathMatches = getPathContributingMatches(matches);
+  return pathMatches.map(
+    (match, idx) => idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase
+  );
+}
+function resolveTo(toArg, routePathnames, locationPathname, isPathRelative = false) {
+  let to;
+  if (typeof toArg === "string") {
+    to = parsePath(toArg);
+  } else {
+    to = { ...toArg };
+    invariant(
+      !to.pathname || !to.pathname.includes("?"),
+      getInvalidPathError("?", "pathname", "search", to)
+    );
+    invariant(
+      !to.pathname || !to.pathname.includes("#"),
+      getInvalidPathError("#", "pathname", "hash", to)
+    );
+    invariant(
+      !to.search || !to.search.includes("#"),
+      getInvalidPathError("#", "search", "hash", to)
+    );
+  }
+  let isEmptyPath = toArg === "" || to.pathname === "";
+  let toPathname = isEmptyPath ? "/" : to.pathname;
+  let from;
+  if (toPathname == null) {
+    from = locationPathname;
+  } else {
+    let routePathnameIndex = routePathnames.length - 1;
+    if (!isPathRelative && toPathname.startsWith("..")) {
+      let toSegments = toPathname.split("/");
+      while (toSegments[0] === "..") {
+        toSegments.shift();
+        routePathnameIndex -= 1;
+      }
+      to.pathname = toSegments.join("/");
+    }
+    from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
+  }
+  let path = resolvePath(to, from);
+  let hasExplicitTrailingSlash = toPathname && toPathname !== "/" && toPathname.endsWith("/");
+  let hasCurrentTrailingSlash = (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
+  if (!path.pathname.endsWith("/") && (hasExplicitTrailingSlash || hasCurrentTrailingSlash)) {
+    path.pathname += "/";
+  }
+  return path;
+}
+var joinPaths = (paths) => paths.join("/").replace(/\/\/+/g, "/");
+var normalizePathname = (pathname) => pathname.replace(/\/+$/, "").replace(/^\/*/, "/");
+var normalizeSearch = (search) => !search || search === "?" ? "" : search.startsWith("?") ? search : "?" + search;
+var normalizeHash = (hash) => !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
+function isRouteErrorResponse(error) {
+  return error != null && typeof error.status === "number" && typeof error.statusText === "string" && typeof error.internal === "boolean" && "data" in error;
+}
+
+// lib/router/router.ts
+var validMutationMethodsArr = [
+  "POST",
+  "PUT",
+  "PATCH",
+  "DELETE"
+];
+new Set(
+  validMutationMethodsArr
+);
+var validRequestMethodsArr = [
+  "GET",
+  ...validMutationMethodsArr
+];
+new Set(validRequestMethodsArr);
+var DataRouterContext = React.createContext(null);
+DataRouterContext.displayName = "DataRouter";
+var DataRouterStateContext = React.createContext(null);
+DataRouterStateContext.displayName = "DataRouterState";
+var ViewTransitionContext = React.createContext({
+  isTransitioning: false
+});
+ViewTransitionContext.displayName = "ViewTransition";
+var FetchersContext = React.createContext(
+  /* @__PURE__ */ new Map()
+);
+FetchersContext.displayName = "Fetchers";
+var AwaitContext = React.createContext(null);
+AwaitContext.displayName = "Await";
+var NavigationContext = React.createContext(
+  null
+);
+NavigationContext.displayName = "Navigation";
+var LocationContext = React.createContext(
+  null
+);
+LocationContext.displayName = "Location";
+var RouteContext = React.createContext({
+  outlet: null,
+  matches: [],
+  isDataRoute: false
+});
+RouteContext.displayName = "Route";
+var RouteErrorContext = React.createContext(null);
+RouteErrorContext.displayName = "RouteError";
+function useHref(to, { relative } = {}) {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useHref() may be used only in the context of a <Router> component.`
+  );
+  let { basename, navigator: navigator2 } = React.useContext(NavigationContext);
+  let { hash, pathname, search } = useResolvedPath(to, { relative });
+  let joinedPathname = pathname;
+  if (basename !== "/") {
+    joinedPathname = pathname === "/" ? basename : joinPaths([basename, pathname]);
+  }
+  return navigator2.createHref({ pathname: joinedPathname, search, hash });
+}
+function useInRouterContext() {
+  return React.useContext(LocationContext) != null;
+}
+function useLocation() {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useLocation() may be used only in the context of a <Router> component.`
+  );
+  return React.useContext(LocationContext).location;
+}
+var navigateEffectWarning = `You should call navigate() in a React.useEffect(), not when your component is first rendered.`;
+function useIsomorphicLayoutEffect(cb) {
+  let isStatic = React.useContext(NavigationContext).static;
+  if (!isStatic) {
+    React.useLayoutEffect(cb);
+  }
+}
+function useNavigate() {
+  let { isDataRoute } = React.useContext(RouteContext);
+  return isDataRoute ? useNavigateStable() : useNavigateUnstable();
+}
+function useNavigateUnstable() {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useNavigate() may be used only in the context of a <Router> component.`
+  );
+  let dataRouterContext = React.useContext(DataRouterContext);
+  let { basename, navigator: navigator2 } = React.useContext(NavigationContext);
+  let { matches } = React.useContext(RouteContext);
+  let { pathname: locationPathname } = useLocation();
+  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
+  let activeRef = React.useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    activeRef.current = true;
+  });
+  let navigate = React.useCallback(
+    (to, options = {}) => {
+      warning(activeRef.current, navigateEffectWarning);
+      if (!activeRef.current) return;
+      if (typeof to === "number") {
+        navigator2.go(to);
+        return;
+      }
+      let path = resolveTo(
+        to,
+        JSON.parse(routePathnamesJson),
+        locationPathname,
+        options.relative === "path"
+      );
+      if (dataRouterContext == null && basename !== "/") {
+        path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
+      }
+      (!!options.replace ? navigator2.replace : navigator2.push)(
+        path,
+        options.state,
+        options
+      );
+    },
+    [
+      basename,
+      navigator2,
+      routePathnamesJson,
+      locationPathname,
+      dataRouterContext
+    ]
+  );
+  return navigate;
+}
+React.createContext(null);
+function useResolvedPath(to, { relative } = {}) {
+  let { matches } = React.useContext(RouteContext);
+  let { pathname: locationPathname } = useLocation();
+  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
+  return React.useMemo(
+    () => resolveTo(
+      to,
+      JSON.parse(routePathnamesJson),
+      locationPathname,
+      relative === "path"
+    ),
+    [to, routePathnamesJson, locationPathname, relative]
+  );
+}
+function useRoutesImpl(routes, locationArg, dataRouterState, future) {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useRoutes() may be used only in the context of a <Router> component.`
+  );
+  let { navigator: navigator2, static: isStatic } = React.useContext(NavigationContext);
+  let { matches: parentMatches } = React.useContext(RouteContext);
+  let routeMatch = parentMatches[parentMatches.length - 1];
+  let parentParams = routeMatch ? routeMatch.params : {};
+  let parentPathname = routeMatch ? routeMatch.pathname : "/";
+  let parentPathnameBase = routeMatch ? routeMatch.pathnameBase : "/";
+  let parentRoute = routeMatch && routeMatch.route;
+  {
+    let parentPath = parentRoute && parentRoute.path || "";
+    warningOnce(
+      parentPathname,
+      !parentRoute || parentPath.endsWith("*") || parentPath.endsWith("*?"),
+      `You rendered descendant <Routes> (or called \`useRoutes()\`) at "${parentPathname}" (under <Route path="${parentPath}">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
+
+Please change the parent <Route path="${parentPath}"> to <Route path="${parentPath === "/" ? "*" : `${parentPath}/*`}">.`
+    );
+  }
+  let locationFromContext = useLocation();
+  let location;
+  {
+    location = locationFromContext;
+  }
+  let pathname = location.pathname || "/";
+  let remainingPathname = pathname;
+  if (parentPathnameBase !== "/") {
+    let parentSegments = parentPathnameBase.replace(/^\//, "").split("/");
+    let segments = pathname.replace(/^\//, "").split("/");
+    remainingPathname = "/" + segments.slice(parentSegments.length).join("/");
+  }
+  let matches = !isStatic && dataRouterState && dataRouterState.matches && dataRouterState.matches.length > 0 ? dataRouterState.matches : matchRoutes(routes, { pathname: remainingPathname });
+  {
+    warning(
+      parentRoute || matches != null,
+      `No routes matched location "${location.pathname}${location.search}${location.hash}" `
+    );
+    warning(
+      matches == null || matches[matches.length - 1].route.element !== void 0 || matches[matches.length - 1].route.Component !== void 0 || matches[matches.length - 1].route.lazy !== void 0,
+      `Matched leaf route at location "${location.pathname}${location.search}${location.hash}" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`
+    );
+  }
+  let renderedMatches = _renderMatches(
+    matches && matches.map(
+      (match) => Object.assign({}, match, {
+        params: Object.assign({}, parentParams, match.params),
+        pathname: joinPaths([
+          parentPathnameBase,
+          // Re-encode pathnames that were decoded inside matchRoutes
+          navigator2.encodeLocation ? navigator2.encodeLocation(match.pathname).pathname : match.pathname
+        ]),
+        pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : joinPaths([
+          parentPathnameBase,
+          // Re-encode pathnames that were decoded inside matchRoutes
+          navigator2.encodeLocation ? navigator2.encodeLocation(match.pathnameBase).pathname : match.pathnameBase
+        ])
+      })
+    ),
+    parentMatches,
+    dataRouterState,
+    future
+  );
+  return renderedMatches;
+}
+function DefaultErrorComponent() {
+  let error = useRouteError();
+  let message = isRouteErrorResponse(error) ? `${error.status} ${error.statusText}` : error instanceof Error ? error.message : JSON.stringify(error);
+  let stack = error instanceof Error ? error.stack : null;
+  let lightgrey = "rgba(200,200,200, 0.5)";
+  let preStyles = { padding: "0.5rem", backgroundColor: lightgrey };
+  let codeStyles = { padding: "2px 4px", backgroundColor: lightgrey };
+  let devInfo = null;
+  {
+    console.error(
+      "Error handled by React Router default ErrorBoundary:",
+      error
+    );
+    devInfo = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "\u{1F4BF} Hey developer \u{1F44B}"), /* @__PURE__ */ React.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own ", /* @__PURE__ */ React.createElement("code", { style: codeStyles }, "ErrorBoundary"), " or", " ", /* @__PURE__ */ React.createElement("code", { style: codeStyles }, "errorElement"), " prop on your route."));
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h2", null, "Unexpected Application Error!"), /* @__PURE__ */ React.createElement("h3", { style: { fontStyle: "italic" } }, message), stack ? /* @__PURE__ */ React.createElement("pre", { style: preStyles }, stack) : null, devInfo);
+}
+var defaultErrorElement = /* @__PURE__ */ React.createElement(DefaultErrorComponent, null);
+var RenderErrorBoundary = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      location: props.location,
+      revalidation: props.revalidation,
+      error: props.error
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (state.location !== props.location || state.revalidation !== "idle" && props.revalidation === "idle") {
+      return {
+        error: props.error,
+        location: props.location,
+        revalidation: props.revalidation
+      };
+    }
+    return {
+      error: props.error !== void 0 ? props.error : state.error,
+      location: state.location,
+      revalidation: props.revalidation || state.revalidation
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(
+      "React Router caught the following error during render",
+      error,
+      errorInfo
+    );
+  }
+  render() {
+    return this.state.error !== void 0 ? /* @__PURE__ */ React.createElement(RouteContext.Provider, { value: this.props.routeContext }, /* @__PURE__ */ React.createElement(
+      RouteErrorContext.Provider,
+      {
+        value: this.state.error,
+        children: this.props.component
+      }
+    )) : this.props.children;
+  }
+};
+function RenderedRoute({ routeContext, match, children }) {
+  let dataRouterContext = React.useContext(DataRouterContext);
+  if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && (match.route.errorElement || match.route.ErrorBoundary)) {
+    dataRouterContext.staticContext._deepestRenderedBoundaryId = match.route.id;
+  }
+  return /* @__PURE__ */ React.createElement(RouteContext.Provider, { value: routeContext }, children);
+}
+function _renderMatches(matches, parentMatches = [], dataRouterState = null, future = null) {
+  if (matches == null) {
+    if (!dataRouterState) {
+      return null;
+    }
+    if (dataRouterState.errors) {
+      matches = dataRouterState.matches;
+    } else if (parentMatches.length === 0 && !dataRouterState.initialized && dataRouterState.matches.length > 0) {
+      matches = dataRouterState.matches;
+    } else {
+      return null;
+    }
+  }
+  let renderedMatches = matches;
+  let errors = dataRouterState?.errors;
+  if (errors != null) {
+    let errorIndex = renderedMatches.findIndex(
+      (m) => m.route.id && errors?.[m.route.id] !== void 0
+    );
+    invariant(
+      errorIndex >= 0,
+      `Could not find a matching route for errors on route IDs: ${Object.keys(
+        errors
+      ).join(",")}`
+    );
+    renderedMatches = renderedMatches.slice(
+      0,
+      Math.min(renderedMatches.length, errorIndex + 1)
+    );
+  }
+  let renderFallback = false;
+  let fallbackIndex = -1;
+  if (dataRouterState) {
+    for (let i = 0; i < renderedMatches.length; i++) {
+      let match = renderedMatches[i];
+      if (match.route.HydrateFallback || match.route.hydrateFallbackElement) {
+        fallbackIndex = i;
+      }
+      if (match.route.id) {
+        let { loaderData, errors: errors2 } = dataRouterState;
+        let needsToRunLoader = match.route.loader && !loaderData.hasOwnProperty(match.route.id) && (!errors2 || errors2[match.route.id] === void 0);
+        if (match.route.lazy || needsToRunLoader) {
+          renderFallback = true;
+          if (fallbackIndex >= 0) {
+            renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);
+          } else {
+            renderedMatches = [renderedMatches[0]];
+          }
+          break;
+        }
+      }
+    }
+  }
+  return renderedMatches.reduceRight((outlet, match, index) => {
+    let error;
+    let shouldRenderHydrateFallback = false;
+    let errorElement = null;
+    let hydrateFallbackElement = null;
+    if (dataRouterState) {
+      error = errors && match.route.id ? errors[match.route.id] : void 0;
+      errorElement = match.route.errorElement || defaultErrorElement;
+      if (renderFallback) {
+        if (fallbackIndex < 0 && index === 0) {
+          warningOnce(
+            "route-fallback",
+            false,
+            "No `HydrateFallback` element provided to render during initial hydration"
+          );
+          shouldRenderHydrateFallback = true;
+          hydrateFallbackElement = null;
+        } else if (fallbackIndex === index) {
+          shouldRenderHydrateFallback = true;
+          hydrateFallbackElement = match.route.hydrateFallbackElement || null;
+        }
+      }
+    }
+    let matches2 = parentMatches.concat(renderedMatches.slice(0, index + 1));
+    let getChildren = () => {
+      let children;
+      if (error) {
+        children = errorElement;
+      } else if (shouldRenderHydrateFallback) {
+        children = hydrateFallbackElement;
+      } else if (match.route.Component) {
+        children = /* @__PURE__ */ React.createElement(match.route.Component, null);
+      } else if (match.route.element) {
+        children = match.route.element;
+      } else {
+        children = outlet;
+      }
+      return /* @__PURE__ */ React.createElement(
+        RenderedRoute,
+        {
+          match,
+          routeContext: {
+            outlet,
+            matches: matches2,
+            isDataRoute: dataRouterState != null
+          },
+          children
+        }
+      );
+    };
+    return dataRouterState && (match.route.ErrorBoundary || match.route.errorElement || index === 0) ? /* @__PURE__ */ React.createElement(
+      RenderErrorBoundary,
+      {
+        location: dataRouterState.location,
+        revalidation: dataRouterState.revalidation,
+        component: errorElement,
+        error,
+        children: getChildren(),
+        routeContext: { outlet: null, matches: matches2, isDataRoute: true }
+      }
+    ) : getChildren();
+  }, null);
+}
+function getDataRouterConsoleError(hookName) {
+  return `${hookName} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
+}
+function useDataRouterContext(hookName) {
+  let ctx = React.useContext(DataRouterContext);
+  invariant(ctx, getDataRouterConsoleError(hookName));
+  return ctx;
+}
+function useDataRouterState(hookName) {
+  let state = React.useContext(DataRouterStateContext);
+  invariant(state, getDataRouterConsoleError(hookName));
+  return state;
+}
+function useRouteContext(hookName) {
+  let route = React.useContext(RouteContext);
+  invariant(route, getDataRouterConsoleError(hookName));
+  return route;
+}
+function useCurrentRouteId(hookName) {
+  let route = useRouteContext(hookName);
+  let thisRoute = route.matches[route.matches.length - 1];
+  invariant(
+    thisRoute.route.id,
+    `${hookName} can only be used on routes that contain a unique "id"`
+  );
+  return thisRoute.route.id;
+}
+function useRouteId() {
+  return useCurrentRouteId("useRouteId" /* UseRouteId */);
+}
+function useRouteError() {
+  let error = React.useContext(RouteErrorContext);
+  let state = useDataRouterState("useRouteError" /* UseRouteError */);
+  let routeId = useCurrentRouteId("useRouteError" /* UseRouteError */);
+  if (error !== void 0) {
+    return error;
+  }
+  return state.errors?.[routeId];
+}
+function useNavigateStable() {
+  let { router } = useDataRouterContext("useNavigate" /* UseNavigateStable */);
+  let id = useCurrentRouteId("useNavigate" /* UseNavigateStable */);
+  let activeRef = React.useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    activeRef.current = true;
+  });
+  let navigate = React.useCallback(
+    async (to, options = {}) => {
+      warning(activeRef.current, navigateEffectWarning);
+      if (!activeRef.current) return;
+      if (typeof to === "number") {
+        router.navigate(to);
+      } else {
+        await router.navigate(to, { fromRouteId: id, ...options });
+      }
+    },
+    [router, id]
+  );
+  return navigate;
+}
+var alreadyWarned = {};
+function warningOnce(key, cond, message) {
+  if (!cond && !alreadyWarned[key]) {
+    alreadyWarned[key] = true;
+    warning(false, message);
+  }
+}
+React.memo(DataRoutes);
+function DataRoutes({
+  routes,
+  future,
+  state
+}) {
+  return useRoutesImpl(routes, void 0, state, future);
+}
+
+// lib/dom/dom.ts
+var defaultMethod = "get";
+var defaultEncType = "application/x-www-form-urlencoded";
+function isHtmlElement(object) {
+  return object != null && typeof object.tagName === "string";
+}
+function isButtonElement(object) {
+  return isHtmlElement(object) && object.tagName.toLowerCase() === "button";
+}
+function isFormElement(object) {
+  return isHtmlElement(object) && object.tagName.toLowerCase() === "form";
+}
+function isInputElement(object) {
+  return isHtmlElement(object) && object.tagName.toLowerCase() === "input";
+}
+function isModifiedEvent(event) {
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+function shouldProcessLinkClick(event, target) {
+  return event.button === 0 && // Ignore everything but left clicks
+  (!target || target === "_self") && // Let browser handle "target=_blank" etc.
+  !isModifiedEvent(event);
+}
+var _formDataSupportsSubmitter = null;
+function isFormDataSubmitterSupported() {
+  if (_formDataSupportsSubmitter === null) {
+    try {
+      new FormData(
+        document.createElement("form"),
+        // @ts-expect-error if FormData supports the submitter parameter, this will throw
+        0
+      );
+      _formDataSupportsSubmitter = false;
+    } catch (e) {
+      _formDataSupportsSubmitter = true;
+    }
+  }
+  return _formDataSupportsSubmitter;
+}
+var supportedFormEncTypes = /* @__PURE__ */ new Set([
+  "application/x-www-form-urlencoded",
+  "multipart/form-data",
+  "text/plain"
+]);
+function getFormEncType(encType) {
+  if (encType != null && !supportedFormEncTypes.has(encType)) {
+    warning(
+      false,
+      `"${encType}" is not a valid \`encType\` for \`<Form>\`/\`<fetcher.Form>\` and will default to "${defaultEncType}"`
+    );
+    return null;
+  }
+  return encType;
+}
+function getFormSubmissionInfo(target, basename) {
+  let method;
+  let action;
+  let encType;
+  let formData;
+  let body;
+  if (isFormElement(target)) {
+    let attr = target.getAttribute("action");
+    action = attr ? stripBasename(attr, basename) : null;
+    method = target.getAttribute("method") || defaultMethod;
+    encType = getFormEncType(target.getAttribute("enctype")) || defaultEncType;
+    formData = new FormData(target);
+  } else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
+    let form = target.form;
+    if (form == null) {
+      throw new Error(
+        `Cannot submit a <button> or <input type="submit"> without a <form>`
+      );
+    }
+    let attr = target.getAttribute("formaction") || form.getAttribute("action");
+    action = attr ? stripBasename(attr, basename) : null;
+    method = target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
+    encType = getFormEncType(target.getAttribute("formenctype")) || getFormEncType(form.getAttribute("enctype")) || defaultEncType;
+    formData = new FormData(form, target);
+    if (!isFormDataSubmitterSupported()) {
+      let { name, type, value } = target;
+      if (type === "image") {
+        let prefix = name ? `${name}.` : "";
+        formData.append(`${prefix}x`, "0");
+        formData.append(`${prefix}y`, "0");
+      } else if (name) {
+        formData.append(name, value);
+      }
+    }
+  } else if (isHtmlElement(target)) {
+    throw new Error(
+      `Cannot submit element that is not <form>, <button>, or <input type="submit|image">`
+    );
+  } else {
+    method = defaultMethod;
+    action = null;
+    encType = defaultEncType;
+    body = target;
+  }
+  if (formData && encType === "text/plain") {
+    body = formData;
+    formData = void 0;
+  }
+  return { action, method: method.toLowerCase(), encType, formData, body };
+}
+
+// lib/dom/ssr/invariant.ts
+function invariant2(value, message) {
+  if (value === false || value === null || typeof value === "undefined") {
+    throw new Error(message);
+  }
+}
+
+// lib/dom/ssr/routeModules.ts
+async function loadRouteModule(route, routeModulesCache) {
+  if (route.id in routeModulesCache) {
+    return routeModulesCache[route.id];
+  }
+  try {
+    let routeModule = await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      route.module
+    );
+    routeModulesCache[route.id] = routeModule;
+    return routeModule;
+  } catch (error) {
+    console.error(
+      `Error loading route module \`${route.module}\`, reloading page...`
+    );
+    console.error(error);
+    if (window.__reactRouterContext && window.__reactRouterContext.isSpaMode && // @ts-expect-error
+    import.meta.hot) {
+      throw error;
+    }
+    window.location.reload();
+    return new Promise(() => {
+    });
+  }
+}
+function isHtmlLinkDescriptor(object) {
+  if (object == null) {
+    return false;
+  }
+  if (object.href == null) {
+    return object.rel === "preload" && typeof object.imageSrcSet === "string" && typeof object.imageSizes === "string";
+  }
+  return typeof object.rel === "string" && typeof object.href === "string";
+}
+async function getKeyedPrefetchLinks(matches, manifest, routeModules) {
+  let links = await Promise.all(
+    matches.map(async (match) => {
+      let route = manifest.routes[match.route.id];
+      if (route) {
+        let mod = await loadRouteModule(route, routeModules);
+        return mod.links ? mod.links() : [];
+      }
+      return [];
+    })
+  );
+  return dedupeLinkDescriptors(
+    links.flat(1).filter(isHtmlLinkDescriptor).filter((link) => link.rel === "stylesheet" || link.rel === "preload").map(
+      (link) => link.rel === "stylesheet" ? { ...link, rel: "prefetch", as: "style" } : { ...link, rel: "prefetch" }
+    )
+  );
+}
+function getNewMatchesForLinks(page, nextMatches, currentMatches, manifest, location, mode) {
+  let isNew = (match, index) => {
+    if (!currentMatches[index]) return true;
+    return match.route.id !== currentMatches[index].route.id;
+  };
+  let matchPathChanged = (match, index) => {
+    return (
+      // param change, /users/123 -> /users/456
+      currentMatches[index].pathname !== match.pathname || // splat param changed, which is not present in match.path
+      // e.g. /files/images/avatar.jpg -> files/finances.xls
+      currentMatches[index].route.path?.endsWith("*") && currentMatches[index].params["*"] !== match.params["*"]
+    );
+  };
+  if (mode === "assets") {
+    return nextMatches.filter(
+      (match, index) => isNew(match, index) || matchPathChanged(match, index)
+    );
+  }
+  if (mode === "data") {
+    return nextMatches.filter((match, index) => {
+      let manifestRoute = manifest.routes[match.route.id];
+      if (!manifestRoute || !manifestRoute.hasLoader) {
+        return false;
+      }
+      if (isNew(match, index) || matchPathChanged(match, index)) {
+        return true;
+      }
+      if (match.route.shouldRevalidate) {
+        let routeChoice = match.route.shouldRevalidate({
+          currentUrl: new URL(
+            location.pathname + location.search + location.hash,
+            window.origin
+          ),
+          currentParams: currentMatches[0]?.params || {},
+          nextUrl: new URL(page, window.origin),
+          nextParams: match.params,
+          defaultShouldRevalidate: true
+        });
+        if (typeof routeChoice === "boolean") {
+          return routeChoice;
+        }
+      }
+      return true;
+    });
+  }
+  return [];
+}
+function getModuleLinkHrefs(matches, manifest, { includeHydrateFallback } = {}) {
+  return dedupeHrefs(
+    matches.map((match) => {
+      let route = manifest.routes[match.route.id];
+      if (!route) return [];
+      let hrefs = [route.module];
+      if (route.clientActionModule) {
+        hrefs = hrefs.concat(route.clientActionModule);
+      }
+      if (route.clientLoaderModule) {
+        hrefs = hrefs.concat(route.clientLoaderModule);
+      }
+      if (includeHydrateFallback && route.hydrateFallbackModule) {
+        hrefs = hrefs.concat(route.hydrateFallbackModule);
+      }
+      if (route.imports) {
+        hrefs = hrefs.concat(route.imports);
+      }
+      return hrefs;
+    }).flat(1)
+  );
+}
+function dedupeHrefs(hrefs) {
+  return [...new Set(hrefs)];
+}
+function sortKeys(obj) {
+  let sorted = {};
+  let keys = Object.keys(obj).sort();
+  for (let key of keys) {
+    sorted[key] = obj[key];
+  }
+  return sorted;
+}
+function dedupeLinkDescriptors(descriptors, preloads) {
+  let set = /* @__PURE__ */ new Set();
+  new Set(preloads);
+  return descriptors.reduce((deduped, descriptor) => {
+    let key = JSON.stringify(sortKeys(descriptor));
+    if (!set.has(key)) {
+      set.add(key);
+      deduped.push({ key, link: descriptor });
+    }
+    return deduped;
+  }, []);
+}
+function singleFetchUrl(reqUrl, basename) {
+  let url = typeof reqUrl === "string" ? new URL(
+    reqUrl,
+    // This can be called during the SSR flow via PrefetchPageLinksImpl so
+    // don't assume window is available
+    typeof window === "undefined" ? "server://singlefetch/" : window.location.origin
+  ) : reqUrl;
+  if (url.pathname === "/") {
+    url.pathname = "_root.data";
+  } else if (basename && stripBasename(url.pathname, basename) === "/") {
+    url.pathname = `${basename.replace(/\/$/, "")}/_root.data`;
+  } else {
+    url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
+  }
+  return url;
+}
+
+// lib/dom/ssr/components.tsx
+function useDataRouterContext2() {
+  let context = React.useContext(DataRouterContext);
+  invariant2(
+    context,
+    "You must render this element inside a <DataRouterContext.Provider> element"
+  );
+  return context;
+}
+function useDataRouterStateContext() {
+  let context = React.useContext(DataRouterStateContext);
+  invariant2(
+    context,
+    "You must render this element inside a <DataRouterStateContext.Provider> element"
+  );
+  return context;
+}
+var FrameworkContext = React.createContext(void 0);
+FrameworkContext.displayName = "FrameworkContext";
+function useFrameworkContext() {
+  let context = React.useContext(FrameworkContext);
+  invariant2(
+    context,
+    "You must render this element inside a <HydratedRouter> element"
+  );
+  return context;
+}
+function usePrefetchBehavior(prefetch, theirElementProps) {
+  let frameworkContext = React.useContext(FrameworkContext);
+  let [maybePrefetch, setMaybePrefetch] = React.useState(false);
+  let [shouldPrefetch, setShouldPrefetch] = React.useState(false);
+  let { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } = theirElementProps;
+  let ref = React.useRef(null);
+  React.useEffect(() => {
+    if (prefetch === "render") {
+      setShouldPrefetch(true);
+    }
+    if (prefetch === "viewport") {
+      let callback = (entries) => {
+        entries.forEach((entry) => {
+          setShouldPrefetch(entry.isIntersecting);
+        });
+      };
+      let observer = new IntersectionObserver(callback, { threshold: 0.5 });
+      if (ref.current) observer.observe(ref.current);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [prefetch]);
+  React.useEffect(() => {
+    if (maybePrefetch) {
+      let id = setTimeout(() => {
+        setShouldPrefetch(true);
+      }, 100);
+      return () => {
+        clearTimeout(id);
+      };
+    }
+  }, [maybePrefetch]);
+  let setIntent = () => {
+    setMaybePrefetch(true);
+  };
+  let cancelIntent = () => {
+    setMaybePrefetch(false);
+    setShouldPrefetch(false);
+  };
+  if (!frameworkContext) {
+    return [false, ref, {}];
+  }
+  if (prefetch !== "intent") {
+    return [shouldPrefetch, ref, {}];
+  }
+  return [
+    shouldPrefetch,
+    ref,
+    {
+      onFocus: composeEventHandlers(onFocus, setIntent),
+      onBlur: composeEventHandlers(onBlur, cancelIntent),
+      onMouseEnter: composeEventHandlers(onMouseEnter, setIntent),
+      onMouseLeave: composeEventHandlers(onMouseLeave, cancelIntent),
+      onTouchStart: composeEventHandlers(onTouchStart, setIntent)
+    }
+  ];
+}
+function composeEventHandlers(theirHandler, ourHandler) {
+  return (event) => {
+    theirHandler && theirHandler(event);
+    if (!event.defaultPrevented) {
+      ourHandler(event);
+    }
+  };
+}
+function PrefetchPageLinks({
+  page,
+  ...dataLinkProps
+}) {
+  let { router } = useDataRouterContext2();
+  let matches = React.useMemo(
+    () => matchRoutes(router.routes, page, router.basename),
+    [router.routes, page, router.basename]
+  );
+  if (!matches) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(PrefetchPageLinksImpl, { page, matches, ...dataLinkProps });
+}
+function useKeyedPrefetchLinks(matches) {
+  let { manifest, routeModules } = useFrameworkContext();
+  let [keyedPrefetchLinks, setKeyedPrefetchLinks] = React.useState([]);
+  React.useEffect(() => {
+    let interrupted = false;
+    void getKeyedPrefetchLinks(matches, manifest, routeModules).then(
+      (links) => {
+        if (!interrupted) {
+          setKeyedPrefetchLinks(links);
+        }
+      }
+    );
+    return () => {
+      interrupted = true;
+    };
+  }, [matches, manifest, routeModules]);
+  return keyedPrefetchLinks;
+}
+function PrefetchPageLinksImpl({
+  page,
+  matches: nextMatches,
+  ...linkProps
+}) {
+  let location = useLocation();
+  let { manifest, routeModules } = useFrameworkContext();
+  let { basename } = useDataRouterContext2();
+  let { loaderData, matches } = useDataRouterStateContext();
+  let newMatchesForData = React.useMemo(
+    () => getNewMatchesForLinks(
+      page,
+      nextMatches,
+      matches,
+      manifest,
+      location,
+      "data"
+    ),
+    [page, nextMatches, matches, manifest, location]
+  );
+  let newMatchesForAssets = React.useMemo(
+    () => getNewMatchesForLinks(
+      page,
+      nextMatches,
+      matches,
+      manifest,
+      location,
+      "assets"
+    ),
+    [page, nextMatches, matches, manifest, location]
+  );
+  let dataHrefs = React.useMemo(() => {
+    if (page === location.pathname + location.search + location.hash) {
+      return [];
+    }
+    let routesParams = /* @__PURE__ */ new Set();
+    let foundOptOutRoute = false;
+    nextMatches.forEach((m) => {
+      let manifestRoute = manifest.routes[m.route.id];
+      if (!manifestRoute || !manifestRoute.hasLoader) {
+        return;
+      }
+      if (!newMatchesForData.some((m2) => m2.route.id === m.route.id) && m.route.id in loaderData && routeModules[m.route.id]?.shouldRevalidate) {
+        foundOptOutRoute = true;
+      } else if (manifestRoute.hasClientLoader) {
+        foundOptOutRoute = true;
+      } else {
+        routesParams.add(m.route.id);
+      }
+    });
+    if (routesParams.size === 0) {
+      return [];
+    }
+    let url = singleFetchUrl(page, basename);
+    if (foundOptOutRoute && routesParams.size > 0) {
+      url.searchParams.set(
+        "_routes",
+        nextMatches.filter((m) => routesParams.has(m.route.id)).map((m) => m.route.id).join(",")
+      );
+    }
+    return [url.pathname + url.search];
+  }, [
+    basename,
+    loaderData,
+    location,
+    manifest,
+    newMatchesForData,
+    nextMatches,
+    page,
+    routeModules
+  ]);
+  let moduleHrefs = React.useMemo(
+    () => getModuleLinkHrefs(newMatchesForAssets, manifest),
+    [newMatchesForAssets, manifest]
+  );
+  let keyedPrefetchLinks = useKeyedPrefetchLinks(newMatchesForAssets);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, dataHrefs.map((href2) => /* @__PURE__ */ React.createElement("link", { key: href2, rel: "prefetch", as: "fetch", href: href2, ...linkProps })), moduleHrefs.map((href2) => /* @__PURE__ */ React.createElement("link", { key: href2, rel: "modulepreload", href: href2, ...linkProps })), keyedPrefetchLinks.map(({ key, link }) => (
+    // these don't spread `linkProps` because they are full link descriptors
+    // already with their own props
+    /* @__PURE__ */ React.createElement("link", { key, ...link })
+  )));
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
+// lib/dom/lib.tsx
+var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+try {
+  if (isBrowser) {
+    window.__reactRouterVersion = "7.3.0";
+  }
+} catch (e) {
+}
+var ABSOLUTE_URL_REGEX2 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+var Link = React.forwardRef(
+  function LinkWithRef({
+    onClick,
+    discover = "render",
+    prefetch = "none",
+    relative,
+    reloadDocument,
+    replace: replace2,
+    state,
+    target,
+    to,
+    preventScrollReset,
+    viewTransition,
+    ...rest
+  }, forwardedRef) {
+    let { basename } = React.useContext(NavigationContext);
+    let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX2.test(to);
+    let absoluteHref;
+    let isExternal = false;
+    if (typeof to === "string" && isAbsolute) {
+      absoluteHref = to;
+      if (isBrowser) {
+        try {
+          let currentUrl = new URL(window.location.href);
+          let targetUrl = to.startsWith("//") ? new URL(currentUrl.protocol + to) : new URL(to);
+          let path = stripBasename(targetUrl.pathname, basename);
+          if (targetUrl.origin === currentUrl.origin && path != null) {
+            to = path + targetUrl.search + targetUrl.hash;
+          } else {
+            isExternal = true;
+          }
+        } catch (e) {
+          warning(
+            false,
+            `<Link to="${to}"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.`
+          );
+        }
+      }
+    }
+    let href2 = useHref(to, { relative });
+    let [shouldPrefetch, prefetchRef, prefetchHandlers] = usePrefetchBehavior(
+      prefetch,
+      rest
+    );
+    let internalOnClick = useLinkClickHandler(to, {
+      replace: replace2,
+      state,
+      target,
+      preventScrollReset,
+      relative,
+      viewTransition
+    });
+    function handleClick(event) {
+      if (onClick) onClick(event);
+      if (!event.defaultPrevented) {
+        internalOnClick(event);
+      }
+    }
+    let link = (
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          ...rest,
+          ...prefetchHandlers,
+          href: absoluteHref || href2,
+          onClick: isExternal || reloadDocument ? onClick : handleClick,
+          ref: mergeRefs(forwardedRef, prefetchRef),
+          target,
+          "data-discover": !isAbsolute && discover === "render" ? "true" : void 0
+        }
+      )
+    );
+    return shouldPrefetch && !isAbsolute ? /* @__PURE__ */ React.createElement(React.Fragment, null, link, /* @__PURE__ */ React.createElement(PrefetchPageLinks, { page: href2 })) : link;
+  }
+);
+Link.displayName = "Link";
+var NavLink = React.forwardRef(
+  function NavLinkWithRef({
+    "aria-current": ariaCurrentProp = "page",
+    caseSensitive = false,
+    className: classNameProp = "",
+    end = false,
+    style: styleProp,
+    to,
+    viewTransition,
+    children,
+    ...rest
+  }, ref) {
+    let path = useResolvedPath(to, { relative: rest.relative });
+    let location = useLocation();
+    let routerState = React.useContext(DataRouterStateContext);
+    let { navigator: navigator2, basename } = React.useContext(NavigationContext);
+    let isTransitioning = routerState != null && // Conditional usage is OK here because the usage of a data router is static
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useViewTransitionState(path) && viewTransition === true;
+    let toPathname = navigator2.encodeLocation ? navigator2.encodeLocation(path).pathname : path.pathname;
+    let locationPathname = location.pathname;
+    let nextLocationPathname = routerState && routerState.navigation && routerState.navigation.location ? routerState.navigation.location.pathname : null;
+    if (!caseSensitive) {
+      locationPathname = locationPathname.toLowerCase();
+      nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
+      toPathname = toPathname.toLowerCase();
+    }
+    if (nextLocationPathname && basename) {
+      nextLocationPathname = stripBasename(nextLocationPathname, basename) || nextLocationPathname;
+    }
+    const endSlashPosition = toPathname !== "/" && toPathname.endsWith("/") ? toPathname.length - 1 : toPathname.length;
+    let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(endSlashPosition) === "/";
+    let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
+    let renderProps = {
+      isActive,
+      isPending,
+      isTransitioning
+    };
+    let ariaCurrent = isActive ? ariaCurrentProp : void 0;
+    let className;
+    if (typeof classNameProp === "function") {
+      className = classNameProp(renderProps);
+    } else {
+      className = [
+        classNameProp,
+        isActive ? "active" : null,
+        isPending ? "pending" : null,
+        isTransitioning ? "transitioning" : null
+      ].filter(Boolean).join(" ");
+    }
+    let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
+    return /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        ...rest,
+        "aria-current": ariaCurrent,
+        className,
+        ref,
+        style,
+        to,
+        viewTransition
+      },
+      typeof children === "function" ? children(renderProps) : children
+    );
+  }
+);
+NavLink.displayName = "NavLink";
+var Form = React.forwardRef(
+  ({
+    discover = "render",
+    fetcherKey,
+    navigate,
+    reloadDocument,
+    replace: replace2,
+    state,
+    method = defaultMethod,
+    action,
+    onSubmit,
+    relative,
+    preventScrollReset,
+    viewTransition,
+    ...props
+  }, forwardedRef) => {
+    let submit = useSubmit();
+    let formAction = useFormAction(action, { relative });
+    let formMethod = method.toLowerCase() === "get" ? "get" : "post";
+    let isAbsolute = typeof action === "string" && ABSOLUTE_URL_REGEX2.test(action);
+    let submitHandler = (event) => {
+      onSubmit && onSubmit(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      let submitter = event.nativeEvent.submitter;
+      let submitMethod = submitter?.getAttribute("formmethod") || method;
+      submit(submitter || event.currentTarget, {
+        fetcherKey,
+        method: submitMethod,
+        navigate,
+        replace: replace2,
+        state,
+        relative,
+        preventScrollReset,
+        viewTransition
+      });
+    };
+    return /* @__PURE__ */ React.createElement(
+      "form",
+      {
+        ref: forwardedRef,
+        method: formMethod,
+        action: formAction,
+        onSubmit: reloadDocument ? onSubmit : submitHandler,
+        ...props,
+        "data-discover": !isAbsolute && discover === "render" ? "true" : void 0
+      }
+    );
+  }
+);
+Form.displayName = "Form";
+function getDataRouterConsoleError2(hookName) {
+  return `${hookName} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
+}
+function useDataRouterContext3(hookName) {
+  let ctx = React.useContext(DataRouterContext);
+  invariant(ctx, getDataRouterConsoleError2(hookName));
+  return ctx;
+}
+function useLinkClickHandler(to, {
+  target,
+  replace: replaceProp,
+  state,
+  preventScrollReset,
+  relative,
+  viewTransition
+} = {}) {
+  let navigate = useNavigate();
+  let location = useLocation();
+  let path = useResolvedPath(to, { relative });
+  return React.useCallback(
+    (event) => {
+      if (shouldProcessLinkClick(event, target)) {
+        event.preventDefault();
+        let replace2 = replaceProp !== void 0 ? replaceProp : createPath(location) === createPath(path);
+        navigate(to, {
+          replace: replace2,
+          state,
+          preventScrollReset,
+          relative,
+          viewTransition
+        });
+      }
+    },
+    [
+      location,
+      navigate,
+      path,
+      replaceProp,
+      state,
+      target,
+      to,
+      preventScrollReset,
+      relative,
+      viewTransition
+    ]
+  );
+}
+var fetcherId = 0;
+var getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
+function useSubmit() {
+  let { router } = useDataRouterContext3("useSubmit" /* UseSubmit */);
+  let { basename } = React.useContext(NavigationContext);
+  let currentRouteId = useRouteId();
+  return React.useCallback(
+    async (target, options = {}) => {
+      let { action, method, encType, formData, body } = getFormSubmissionInfo(
+        target,
+        basename
+      );
+      if (options.navigate === false) {
+        let key = options.fetcherKey || getUniqueFetcherId();
+        await router.fetch(key, currentRouteId, options.action || action, {
+          preventScrollReset: options.preventScrollReset,
+          formData,
+          body,
+          formMethod: options.method || method,
+          formEncType: options.encType || encType,
+          flushSync: options.flushSync
+        });
+      } else {
+        await router.navigate(options.action || action, {
+          preventScrollReset: options.preventScrollReset,
+          formData,
+          body,
+          formMethod: options.method || method,
+          formEncType: options.encType || encType,
+          replace: options.replace,
+          state: options.state,
+          fromRouteId: currentRouteId,
+          flushSync: options.flushSync,
+          viewTransition: options.viewTransition
+        });
+      }
+    },
+    [router, basename, currentRouteId]
+  );
+}
+function useFormAction(action, { relative } = {}) {
+  let { basename } = React.useContext(NavigationContext);
+  let routeContext = React.useContext(RouteContext);
+  invariant(routeContext, "useFormAction must be used inside a RouteContext");
+  let [match] = routeContext.matches.slice(-1);
+  let path = { ...useResolvedPath(action ? action : ".", { relative }) };
+  let location = useLocation();
+  if (action == null) {
+    path.search = location.search;
+    let params = new URLSearchParams(path.search);
+    let indexValues = params.getAll("index");
+    let hasNakedIndexParam = indexValues.some((v) => v === "");
+    if (hasNakedIndexParam) {
+      params.delete("index");
+      indexValues.filter((v) => v).forEach((v) => params.append("index", v));
+      let qs = params.toString();
+      path.search = qs ? `?${qs}` : "";
+    }
+  }
+  if ((!action || action === ".") && match.route.index) {
+    path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
+  }
+  if (basename !== "/") {
+    path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
+  }
+  return createPath(path);
+}
+function useViewTransitionState(to, opts = {}) {
+  let vtContext = React.useContext(ViewTransitionContext);
+  invariant(
+    vtContext != null,
+    "`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?"
+  );
+  let { basename } = useDataRouterContext3(
+    "useViewTransitionState" /* useViewTransitionState */
+  );
+  let path = useResolvedPath(to, { relative: opts.relative });
+  if (!vtContext.isTransitioning) {
+    return false;
+  }
+  let currentPath = stripBasename(vtContext.currentLocation.pathname, basename) || vtContext.currentLocation.pathname;
+  let nextPath = stripBasename(vtContext.nextLocation.pathname, basename) || vtContext.nextLocation.pathname;
+  return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
+}
+
+// lib/server-runtime/crypto.ts
+new TextEncoder();
+
+const SectionHeader = ({
+  label,
+  title,
+  promoteTitle = false,
+  titleComponent,
+  subtitle,
+  actions,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames(['section_header', className])
+  }, props), label ? /*#__PURE__*/React__default.createElement(Text, {
+    className: classnames('section_label')
+  }, label) : null, /*#__PURE__*/React__default.createElement(Text, {
+    className: "section_title",
+    component: titleComponent || (promoteTitle ? 'h1' : 'h2')
+  }, title), subtitle ? /*#__PURE__*/React__default.createElement(Text, {
+    className: classnames('section_subtitle')
+  }, subtitle) : null, actions ? /*#__PURE__*/React__default.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__default.createElement("div", _extends({
+    className: classnames(['section', {
+      [`section-${align}`]: align,
+      [`section-${color}`]: color,
+      'section-landing': landing,
+      'section-header': header
+    }, className])
+  }, props), /*#__PURE__*/React__default.createElement("div", {
+    className: 'section_container'
+  }, React__default.Children.map(children, child => {
+    if (/*#__PURE__*/React__default.isValidElement(child) && child.type === SectionHeader) {
+      return /*#__PURE__*/React__default.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 = ({
+  homeLinkComponent,
+  align,
+  className,
+  children,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleNav = () => {
+    setIsOpen(!isOpen);
+    document.body.classList.toggle('js-navbar', !isOpen);
+  };
+  const HomeLinkComponent = homeLinkComponent || Link;
+  return /*#__PURE__*/React__default.createElement("header", null, /*#__PURE__*/React__default.createElement(Section, _extends({
+    className: classnames(['navbar', {
+      [`navbar-${align}`]: align,
+      'js-opened': isOpen
+    }, className])
+  }, props), /*#__PURE__*/React__default.createElement("div", {
+    className: "navbar_main"
+  }, /*#__PURE__*/React__default.createElement(HomeLinkComponent, {
+    to: "/",
+    exact: true,
+    className: "navbar_logo"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: "https://pallote.com/logos/pallote-logo.svg",
+    alt: "Logo for Pallote"
+  })), /*#__PURE__*/React__default.createElement("button", {
+    "aria-label": "Open mobile menu",
+    className: classnames('navbar_button', {
+      'js-opened': isOpen
+    }),
+    onClick: toggleNav
+  }, /*#__PURE__*/React__default.createElement("span", null))), /*#__PURE__*/React__default.createElement("nav", {
+    "aria-label": "main-nav",
+    className: classnames('navbar_nav nav', {
+      'js-opened': isOpen
+    })
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "nav_container"
+  }, children))));
+};
+NavBar.propTypes = {
+  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 || Link;
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(['nav_item', {
+      'nav_item-dropdown': dropdown,
+      'js-show': isExpanded
+    }, className])
+  }, /*#__PURE__*/React__default.createElement(Component, _extends({
+    end: end,
+    to: to,
+    className: classnames(['nav_trigger', {
+      'nav_trigger-active': active
+    }]),
+    onClick: onClick
+  }, props), icon ? /*#__PURE__*/React__default.createElement("span", {
+    className: classnames('nav_icon')
+  }, icon) : null, label), dropdown ? /*#__PURE__*/React__default.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__default.createElement("div", {
+    className: classnames(['radio', {
+      'radio-disabled': disabled
+    }, className])
+  }, /*#__PURE__*/React__default.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__default.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__default.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__default.createElement(InputLabel, {
+    isLegend: true,
+    label: label,
+    hint: hint,
+    error: error
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(['input_control', 'radios', {
+      [`radios-${direction}`]: direction
+    }])
+  }, React__default.Children.map(children, child => /*#__PURE__*/React__default.isValidElement(child) ? /*#__PURE__*/React__default.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__default.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__default.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__default.createElement(InputLabel, {
+    htmlFor: id,
+    label: label,
+    hint: hint,
+    error: error
+  }), /*#__PURE__*/React__default.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__default.createElement("div", {
+    className: classnames('snippet_wrapper')
+  }, /*#__PURE__*/React__default.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__default.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__default.createElement("div", {
+    className: classnames(['switch', {
+      'switch-disabled': disabled
+    }, className])
+  }, startLabel ? /*#__PURE__*/React__default.createElement(Text, {
+    className: classnames('switch_label'),
+    variant: "body"
+  }, startLabel) : null, /*#__PURE__*/React__default.createElement("input", _extends({
+    className: classnames('switch_input'),
+    type: "checkbox",
+    name: id,
+    id: id,
+    disabled: disabled
+  }, props)), /*#__PURE__*/React__default.createElement("label", {
+    className: classnames('switch_switch'),
+    htmlFor: id
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('switch_toggle')
+  })), endLabel ? /*#__PURE__*/React__default.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__default.createElement(TabsContext.Provider, {
+    value: {
+      activeIndex,
+      setActiveIndex
+    }
+  }, /*#__PURE__*/React__default.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__default.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__default.createElement("div", _extends({
+    className: classnames(['table_footer', className])
+  }, props), /*#__PURE__*/React__default.createElement(Select, {
+    dense: true,
+    id: "rows",
+    className: "table_rowSelect"
+  }, /*#__PURE__*/React__default.createElement("option", {
+    value: "1"
+  }, "10"), /*#__PURE__*/React__default.createElement("option", {
+    value: "2"
+  }, "25"), /*#__PURE__*/React__default.createElement("option", {
+    value: "2"
+  }, "50"), /*#__PURE__*/React__default.createElement("option", {
+    value: "2"
+  }, "100"), /*#__PURE__*/React__default.createElement("option", {
+    value: "2"
+  }, "All")), /*#__PURE__*/React__default.createElement(Buttons, {
+    className: "table_pagination"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React__default.createElement(CaretDoubleLeft, null)), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React__default.createElement(CaretLeft, null)), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    size: "sm"
+  }, "1"), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "2"), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "3"), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "\u2026"), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, "8"), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React__default.createElement(CaretRight, null)), /*#__PURE__*/React__default.createElement(Button, {
+    kind: "icon",
+    variant: "transparent",
+    size: "sm"
+  }, /*#__PURE__*/React__default.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__default.createElement(DenseContext.Provider, {
+    value: dense
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(['table', {
+      'table-striped': striped,
+      'table-hasHover': hasHover,
+      'table-dense': dense,
+      'table-border': border
+    }, className])
+  }, /*#__PURE__*/React__default.createElement("table", _extends({
+    cellPadding: 0,
+    cellSpacing: 0,
+    className: classnames('table_content')
+  }, props), children), withFooter ? /*#__PURE__*/React__default.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__default.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__default.createElement(TableCellComponentContext.Provider, {
+    value: "th"
+  }, /*#__PURE__*/React__default.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__default.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__default.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__default.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__default.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__default.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__default.createElement("div", {
+    className: classnames(['input', {
+      'js-error': error,
+      'input-disabled': disabled,
+      'input-optional': optional
+    }, className]),
+    onChange: onChange
+  }, /*#__PURE__*/React__default.createElement(InputLabel, {
+    htmlFor: id,
+    label: label,
+    hint: hint,
+    error: error
+  }), /*#__PURE__*/React__default.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$1 as 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 };