braid-design-system 32.16.0 → 32.16.2

package/dist/styles/lib/components/MenuRenderer/MenuRenderer.mjs

@@ -1,310 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import assert from "assert";
-import { useContext, useRef, useReducer, useEffect, Children } from "react";
-import { flattenChildren, Overlay } from "../Accordion/AccordionItem.mjs";
-import { Box } from "../Box/Box.mjs";
-import { Divider } from "../Divider/Divider.mjs";
-import { MenuRendererContext, MenuRendererItemContext, actionTypes } from "../MenuItem/useMenuItem.mjs";
-import { getNextIndex, normalizeKey } from "../Autosuggest/Autosuggest.mjs";
-import { buildDataAttributes } from "../Accordion/Accordion.mjs";
-import { backdrop, menuIsClosed, width, placementBottom } from "./MenuRenderer.css.mjs";
-const MenuItemDivider = () => {
-  assert(
-    useContext(MenuRendererContext),
-    "MenuItemDivider must be rendered within a menu component. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItemDivider"
-  );
-  return /* @__PURE__ */ jsx(Box, { paddingY: "xxsmall", children: /* @__PURE__ */ jsx(Divider, {}) });
-};
-MenuItemDivider.__isMenuItem__ = true;
-const {
-  MENU_TRIGGER_UP,
-  MENU_ITEM_UP,
-  MENU_TRIGGER_DOWN,
-  MENU_ITEM_DOWN,
-  MENU_ITEM_ESCAPE,
-  MENU_ITEM_TAB,
-  MENU_ITEM_ENTER,
-  MENU_ITEM_SPACE,
-  MENU_ITEM_CLICK,
-  MENU_ITEM_HOVER,
-  MENU_TRIGGER_ENTER,
-  MENU_TRIGGER_SPACE,
-  MENU_TRIGGER_CLICK,
-  MENU_TRIGGER_TAB,
-  MENU_TRIGGER_ESCAPE,
-  BACKDROP_CLICK
-} = actionTypes;
-const CLOSED_INDEX = -1;
-const CLOSE_REASON_EXIT = { reason: "exit" };
-const initialState = {
-  open: false,
-  highlightIndex: CLOSED_INDEX,
-  closeReason: CLOSE_REASON_EXIT
-};
-const MenuRenderer = ({
-  onOpen,
-  onClose,
-  trigger,
-  width: width2 = "content",
-  align = "left",
-  offsetSpace = "none",
-  reserveIconSpace = false,
-  placement = "bottom",
-  children,
-  data,
-  ...restProps
-}) => {
-  const buttonRef = useRef(null);
-  const lastOpen = useRef(false);
-  const items = flattenChildren(children);
-  const itemCount = items.filter((item) => !isDivider(item)).length;
-  assert(
-    items.every(
-      (item) => typeof item === "object" && "type" in item && // @ts-expect-error
-      item.type.__isMenuItem__
-    ),
-    "All child nodes within a menu component must be a MenuItem, MenuItemLink, MenuItemCheckbox or MenuItemDivider: https://seek-oss.github.io/braid-design-system/components/MenuRenderer"
-  );
-  const [{ open, highlightIndex, closeReason }, dispatch] = useReducer(
-    (state, action) => {
-      switch (action.type) {
-        case MENU_TRIGGER_UP:
-        case MENU_ITEM_UP: {
-          return {
-            ...state,
-            open: true,
-            closeReason: CLOSE_REASON_EXIT,
-            highlightIndex: getNextIndex(-1, state.highlightIndex, itemCount)
-          };
-        }
-        case MENU_TRIGGER_DOWN:
-        case MENU_ITEM_DOWN: {
-          return {
-            ...state,
-            open: true,
-            closeReason: CLOSE_REASON_EXIT,
-            highlightIndex: getNextIndex(1, state.highlightIndex, itemCount)
-          };
-        }
-        case BACKDROP_CLICK:
-        case MENU_TRIGGER_ESCAPE:
-        case MENU_TRIGGER_TAB:
-        case MENU_ITEM_ESCAPE:
-        case MENU_ITEM_TAB: {
-          return {
-            ...state,
-            open: false,
-            closeReason: CLOSE_REASON_EXIT,
-            highlightIndex: CLOSED_INDEX
-          };
-        }
-        case MENU_ITEM_ENTER:
-        case MENU_ITEM_SPACE:
-        case MENU_ITEM_CLICK: {
-          if ("formElement" in action && action.formElement) {
-            return state;
-          }
-          return {
-            ...state,
-            open: false,
-            closeReason: {
-              reason: "selection",
-              index: action.index,
-              id: action.id
-            },
-            highlightIndex: CLOSED_INDEX
-          };
-        }
-        case MENU_ITEM_HOVER: {
-          return { ...state, highlightIndex: action.value };
-        }
-        case MENU_TRIGGER_ENTER:
-        case MENU_TRIGGER_SPACE: {
-          const nextOpen = !state.open;
-          return {
-            ...state,
-            open: nextOpen,
-            closeReason: CLOSE_REASON_EXIT,
-            highlightIndex: nextOpen ? 0 : CLOSED_INDEX
-          };
-        }
-        case MENU_TRIGGER_CLICK: {
-          const nextOpen = !state.open;
-          return {
-            ...state,
-            open: nextOpen,
-            closeReason: CLOSE_REASON_EXIT
-          };
-        }
-        default:
-          return state;
-      }
-    },
-    initialState
-  );
-  useEffect(() => {
-    if (lastOpen.current === open) {
-      return;
-    }
-    if (open && typeof onOpen === "function") {
-      onOpen();
-    } else if (!open && typeof onClose === "function") {
-      onClose(closeReason);
-    }
-    lastOpen.current = open;
-  }, [onOpen, onClose, open, closeReason]);
-  const focusTrigger = () => {
-    if (buttonRef && buttonRef.current) {
-      buttonRef.current.focus();
-    }
-  };
-  const onTriggerKeyUp = (event) => {
-    const targetKey = normalizeKey(event);
-    if (targetKey === " " && /firefox|iceweasel|fxios/i.test(navigator.userAgent)) {
-      return;
-    }
-    const action = {
-      ArrowDown: { type: MENU_TRIGGER_DOWN },
-      ArrowUp: { type: MENU_TRIGGER_UP },
-      Enter: { type: MENU_TRIGGER_ENTER },
-      " ": { type: MENU_TRIGGER_SPACE },
-      Escape: { type: MENU_TRIGGER_ESCAPE }
-    };
-    if (action[targetKey]) {
-      dispatch(action[targetKey]);
-    }
-  };
-  const onTriggerKeyDown = (event) => {
-    const targetKey = normalizeKey(event);
-    if (targetKey === "Tab") {
-      dispatch({ type: MENU_ITEM_TAB });
-    }
-    const isArrowPress = targetKey.indexOf("Arrow") === 0;
-    const isActionKeyPress = targetKey === "Enter" || targetKey === " ";
-    if (isArrowPress || isActionKeyPress) {
-      event.preventDefault();
-    }
-  };
-  const triggerProps = {
-    "aria-haspopup": true,
-    "aria-expanded": open,
-    role: "button",
-    tabIndex: 0,
-    ref: buttonRef,
-    onKeyUp: onTriggerKeyUp,
-    onKeyDown: onTriggerKeyDown,
-    onClick: (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-      dispatch({ type: MENU_TRIGGER_CLICK });
-    }
-  };
-  return /* @__PURE__ */ jsxs(Box, { ...buildDataAttributes({ data, validateRestProps: restProps }), children: [
-    /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
-      trigger(triggerProps, { open }),
-      /* @__PURE__ */ jsx(
-        Menu,
-        {
-          open,
-          align,
-          width: width2,
-          placement,
-          offsetSpace,
-          highlightIndex,
-          reserveIconSpace,
-          focusTrigger,
-          dispatch,
-          children: items
-        }
-      )
-    ] }),
-    open ? /* @__PURE__ */ jsx(
-      Box,
-      {
-        onClick: (event) => {
-          event.stopPropagation();
-          event.preventDefault();
-          dispatch({ type: BACKDROP_CLICK });
-        },
-        position: "fixed",
-        zIndex: "dropdownBackdrop",
-        top: 0,
-        left: 0,
-        className: backdrop
-      }
-    ) : null
-  ] });
-};
-const isDivider = (node) => typeof node === "object" && node !== null && "type" in node && node.type === MenuItemDivider;
-const borderRadius = "large";
-function Menu({
-  offsetSpace,
-  align,
-  width: width$1,
-  placement,
-  children,
-  open,
-  dispatch,
-  focusTrigger,
-  highlightIndex,
-  reserveIconSpace,
-  position = "absolute"
-}) {
-  let dividerCount = 0;
-  return /* @__PURE__ */ jsx(MenuRendererContext.Provider, { value: { reserveIconSpace }, children: /* @__PURE__ */ jsxs(
-    Box,
-    {
-      role: "menu",
-      position,
-      zIndex: "dropdown",
-      boxShadow: placement === "top" ? "small" : "medium",
-      borderRadius,
-      background: "surface",
-      marginTop: placement === "bottom" ? offsetSpace : void 0,
-      marginBottom: placement === "top" ? offsetSpace : void 0,
-      transition: "fast",
-      right: align === "right" ? 0 : void 0,
-      opacity: !open ? 0 : void 0,
-      overflow: "hidden",
-      className: [
-        !open && menuIsClosed,
-        width$1 !== "content" && width[width$1],
-        placement === "top" && placementBottom
-      ],
-      children: [
-        /* @__PURE__ */ jsx(Box, { paddingY: "xxsmall", children: Children.map(children, (item, i) => {
-          if (isDivider(item)) {
-            dividerCount++;
-            return item;
-          }
-          const menuItemIndex = i - dividerCount;
-          return /* @__PURE__ */ jsx(
-            MenuRendererItemContext.Provider,
-            {
-              value: {
-                isHighlighted: menuItemIndex === highlightIndex,
-                index: menuItemIndex,
-                dispatch,
-                focusTrigger
-              },
-              children: item
-            },
-            menuItemIndex
-          );
-        }) }),
-        /* @__PURE__ */ jsx(
-          Overlay,
-          {
-            boxShadow: "borderNeutralLight",
-            borderRadius,
-            visible: true
-          }
-        )
-      ]
-    }
-  ) });
-}
-export {
-  MenuItemDivider,
-  MenuRenderer
-};

package/dist/styles/lib/components/MonthPicker/MonthPicker.cjs

@@ -1,341 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const isMobile = require("is-mobile");
-const assert = require("assert");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Column_Column_cjs = require("../Column/Column.cjs");
-const styles_lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
-const styles_lib_components_Dropdown_Dropdown_cjs = require("../Dropdown/Dropdown.cjs");
-const styles_lib_components_private_Field_Field_cjs = require("../private/Field/Field.cjs");
-const styles_lib_components_Secondary_Secondary_cjs = require("../Secondary/Secondary.cjs");
-const styles_lib_components_Strong_Strong_cjs = require("../Strong/Strong.cjs");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const styles_lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
-const styles_lib_components_MonthPicker_MonthPicker_css_cjs = require("./MonthPicker.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const FieldLabel = ({
-  id,
-  htmlFor,
-  label,
-  disabled,
-  secondaryLabel,
-  tertiaryLabel,
-  description,
-  descriptionId,
-  data
-}) => {
-  if (!label && !description) {
-    return null;
-  }
-  const labelEl = /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Accordion_AccordionItem_cjs.Text, { tone: disabled ? "secondary" : void 0, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Strong_Strong_cjs.Strong, { children: label }),
-    secondaryLabel ? /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Secondary_Secondary_cjs.Secondary, { children: [
-      " (",
-      secondaryLabel,
-      ")"
-    ] }) : null
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Stack_Stack_cjs.Stack, { space: "xsmall", data, children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Box_Box_cjs.Box, { component: "span", display: "flex", justifyContent: "spaceBetween", children: [
-      htmlFor === false ? labelEl : /* @__PURE__ */ jsxRuntime.jsx("label", { id, htmlFor, children: labelEl }),
-      tertiaryLabel ? /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Accordion_AccordionItem_cjs.Text, { children: [
-        " ",
-        tertiaryLabel
-      ] }) : null
-    ] }) : null,
-    description ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { paddingTop: label ? "xxsmall" : void 0, paddingBottom: "xxsmall", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { tone: "secondary", id: descriptionId, children: description }) }) : null
-  ] });
-};
-const tones = ["neutral", "critical", "positive", "caution"];
-const icon = {
-  critical: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconCritical, { tone: "critical" }),
-  positive: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconPositive, { tone: "positive" }),
-  caution: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconCaution, { tone: "caution" })
-};
-const FieldMessage = ({
-  id,
-  tone = "neutral",
-  message,
-  secondaryMessage,
-  reserveMessageSpace = true,
-  disabled,
-  data,
-  ...restProps
-}) => {
-  if (tones.indexOf(tone) === -1) {
-    throw new Error(`Invalid tone: ${tone}`);
-  }
-  if (!message && !secondaryMessage && !reserveMessageSpace) {
-    return null;
-  }
-  const showMessage = !disabled && message;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    styles_lib_components_Box_Box_cjs.Box,
-    {
-      id,
-      display: "flex",
-      justifyContent: "flexEnd",
-      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { flexGrow: 1, userSelect: showMessage ? void 0 : "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Accordion_AccordionItem_cjs.Text,
-          {
-            size: "small",
-            tone: tone === "neutral" ? "secondary" : tone,
-            icon: showMessage && tone !== "neutral" ? icon[tone] : void 0,
-            children: showMessage ? message : " "
-          }
-        ) }),
-        secondaryMessage && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { paddingLeft: "xsmall", flexGrow: 0, children: secondaryMessage }) : null
-      ]
-    }
-  );
-};
-const mergeIds = (...ids) => {
-  const validIds = ids.filter(Boolean);
-  if (validIds.length === 0) {
-    return void 0;
-  }
-  return validIds.join(" ");
-};
-const FieldGroup = ({
-  id,
-  disabled,
-  children,
-  secondaryLabel,
-  tertiaryLabel,
-  description,
-  message,
-  reserveMessageSpace = false,
-  tone,
-  required,
-  role,
-  space = "xsmall",
-  data,
-  ...restProps
-}) => {
-  const labelId = `${id}-label`;
-  const messageId = `${id}-message`;
-  const descriptionId = description ? `${id}-description` : void 0;
-  let ariaLabelledBy;
-  let ariaLabel;
-  if ("label" in restProps && restProps.label) {
-    ariaLabelledBy = labelId;
-  } else if ("aria-labelledby" in restProps && restProps["aria-labelledby"]) {
-    ariaLabelledBy = restProps["aria-labelledby"];
-  } else if ("aria-label" in restProps && restProps["aria-label"]) {
-    ariaLabel = restProps["aria-label"];
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    styles_lib_components_Box_Box_cjs.Box,
-    {
-      component: "fieldset",
-      disabled,
-      id,
-      role,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel,
-      "aria-required": required,
-      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Stack_Stack_cjs.Stack, { space, children: [
-        "label" in restProps && restProps.label || description ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "legend", id: labelId, children: /* @__PURE__ */ jsxRuntime.jsx(
-          FieldLabel,
-          {
-            htmlFor: false,
-            label: "label" in restProps ? restProps.label : void 0,
-            secondaryLabel,
-            tertiaryLabel,
-            disabled,
-            description,
-            descriptionId
-          }
-        ) }) : null,
-        children({
-          disabled,
-          "aria-describedby": mergeIds(
-            message ? messageId : void 0,
-            descriptionId
-          )
-        }),
-        message || reserveMessageSpace ? /* @__PURE__ */ jsxRuntime.jsx(
-          FieldMessage,
-          {
-            id: messageId,
-            tone,
-            disabled,
-            message,
-            reserveMessageSpace
-          }
-        ) : null
-      ] })
-    }
-  );
-};
-const defaultMonthNames = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
-const getMonths = (monthNames) => monthNames.map((monthName, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i + 1, children: monthName }, i));
-const getYears = (min, max, ascending) => [...new Array(max - min + 1)].map((_v, i) => {
-  const yearStr = String(ascending ? i + min : max - i);
-  return /* @__PURE__ */ jsxRuntime.jsx("option", { value: yearStr, children: yearStr }, yearStr);
-});
-const currYear = (/* @__PURE__ */ new Date()).getFullYear();
-const renderNativeInput = isMobile.isMobile({ tablet: true });
-const customValueToString = ({ month, year }) => month && year ? `${year}-${month < 10 ? "0" : ""}${month}` : void 0;
-const stringToCustomValue = (value) => {
-  const [year, month] = value.split("-");
-  return {
-    month: parseInt(month, 10),
-    year: parseInt(year, 10)
-  };
-};
-const makeChangeHandler = (onChange, value, fieldType) => (event) => {
-  if (typeof onChange === "function") {
-    onChange(
-      {
-        month: {
-          year: value && value.year ? value.year : void 0,
-          month: parseInt(event.target.value, 10) || void 0
-        },
-        year: {
-          month: value && value.month ? value.month : void 0,
-          year: parseInt(event.target.value, 10) || void 0
-        },
-        native: stringToCustomValue(event.target.value)
-      }[fieldType]
-    );
-  }
-};
-const MonthPicker = ({
-  id,
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  tone,
-  disabled,
-  minYear = currYear - 100,
-  maxYear = currYear,
-  ascendingYears = false,
-  monthLabel = "Month",
-  yearLabel = "Year",
-  monthNames = defaultMonthNames,
-  ...restProps
-}) => {
-  assert__default.default(monthNames.length === 12, "monthNames array must contain 12 items");
-  const currentValue = {
-    month: value && value.month ? value.month : void 0,
-    year: value && value.year ? value.year : void 0
-  };
-  const monthRef = React.createRef();
-  const yearRef = React.createRef();
-  const monthId = `${id}-month`;
-  const yearId = `${id}-year`;
-  const blurHandler = onBlur ? (event) => {
-    const fireIfExternal = (element) => {
-      if (element !== monthRef.current && element !== yearRef.current) {
-        onBlur();
-      }
-    };
-    if (event.relatedTarget !== null) {
-      fireIfExternal(event.relatedTarget);
-    } else {
-      setTimeout(() => {
-        fireIfExternal(document.activeElement);
-      });
-    }
-  } : void 0;
-  const focusHandler = onFocus ? (event) => {
-    if (event.relatedTarget !== monthRef.current && event.relatedTarget !== yearRef.current) {
-      onFocus();
-    }
-  } : void 0;
-  const nativeField = /* @__PURE__ */ jsxRuntime.jsx(
-    styles_lib_components_private_Field_Field_cjs.Field,
-    {
-      id,
-      tone,
-      disabled,
-      value: customValueToString(currentValue),
-      ...restProps,
-      icon: void 0,
-      prefix: void 0,
-      name: void 0,
-      autoComplete: void 0,
-      secondaryMessage: null,
-      children: (overlays, { className, ...fieldProps }) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Box_Box_cjs.Box,
-          {
-            component: "input",
-            type: "month",
-            value: customValueToString(currentValue),
-            onChange: onChange && makeChangeHandler(onChange, value, "native"),
-            onBlur,
-            onFocus,
-            ...fieldProps,
-            height: "touchable",
-            className: [className, styles_lib_components_MonthPicker_MonthPicker_css_cjs.nativeInput]
-          }
-        ),
-        overlays
-      ] })
-    }
-  );
-  const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(FieldGroup, { id, tone, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Columns_Columns_cjs.Columns, { space: "small", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      styles_lib_components_Dropdown_Dropdown_cjs.Dropdown,
-      {
-        id: monthId,
-        value: currentValue.month || "",
-        onChange: makeChangeHandler(onChange, value, "month"),
-        onBlur: blurHandler,
-        onFocus: focusHandler,
-        tone,
-        placeholder: monthLabel,
-        "aria-label": monthLabel,
-        ...fieldGroupProps,
-        ref: monthRef,
-        children: getMonths(monthNames)
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      styles_lib_components_Dropdown_Dropdown_cjs.Dropdown,
-      {
-        id: yearId,
-        value: currentValue.year || "",
-        onChange: makeChangeHandler(onChange, value, "year"),
-        onBlur: blurHandler,
-        onFocus: focusHandler,
-        tone,
-        placeholder: yearLabel,
-        "aria-label": yearLabel,
-        ...fieldGroupProps,
-        ref: yearRef,
-        children: getYears(minYear, maxYear, ascendingYears)
-      }
-    ) })
-  ] }) });
-  return renderNativeInput ? nativeField : customFieldGroup;
-};
-MonthPicker.displayName = "MonthPicker";
-exports.FieldGroup = FieldGroup;
-exports.FieldLabel = FieldLabel;
-exports.FieldMessage = FieldMessage;
-exports.MonthPicker = MonthPicker;
-exports.mergeIds = mergeIds;
-exports.tones = tones;