@pingux/astro 2.9.2 → 2.13.0-alpha.4

package/lib/cjs/components/Text/Text.js

@@ -9,17 +9,16 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledSystem = require("styled-system");
 var _themeUi = require("theme-ui");
 var _variants = require("../../utils/devUtils/constants/variants");
 var _react2 = require("@emotion/react");
 var ExtendedText = /*#__PURE__*/(0, _base["default"])(_themeUi.Text, process.env.NODE_ENV === "production" ? {
-  target: "eifd86o0"
+  target: "etvnvar0"
 } : {
-  target: "eifd86o0",
+  target: "etvnvar0",
   label: "ExtendedText"
-})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRcUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvVGV4dC9UZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBmbGV4Ym94LCBsYXlvdXQsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IFRleHQgYXMgVGhlbWVVSVRleHQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IHRleHRWYXJpYW50cyB9IGZyb20gJy4uLy4uL3V0aWxzL2RldlV0aWxzL2NvbnN0YW50cy92YXJpYW50cyc7XG5cbmNvbnN0IEV4dGVuZGVkVGV4dCA9IHN0eWxlZChUaGVtZVVJVGV4dCkobGF5b3V0LCBmbGV4Ym94LCB0eXBvZ3JhcGh5KTtcblxuY29uc3QgVGV4dCA9IFJlYWN0LmZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IChcbiAgPEV4dGVuZGVkVGV4dCB2YXJpYW50PVwiYmFzZVwiIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+XG4pKTtcblxuVGV4dC5wcm9wVHlwZXMgPSB7XG4gIHZhcmlhbnQ6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuXG5cblRleHQuZGVmYXVsdFByb3BzID0ge1xuICB2YXJpYW50OiB0ZXh0VmFyaWFudHMuQkFTRSxcbn07XG5cblRleHQuZGlzcGxheU5hbWUgPSAnVGV4dCc7XG5cbmV4cG9ydCBkZWZhdWx0IFRleHQ7XG4iXX0= */");
+})(_styledSystem.layout, _styledSystem.flexbox, _styledSystem.typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXFCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZmxleGJveCwgbGF5b3V0LCB0eXBvZ3JhcGh5IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgeyBUZXh0IGFzIFRoZW1lVUlUZXh0IH0gZnJvbSAndGhlbWUtdWknO1xuXG5pbXBvcnQgeyBUZXh0UHJvcHMgfSBmcm9tICcuLi8uLi90eXBlcyc7XG5pbXBvcnQgeyB0ZXh0VmFyaWFudHMgfSBmcm9tICcuLi8uLi91dGlscy9kZXZVdGlscy9jb25zdGFudHMvdmFyaWFudHMnO1xuXG5jb25zdCBFeHRlbmRlZFRleHQgPSBzdHlsZWQoVGhlbWVVSVRleHQpKFxuICBsYXlvdXQsXG4gIGZsZXhib3gsXG4gIHR5cG9ncmFwaHksXG4pO1xuXG5jb25zdCBUZXh0ID0gUmVhY3QuZm9yd2FyZFJlZigocHJvcHM6IFRleHRQcm9wcywgcmVmOiBSZWFjdC5SZWY8SFRNTERpdkVsZW1lbnQ+KSA9PiAoXG4gIDxFeHRlbmRlZFRleHQgdmFyaWFudD1cImJhc2VcIiB7Li4ucHJvcHN9IHJlZj17cmVmfSAvPlxuKSk7XG5cblRleHQuZGVmYXVsdFByb3BzID0ge1xuICB2YXJpYW50OiB0ZXh0VmFyaWFudHMuQkFTRSxcbn07XG5cblRleHQuZGlzcGxheU5hbWUgPSAnVGV4dCc7XG5cbmV4cG9ydCBkZWZhdWx0IFRleHQ7XG4iXX0= */");
 var Text = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   return (0, _react2.jsx)(ExtendedText, (0, _extends2["default"])({
     variant: "base"
@@ -27,9 +26,6 @@ var Text = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     ref: ref
   }));
 });
-Text.propTypes = {
-  variant: _propTypes["default"].string
-};
 Text.defaultProps = {
   variant: _variants.textVariants.BASE
 };

package/lib/cjs/components/Text/Text.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Text/Text" />
+
+# Text
+
+The Text component is used to display text and supports [Typography Props from Styled System](https://styled-system.com/table/#typography) from Styled System.
+
+Text should be adjusted in terms of font weight, size and formatting to emphasize hierarchy, and shouldn’t: rely only on color to convey importance.
+
+### Required Components
+
+This component can be used independently and does not require additional components.

package/lib/cjs/components/Text/Text.stories.d.ts

@@ -0,0 +1,6 @@
+import { Story } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: Story;
+export declare const WithCustomWidth: Story;
+export declare const TypographyStyleProps: Story;

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -0,0 +1,286 @@
+export declare const base: {
+    display: string;
+    fontSize: string;
+    color: string;
+    fontFamily: string;
+    overflowWrap: string;
+};
+export declare const wordWrap: {
+    display: string;
+    overflowWrap: string;
+    maxWidth: string;
+    wordWrap: string;
+    wordBreak: string;
+};
+export declare const text: {
+    base: {
+        display: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        overflowWrap: string;
+    };
+    bodyStrong: {
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    bodyWeak: {
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    buttonLabel: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    buttonTitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        lineHeight: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    buttonSubtitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        lineHeight: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    capsLabel: {
+        color: string;
+        textTransform: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    environmentBreadcrumb: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        textTransform: string;
+        display: string;
+        fontFamily: string;
+        overflowWrap: string;
+    };
+    H1: {
+        fontWeight: number;
+        lineHeight: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    H2: {
+        fontWeight: number;
+        lineHeight: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    H3: {
+        fontWeight: number;
+        lineHeight: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    H4: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        lineHeight: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    inputValue: {
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    itemTitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    itemSubtitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    label: {
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        fontWeight: number;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    listTitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        whiteSpace: string;
+        overflow: string;
+        textOverflow: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    listSubtitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        whiteSpace: string;
+        overflow: string;
+        textOverflow: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    placeholder: {
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+    };
+    sectionTitle: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    subtitle: {
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    tabLabel: {
+        fontSize: string;
+        fontWeight: number;
+        mb: string;
+        lineHeight: string;
+        color: string;
+        height: string;
+        '.is-selected &, .is-hovered &': {
+            color: string;
+        };
+        '.is-selected &': {
+            color: string;
+            mb: number;
+        };
+        '.is-disabled &': {
+            color: string;
+        };
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+        fontFamily: string;
+    };
+    tableData: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    textEllipsis: {
+        whiteSpace: string;
+        overflow: string;
+        textOverflow: string;
+    };
+    title: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+};

package/lib/cjs/components/Text/Text.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/Text/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Text';

package/lib/cjs/components/TextAreaField/TextAreaField.mdx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/TextAreaField/TextAreaField" />
+
+# TextAreaField
+
+The TextAreaField component combines a text area, label, and helper text for a resizable field, which is suitable for long plain-text input. 
+
+This field should:
+- Be used to accommodate varying amounts of text that can span multiple lines, such as a description, message, comments, or feedback.
+- Use the maxLength prop for character limitations.
+
+This field shouldn’t:
+- Be used when the character count fits in a single line. Use the [TextField](./?path=/docs/form-textfield--default) component instead.
+- Use quiet styles, such as a blended background with only a bottom border, for fixed height. Since it is taller and wider than most components, it might be harder to interact with it without visual cues.
+
+### Required components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+
+#### Screen readers
+
+This component uses the **`aria-labelledby`** attribute pointing to the label, and the **`aria-invalid`** attribute to detect incorrect values or status errors, which is set to “False” by default.

package/lib/cjs/components/TextField/TextField.mdx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/TextField/TextField" />
+
+# TextField
+
+The component combines a text input, label, and helper text to enter, read or edit data.
+
+TextField should be used:
+- To enter no more than a single line of text.
+- To input unique information known only to the user and is difficult to predict with preset options.
+- When the data can be entered easily in a free format rather than using complex controls.
+- WithSlots props to insert extra UI elements.
+
+TextField shouldn’t be used to collect text longer than a single line. Use the [TextAreaField](./?path=/docs/form-textareafield--default) component instead.
+
+### Required components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+
+#### Screen readers
+
+This component uses the **`aria-labelledby`** attribute pointing to the label, and the **`aria-invalid`** attribute to detect incorrect values or status errors, which is set to “False” by default.

package/lib/cjs/components/TimeZonePicker/TimeZonePicker.mdx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/TimeZonePicker/TimeZonePicker" />
+
+# TimeZonePicker
+
+This component allows users to choose a timezone from a [list of timezones](https://github.com/yury-dymov/react-bootstrap-timezone-picker/blob/master/src/timezones.json). 
+It uses the [ComboBoxField](./?path=/docs/form-comboboxfield--default) component and its props. 
+
+The TimeZonePicker should be used for searching and filtering through the available timezones. Use the additonalTimeZones prop to add a new timezone.
+
+### Required components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+The component follows the same accessibility patterns as [ComboBoxField](./?path=/docs/form-comboboxfield--default).

package/lib/cjs/components/TooltipTrigger/Tooltip.styles.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.button = void 0;
+exports["default"] = exports.container = exports.button = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Badge = require("../Badge/Badge.styles");
 var _Buttons = require("../Button/Buttons.styles");
@@ -33,6 +33,7 @@ var container = {
     WebkitLineClamp: '4'
   }
 };
+exports.container = container;
 var badge = _objectSpread(_objectSpread({}, _Badge.baseBadge), {}, {
   cursor: 'default',
   '&.is-hovered, &.is-pressed': {

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js

@@ -100,6 +100,8 @@ TooltipTrigger.propTypes = {
   /** The additional offset applied along the cross axis
    * between the element and its anchor element. */
   crossOffset: _propTypes["default"].number,
+  /** Amount of time before the tooltip disappears */
+  closeDelay: _propTypes["default"].number,
   /** Amount of time before the tooltip shows */
   delay: _propTypes["default"].number,
   /** Where the popover menu opens relative to its trigger. */

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.mdx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/TooltipTrigger/TooltipTrigger" />
+
+# TooltipTrigger
+
+The TooltipTrigger is a composed component that displays additional information on hover, click or focus. 
+This component is typically used as a design fallback for contextual information that may be hard to convey otherwise. It can also be disabled without disabling button-press events.
+
+This component should provide useful, supplementary information or clarification regarding the element it points to. 
+It shouldn’t contain essential content, error or feedback messages, or action items.
+
+Tooltips cannot contain interactive content (links, buttons) according to the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).
+
+### Required Components
+
+This component requires the [Button](./?path=/docs/components-button--default) and Tooltip components.
+
+### Accessibility
+
+#### Screen Readers
+
+The trigger button uses the **`aria-describedby`** attribute with the tooltip container ID to announce the screen reader content when it becomes visible.

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.test.js

@@ -1,6 +1,17 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$create = require("@babel/runtime-corejs3/core-js-stable/object/create");
+var _Object$getPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/get-prototype-of");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$setPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/set-prototype-of");
+var _Promise = require("@babel/runtime-corejs3/core-js-stable/promise");
+var _reverseInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/reverse");
+var _sliceInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _index = require("../../index");
@@ -8,6 +19,7 @@ var _theme = _interopRequireDefault(require("../../styles/theme"));
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _react2 = require("@emotion/react");
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context2; _forEachInstanceProperty(_context2 = ["next", "throw", "return"]).call(_context2, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context3; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context3 = this.tryEntries).call(_context3, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.TooltipTrigger, props, (0, _react2.jsx)(_index.Button, props.buttonProps, "Mock Button"), (0, _react2.jsx)(_index.Tooltip, null, "Tooltip Content")));
@@ -81,4 +93,38 @@ test('passing in width applies the correct width to the container', function ()
   });
   var arrow = _testWrapper.screen.getByTestId('popover-container');
   expect(arrow).toHaveStyle('width: 100px');
-});
+});
+test('tooltip closes after closeDelay when mouse leaves trigger', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var closeDelay, button;
+  return _regeneratorRuntime().wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          closeDelay = 5000;
+          getComponent({
+            closeDelay: closeDelay
+          });
+          button = _testWrapper.screen.getByRole('button');
+          _testWrapper.fireEvent.mouseEnter(button);
+          expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+          _testWrapper.fireEvent.mouseLeave(button);
+          _context.next = 8;
+          return (0, _testWrapper.waitFor)(function () {
+            expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+          }, {
+            timeout: closeDelay / 2 + 100
+          });
+        case 8:
+          _context.next = 10;
+          return (0, _testWrapper.waitFor)(function () {
+            expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+          }, {
+            timeout: closeDelay + 100
+          });
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));

package/lib/cjs/docs/Props.stories.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Docs/Props" />
+
+## Understanding Astro Props
+
+Most of the Astro components can be customized through props which are documented in there respective component examples. If you want to pass your own custom props to an Astro component many components have wrapperProps, containerProps, and controlProps designed just for this.
+
+- **containerProps:** an object that gets spread to the outermost container commonly used for passing styles
+- **wrapperProps:** an object that gets spread to the container directly wrapping and input field
+- **controlProps:** an object that gets spread to an input field
+
+```
+const ExampleComponent = ({
+ containerProps,
+ controlProps,
+ wrapperProps,
+}) => (
+   <ContainerBox {...containerProps}>
+     <Box {...wrapperProps}>
+       <input type="text" {...controlProps} />
+     </Box>
+   </ContainerBox>
+ );
+};
+```
+
+Most of the Field/Input components have the following props, see the individual component for more details: 
+- `isDisabled`
+- `isOpen`
+- `isReadOnly`
+- `isRequired`
+- `onChange`
+- `onFocus`
+- `onFocusChange`