@carbon/ibm-products 2.0.0-rc.33 → 2.0.0-rc.35

package/es/components/NotificationsPanel/NotificationsPanel_data.js

@@ -0,0 +1,135 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { action } from '@storybook/addon-actions';
+import uuidv4 from '../../global/js/utils/uuidv4';
+var currentDate = new Date();
+var yesterdayDate = new Date();
+yesterdayDate.setDate(yesterdayDate.getDate() - 1);
+var dayBeforeYesterday = new Date();
+dayBeforeYesterday.setDate(dayBeforeYesterday.getDate() - 2);
+var msInOneMinute = 60000;
+var data = [{
+  id: uuidv4(),
+  type: 'error',
+  title: 'LogRhythm connection failure',
+  description: 'LogRhythm is failing to connect, check timeout.',
+  timestamp: currentDate,
+  unread: true,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'error',
+  title: 'LogDNA cannot be reached.',
+  description: 'Unable to communicate with LogDNA.',
+  timestamp: new Date(new Date().getTime() - 30 * 1000),
+  // 30 seconds ago
+  unread: true,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'warning',
+  title: 'System alert',
+  description: 'Email classification was exported successfully.',
+  timestamp: new Date(currentDate.getTime() - 11 * msInOneMinute),
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'success',
+  title: 'IBM Cloud Pak for Automation Success',
+  description: 'Successfully connected cartridge',
+  timestamp: new Date(currentDate.getTime() - 120 * msInOneMinute),
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'success',
+  title: 'Successfully connected LogDNA',
+  description: 'App connection succeeded',
+  timestamp: yesterdayDate,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'warning',
+  title: 'Cloud Foundry app memory',
+  description: 'Allocated app memory low',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'informational',
+  title: 'Logs are now being monitored',
+  link: {
+    text: 'View logs',
+    url: 'https://www.carbondesignsystem.com'
+  },
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}, {
+  id: uuidv4(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: action("Clicked on notification")
+}];
+export default data;

package/es/components/NotificationsPanel/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { NotificationsPanel } from './NotificationsPanel';

package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+var UnreadNotificationBell = function UnreadNotificationBell() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "18px",
+    height: "19px",
+    viewBox: "0 0 18 19",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, /*#__PURE__*/React.createElement("title", null, "Unread notification bell"), /*#__PURE__*/React.createElement("g", {
+    id: "Page-1",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group",
+    transform: "translate(-1.000000, 0.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "notification"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17.9419375,12.058125 L16.25,10.3661875 L16.25,8.125 C16.245845,4.91692673 13.816599,2.23147626 10.625,1.90675 L10.625,0.625 L9.375,0.625 L9.375,1.90675 C6.183401,2.23147626 3.754155,4.91692673 3.75,8.125 L3.75,10.3661875 L2.0580625,12.058125 C1.94086706,12.1753182 1.875,12.3342622 1.875,12.5 L1.875,14.375 C1.875,14.720178 2.15482203,15 2.5,15 L6.875,15 L6.875,15.4855 C6.84694527,17.1272367 8.05869477,18.5271305 9.6875,18.7346875 C10.5660567,18.8218694 11.4405518,18.5337871 12.0952737,17.9415019 C12.7499955,17.3492167 13.1239886,16.5078712 13.125,15.625 L13.125,15 L17.5,15 C17.845178,15 18.125,14.720178 18.125,14.375 L18.125,12.5 C18.125,12.3342622 18.0591329,12.1753182 17.9419375,12.058125 Z M11.875,15.625 C11.875,16.6605339 11.0355339,17.5 10,17.5 C8.96446609,17.5 8.125,16.6605339 8.125,15.625 L8.125,15 L11.875,15 L11.875,15.625 Z M16.875,13.75 L3.125,13.75 L3.125,12.7588125 L4.816875,11.066875 C4.93409336,10.949692 4.9999646,10.7907468 5,10.625 L5,8.125 C5,5.36357625 7.23857625,3.125 10,3.125 C12.7614237,3.125 15,5.36357625 15,8.125 L15,10.625 C15.0000354,10.7907468 15.0659066,10.949692 15.183125,11.066875 L16.875,12.7588125 L16.875,13.75 Z",
+    id: "Shape",
+    fill: "#FFFFFF",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("rect", {
+    id: "_Transparent_Rectangle_",
+    x: "0",
+    y: "0",
+    width: "20",
+    height: "20"
+  })), /*#__PURE__*/React.createElement("circle", {
+    id: "Oval",
+    stroke: "#161616",
+    fill: "#DA1E28",
+    cx: "15",
+    cy: "4.375",
+    r: "2.5"
+  }))));
+};
+export { UnreadNotificationBell };

package/es/components/NotificationsPanel/utils.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export var timeAgo = function timeAgo(_ref) {
+  var previousTime = _ref.previousTime,
+    secondsAgoText = _ref.secondsAgoText,
+    minuteAgoText = _ref.minuteAgoText,
+    minutesAgoText = _ref.minutesAgoText,
+    hoursAgoText = _ref.hoursAgoText,
+    hourAgoText = _ref.hourAgoText,
+    daysAgoText = _ref.daysAgoText,
+    yesterdayAtText = _ref.yesterdayAtText,
+    monthsAgoText = _ref.monthsAgoText,
+    monthAgoText = _ref.monthAgoText,
+    yearsAgoText = _ref.yearsAgoText,
+    yearAgoText = _ref.yearAgoText,
+    nowText = _ref.nowText;
+  var msPerMinute = 60 * 1000;
+  var msPerHour = msPerMinute * 60;
+  var msPerDay = msPerHour * 24;
+  var msPerMonth = msPerDay * 30;
+  var msPerYear = msPerDay * 365;
+  var elapsed = new Date() - previousTime;
+  switch (true) {
+    case elapsed < msPerMinute:
+      return Math.round(elapsed / 1000) > 10 ? secondsAgoText(Math.round(elapsed / 1000)) : nowText;
+    case elapsed < msPerHour:
+      return Math.round(elapsed / msPerMinute) > 1 ? minutesAgoText(Math.round(elapsed / msPerMinute)) : minuteAgoText(Math.round(elapsed / msPerMinute));
+    case elapsed < msPerDay:
+      return Math.round(elapsed / msPerHour) > 1 ? hoursAgoText(Math.round(elapsed / msPerHour)) : hourAgoText(Math.round(elapsed / msPerHour));
+    case elapsed < msPerMonth:
+      return Math.round(elapsed / msPerDay) > 1 ? daysAgoText(Math.round(elapsed / msPerDay)) : yesterdayAtText(new Date(previousTime).toLocaleTimeString(getBrowserLocales[0]));
+    case elapsed < msPerYear:
+      return Math.round(elapsed / msPerMonth) > 1 ? monthsAgoText(Math.round(elapsed / msPerMonth)) : monthAgoText(Math.round(elapsed / msPerMonth));
+    default:
+      return Math.round(elapsed / msPerYear) > 1 ? yearsAgoText(Math.round(elapsed / msPerYear)) : yearAgoText(Math.round(elapsed / msPerYear));
+  }
+};
+var getBrowserLocales = function getBrowserLocales() {
+  var browserLocales = navigator.languages === undefined ? [navigator.language, 'en'] // add fallback 'en' if we can't get locale value from browser
+  : navigator.languages;
+  return browserLocales.map(function (locale) {
+    var trimmedLocale = locale.trim();
+    return trimmedLocale;
+  });
+};

package/es/components/OptionsTile/OptionsTile.js

@@ -0,0 +1,327 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "enabled", "invalid", "invalidText", "locked", "lockedText", "onChange", "onToggle", "open", "size", "summary", "title", "titleId", "warn", "warnText"];
+/**
+ * Copyright IBM Corp. 2021, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React, { useState, useRef } from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import uuidv4 from '../../global/js/utils/uuidv4';
+import { pkg } from '../../settings';
+import { useControllableState } from '../../global/js/hooks';
+
+// Carbon and package components we use.
+import { Layer, Toggle } from '@carbon/react';
+import { ChevronDown, Locked, WarningAltFilled, WarningFilled } from '@carbon/react/icons';
+import * as carbonMotion from '@carbon/motion';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--options-tile");
+var componentName = 'OptionsTile';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values for props
+var defaults = {
+  onChange: function onChange() {},
+  size: 'xl'
+};
+
+/**
+ * TODO: A description of the component.
+ */
+export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    enabled = _ref.enabled,
+    invalid = _ref.invalid,
+    invalidText = _ref.invalidText,
+    locked = _ref.locked,
+    lockedText = _ref.lockedText,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? defaults.onChange : _ref$onChange,
+    onToggle = _ref.onToggle,
+    open = _ref.open,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    summary = _ref.summary,
+    title = _ref.title,
+    userDefinedTitleId = _ref.titleId,
+    warn = _ref.warn,
+    warnText = _ref.warnText,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(open),
+    _useState2 = _slicedToArray(_useState, 2),
+    prevIsOpen = _useState2[0],
+    setPrevIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    closing = _useState4[0],
+    setClosing = _useState4[1];
+  var _useControllableState = useControllableState({
+      value: open,
+      defaultValue: open || null,
+      onChange: function onChange(value) {
+        return _onChange(value);
+      }
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    isOpen = _useControllableState2[0],
+    setIsOpen = _useControllableState2[1];
+  var detailsRef = useRef(null);
+  var contentRef = useRef(null);
+  var id = uuidv4();
+  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== void 0 ? userDefinedTitleId : "".concat(id, "-title");
+  var isExpandable = children !== undefined;
+  var isInvalid = invalid;
+  var isWarn = !isInvalid && warn;
+  var isLocked = !isInvalid && !isWarn && locked;
+  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+    matches: true
+  };
+  if (open !== prevIsOpen) {
+    if (isOpen && !open) {
+      collapse();
+    } else if (!isOpen && open) {
+      expand();
+    }
+    setPrevIsOpen(open);
+  }
+  function expand() {
+    if (detailsRef.current && contentRef.current && !reducedMotion.matches) {
+      setIsOpen(true);
+      detailsRef.current.open = true;
+      var _getComputedStyle = getComputedStyle(contentRef.current),
+        paddingTop = _getComputedStyle.paddingTop,
+        paddingBottom = _getComputedStyle.paddingBottom,
+        height = _getComputedStyle.height;
+      contentRef.current.animate([{
+        paddingTop: 0,
+        paddingBottom: 0,
+        height: 0,
+        opacity: 0,
+        overflow: 'hidden'
+      }, {
+        paddingTop: paddingTop,
+        paddingBottom: paddingBottom,
+        height: height,
+        opacity: 1,
+        overflow: 'hidden'
+      }], {
+        duration: Number(carbonMotion.moderate01.replace('ms', '')),
+        easing: carbonMotion.easings.entrance.productive
+      });
+    } else {
+      // in case the refs are not set or the user prefers reduced motion, skip the animation
+      setIsOpen(true);
+    }
+  }
+  function collapse() {
+    if (contentRef.current && !reducedMotion.matches) {
+      setClosing(true);
+      var _getComputedStyle2 = getComputedStyle(contentRef.current),
+        paddingTop = _getComputedStyle2.paddingTop,
+        paddingBottom = _getComputedStyle2.paddingBottom,
+        height = _getComputedStyle2.height;
+      var animation = contentRef.current.animate([{
+        paddingTop: paddingTop,
+        paddingBottom: paddingBottom,
+        height: height,
+        opacity: 1
+      }, {
+        paddingTop: 0,
+        paddingBottom: 0,
+        height: 0,
+        opacity: 0
+      }], {
+        duration: Number(carbonMotion.moderate01.replace('ms', '')),
+        easing: carbonMotion.easings.entrance.productive
+      });
+      var callback = function callback() {
+        setIsOpen(false);
+        setClosing(false);
+      };
+      animation.onfinish = callback;
+      animation.oncancel = callback;
+    } else {
+      // in case the ref is not set or the user prefers reduced motion, skip the animation
+      setIsOpen(false);
+    }
+  }
+  function toggle(e) {
+    e.preventDefault();
+    if (isOpen) {
+      collapse();
+    } else {
+      expand();
+    }
+  }
+  function renderTitle() {
+    var Icon = null;
+    var text = summary;
+    var summaryClasses = ["".concat(blockClass, "__summary")];
+    if (invalid) {
+      Icon = WarningFilled;
+      text = invalidText;
+      summaryClasses.push("".concat(blockClass, "__summary--invalid"));
+    } else if (warn) {
+      Icon = WarningAltFilled;
+      text = warnText;
+      summaryClasses.push("".concat(blockClass, "__summary--warn"));
+    } else if (locked) {
+      Icon = Locked;
+      summaryClasses.push("".concat(blockClass, "__summary--locked"));
+      if (!text) {
+        text = lockedText;
+      }
+    }
+    var hasValidationState = invalid || warn || locked;
+    var summaryHidden = !hasValidationState && enabled === false;
+    if (summaryHidden) {
+      summaryClasses.push("".concat(blockClass, "__summary--hidden"));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__heading")
+    }, /*#__PURE__*/React.createElement("h6", {
+      id: titleId,
+      className: "".concat(blockClass, "__title")
+    }, title), text && /*#__PURE__*/React.createElement("span", {
+      className: cx(summaryClasses),
+      "aria-hidden": summaryHidden
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
+      size: 16
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "__summary-text")
+    }, text)));
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    className, // Apply any supplied class names to the main HTML element.
+    "".concat(blockClass, "--").concat(size), _defineProperty({}, "".concat(blockClass, "--closing"), closing)),
+    ref: ref
+  }, getDevtoolsProps(componentName)), enabled !== undefined && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__toggle-container")
+  }, /*#__PURE__*/React.createElement(Toggle, {
+    id: "".concat(id, "-toggle"),
+    className: "".concat(blockClass, "__toggle"),
+    toggled: enabled,
+    labelA: "",
+    labelB: "",
+    "aria-labelledby": titleId,
+    onToggle: onToggle,
+    size: "sm",
+    disabled: isLocked,
+    labelText: title
+  })), isExpandable ? /*#__PURE__*/React.createElement("details", {
+    open: isOpen,
+    ref: detailsRef
+  }, /*#__PURE__*/React.createElement("summary", {
+    className: "".concat(blockClass, "__header"),
+    onClick: toggle
+  }, /*#__PURE__*/React.createElement(ChevronDown, {
+    size: 16,
+    className: "".concat(blockClass, "__chevron")
+  }), renderTitle()), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__content"),
+    ref: contentRef
+  }, /*#__PURE__*/React.createElement(Layer, null, isLocked && /*#__PURE__*/React.createElement("p", {
+    className: "".concat(blockClass, "__locked-text")
+  }, /*#__PURE__*/React.createElement(Locked, {
+    size: 16
+  }), lockedText), children))) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__static-content")
+  }, renderTitle()));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+OptionsTile = pkg.checkComponentEnabled(OptionsTile, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+OptionsTile.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+OptionsTile.propTypes = {
+  /**
+   * Provide content to render as expandable OptionsTile. If no children
+   * are present, the OptionsTile will render as its variant.
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Whether the toggle is enabled or disabled. If nothing is passed,
+   * no toggle will be rendered.
+   */
+  enabled: PropTypes.bool,
+  /**
+   * Whether the OptionsTile is in invalid validation state.
+   */
+  invalid: PropTypes.bool,
+  /**
+   * Provide a text explaining why the OptionsTile is in invalid state.
+   */
+  invalidText: PropTypes.string,
+  /**
+   * Whether the OptionsTile is in locked validation state.
+   */
+  locked: PropTypes.bool,
+  /**
+   * Provide a text explaining why the OptionsTile is in locked state.
+   */
+  lockedText: PropTypes.string,
+  /**
+   * Provide a function which will be called each time the user
+   * toggles the open state of the OptionsTile.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Provide a function which will be called each time the user
+   * interacts with the toggle.
+   */
+  onToggle: PropTypes.func,
+  /**
+   * Whether the OptionsTile is in open state.
+   */
+  open: PropTypes.bool,
+  /**
+   * Define the size of the OptionsTile.
+   */
+  size: PropTypes.oneOf(['lg', 'xl']),
+  /**
+   * Optionally provide a text summarizing the current state of the content.
+   */
+  summary: PropTypes.string,
+  /**
+   * Provide the title for this OptionsTile.
+   */
+  title: PropTypes.string.isRequired,
+  /**
+   * Optionally provide an id which should be used for the title.
+   */
+  titleId: PropTypes.string,
+  /**
+   * Whether the OptionsTile is in warning validation state.
+   */
+  warn: PropTypes.bool,
+  /**
+   * Provide a text explaining why the OptionsTile is in warning state.
+   */
+  warnText: PropTypes.string
+};

package/es/components/OptionsTile/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2021, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { OptionsTile } from './OptionsTile';