@pingux/astro 2.9.2 → 2.13.0-alpha.4

package/lib/cjs/components/ListView/ListView.stories.js

@@ -25,7 +25,9 @@ var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactStately = require("react-stately");
+var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
+var _MoreVertIcon = _interopRequireDefault(require("@pingux/mdi-react/MoreVertIcon"));
 var _addonActions = require("@storybook/addon-actions");
 var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
@@ -35,7 +37,7 @@ var _ListView = _interopRequireDefault(require("./ListView.mdx"));
 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 _context4; _forEachInstanceProperty(_context4 = ["next", "throw", "return"]).call(_context4, 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 = _Promise2); 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 _context5; 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(_context5 = this.tryEntries).call(_context5, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty2(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 _default = {
-  title: 'Experimental/ListView',
+  title: 'Components/ListView',
   component: _index.ListView,
   parameters: {
     docs: {
@@ -54,20 +56,19 @@ var _default = {
         options: _loadingStates["default"]
       }
     },
-    disabledKeys: {},
+    disabledKeys: {
+      defaultValue: ['Snake']
+    },
     items: {
       control: {
         type: 'none'
       }
     },
     onSelectionChange: {
-      control: 'none'
+      control: 'none',
+      // eslint-disable-next-line no-console
+      defaultValue: console.log
     }
-  },
-  args: {
-    disabledKeys: ['Snake'],
-    // eslint-disable-next-line no-console
-    onSelectionChange: console.log
   }
 };
 exports["default"] = _default;
@@ -542,34 +543,83 @@ var actions = {
   onFocus: (0, _addonActions.action)('onFocus'),
   onLoadMore: (0, _addonActions.action)('onLoadMore')
 };
-var Controls = function Controls() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.ListViewItemSwitchField, null), (0, _react2.jsx)(_index.ListViewItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
-    key: "enable"
-  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
-    key: "disable"
-  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
-    key: "delete"
-  }, "Delete user")));
+var ListElement = function ListElement(_ref) {
+  var item = _ref.item;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _FormSelectIcon["default"],
+    mr: "sm",
+    color: "accent.40",
+    size: "md"
+  }), (0, _react2.jsx)(_index.Text, {
+    variant: "itemTitle",
+    alignSelf: "center"
+  }, item.name)), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignSelf: "center",
+    gap: "sm"
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "create-icon"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    size: "sm"
+  })), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "actions-icon"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _MoreVertIcon["default"],
+    size: "sm"
+  }))));
 };
-var Default = function Default(_ref) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
+var Default = function Default(_ref2) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
   return (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, props, args, {
     items: items
   }), function (item) {
     return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.name
-    }, (0, _react2.jsx)(_index.ListViewItem, {
-      data: {
-        text: item.name,
-        icon: _FormSelectIcon["default"]
-      }
-    }, (0, _react2.jsx)(Controls, null)));
+      key: item.name,
+      textValue: item.name,
+      "data-id": item.key
+    }, (0, _react2.jsx)(_index.Box, {
+      isRow: true
+    }, (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      mr: "auto",
+      alignSelf: "center"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _FormSelectIcon["default"],
+      mr: "sm",
+      color: "accent.40",
+      size: "md"
+    }), (0, _react2.jsx)(_index.Text, {
+      variant: "itemTitle",
+      alignSelf: "center"
+    }, item.name)), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      alignSelf: "center",
+      gap: "sm"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create-icon"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _CreateIcon["default"],
+      size: "sm"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "actions-icon",
+      size: "sm"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _MoreVertIcon["default"],
+      size: "sm"
+    })))));
   });
 };
 exports.Default = Default;
 var InfiniteLoadingList = function InfiniteLoadingList(args) {
   var getMockData = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
+    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
       var pageNumber;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
@@ -601,11 +651,11 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
       }, _callee);
     }));
     return function getMockData(_x, _x2) {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var fetchApiData = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
+    var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
       var res, json;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) {
@@ -659,18 +709,18 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
       }, _callee2, null, [[2, 14]]);
     }));
     return function fetchApiData(_x3, _x4, _x5) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var list = (0, _reactStately.useAsyncList)({
-    load: function load(_ref4) {
+    load: function load(_ref5) {
       return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
         var signal, cursor, filterText;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
-                signal = _ref4.signal, cursor = _ref4.cursor, filterText = _ref4.filterText;
+                signal = _ref5.signal, cursor = _ref5.cursor, filterText = _ref5.filterText;
                 if (cursor) {
                   // eslint-disable-next-line
                   cursor = cursor.replace(/^http:\/\//i, "https://");
@@ -703,13 +753,11 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
     onLoadMore: list.loadMore
   }), function (item) {
     return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.name
-    }, (0, _react2.jsx)(_index.ListViewItem, {
-      data: {
-        text: item.name,
-        icon: _FormSelectIcon["default"]
-      }
-    }, (0, _react2.jsx)(Controls, null)));
+      key: item.name,
+      textValue: item.name
+    }, (0, _react2.jsx)(ListElement, {
+      item: item
+    }));
   }));
 };
 exports.InfiniteLoadingList = InfiniteLoadingList;
@@ -723,20 +771,18 @@ InfiniteLoadingList.parameters = {
     }
   }
 };
-var MultipleSelection = function MultipleSelection(_ref5) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref5), _ref5));
+var MultipleSelection = function MultipleSelection(_ref6) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref6), _ref6));
   return (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, props, args, {
     items: items,
     selectionMode: "multiple"
   }), function (item) {
     return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.name
-    }, (0, _react2.jsx)(_index.ListViewItem, {
-      data: {
-        text: item.name,
-        icon: _FormSelectIcon["default"]
-      }
-    }, (0, _react2.jsx)(Controls, null)));
+      key: item.name,
+      textValue: item.name
+    }, (0, _react2.jsx)(ListElement, {
+      item: item
+    }));
   });
 };
 exports.MultipleSelection = MultipleSelection;

package/lib/cjs/components/Loader/Loader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LoaderProps } from '../../types';
+declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLElement>>;
+export default Loader;

package/lib/cjs/components/Loader/Loader.js

@@ -12,7 +12,6 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 var _excluded = ["size"];
@@ -37,18 +36,5 @@ var Loader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "loader.dotRight"
   }));
 });
-Loader.propTypes = {
-  /**
-   * Color key from theme or string value.
-   * Default color inherits the font color.
-  */
-  color: _propTypes["default"].string,
-  /**
-   * Size as number or pixel / em / rem value.
-   * Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px.
-   * Default size inherits the font size.
-  */
-  size: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
-};
 var _default = Loader;
 exports["default"] = _default;

package/lib/cjs/components/Loader/Loader.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Loader/Loader" />
+
+# Loader
+
+The Loader component provides users information about the loading or computing processes that are occurring. 
+
+This component should be:
+- Used to show an indeterminate state.
+- Restricted to a single use per view to avoid unnecessary disruption.
+
+It should not be used: 
+- When the wait time for a process is known.
+- When trying to communicate progression in steps.
+
+The Loader component is based on the [useProgressBar](https://react-spectrum.adobe.com/react-aria/useProgressBar.html) React Aria component.
+
+### Required Components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- The **`aria-label`** attribute is used to provide an accessible name.
+- The **`aria-live`** attribute is used to announce content changes in a live region.

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

@@ -0,0 +1,53 @@
+declare const _default: {
+    dotLeft: {
+        animation: string;
+        borderRadius: string;
+        bg: string;
+        height: string;
+        width: string;
+        margin: string;
+        display: string;
+    };
+    dotCenter: {
+        animation: string;
+        borderRadius: string;
+        bg: string;
+        height: string;
+        width: string;
+        margin: string;
+        display: string;
+    };
+    dotRight: {
+        animation: string;
+        borderRadius: string;
+        bg: string;
+        height: string;
+        width: string;
+        margin: string;
+        display: string;
+    };
+    container: {
+        color: string;
+        fontSize: string;
+    };
+    withinInput: {
+        color: string;
+        fontSize: string;
+        alignItems: string;
+        marginRight: string;
+    };
+    withinListbox: {
+        color: string;
+        fontSize: string;
+        padding: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    withinListView: {
+        color: string;
+        padding: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+};
+export default _default;

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

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

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

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

package/lib/cjs/components/Menu/Menu.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Menu/Menu" />
+
+# Menu
+
+The Menu component is intended to be used as a wrapper for MenuItems. It is based on the [useMenu](https://react-spectrum.adobe.com/react-aria/useMenu.html) 
+React Aria component, and is often used in a [PopoverMenu](./?path=/story/components-popovermenu--default).
+
+Menus should:
+- Only contain the most relevant categories for a quick scan.
+- Be used to view actions and not content.
+
+Menus shouldn’t:
+- Display more than 5 items to easily interpret the scope of actions.
+- Include ellipses (…) in menu item names. An ellipsis indicates that the user action prompt opens a new window.
+
+### Required Components
+
+This component requires the Item component, which is exported within Astro, but originates from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Menu](https://www.w3.org/WAI/tutorials/menus/) accessibility guidelines. 
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Key | Functions |
+| ---- | ---- |
+| Space or Enter | Selects the menu item. |
+| Tab | Focuses the menu item and follows the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first row. |
+| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last visible row. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The **`aria-label`** attribute is used to provide an accessible name.
+- Each menu option has the default **`aria-disabled`** value as “False.” 
+- The **`aria-orientation`** attribute indicates whether the menu is horizontally or vertically oriented, or undefined.

package/lib/cjs/components/Messages/Messages.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Messages/Messages" />
+
+# Messages
+
+Use this component to display warning or alert messages, which often highlight an imminent problem or confirm a risky action. 
+
+These messages should:
+- Capture the user’s attention at the right time.
+- Clearly explain the reason for the warning or alert and the actions the user needs to take.
+- Explain what will happen if they don’t act, using the appropriate sense of urgency.
+- Be short. Limit the number of alerts to one per component.
+
+See our [Warning and alert messages writing guidelines](https://pingidentity.atlassian.net/wiki/spaces/CCC/pages/21137295/Warning+and+alert+messages) for additional information. 
+
+### Required Components
+
+This component requires the Item component, which is exported within Astro, but originates from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Key | Functions |
+| ---- | ---- |
+| Tab | Focuses the IconButton within the message and follows the page tab sequence. |
+| Space or Enter | Selects the button when it is focused. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+
+#### Screen Readers
+
+The **`aria-live`** attribute is used to announce content changes in a live region.

package/lib/cjs/components/Modal/Modal.mdx

@@ -0,0 +1,59 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Modal/Modal" />
+
+# Modal
+
+Modals (also known as modal windows, overlays, and dialogs) are large UI elements that sit on top of an application's main window.
+To return to the application's main interface, users must interact with the modal.
+
+This component must be wrapped in an OverlayProvider and the first child component should be a trigger, such as a button.
+
+If the modal is used to display an error message, it displays after users perform an action and require a response. 
+These messages should be short, meaningful, free of technical jargon, and follow status color guidelines. 
+They can also be used to educate users, but don’t try to explain complicated troubleshooting processes in error messages.
+
+Error messages should clearly explain: 
+- What happened
+- Why it happened, if that’s relevant
+- The steps users should take to resolve the issue
+
+See our [Error message writing guidelines](https://pingidentity.atlassian.net/wiki/spaces/CCC/pages/21137273/Error+messages) for additional information. 
+
+Modals should:
+- Be used for important warnings and information requests as a way to prevent or correct critical errors.
+- Be used to break down complex workflow to not overwhelm the user.
+- Have all the critical information inside it to help users make decisions.
+
+Modals should not:
+- Be nested inside or replaced by another modal.
+- Be overused as it disrupts the user’s workflow and requires a response.
+- Have content that requires scrolling. If the content length is exceedingly large or requires complex forms, use the [OverlayPanel](./?path=/docs/components-overlaypanel--default) component.
+- Be used for brief warnings and alerts, use the [Messages](./?path=/docs/components-messages--default) component instead.
+
+### Required Components
+
+This component requires the OverlayProvider and [Button](./?path=/docs/components-button--default) components. 
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Modal](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Key | Functions |
+| ---- | ---- |
+| Tab | The trigger component and the content in the modal are focusable using the Tab key.   |
+|  | When a modal opens, focus moves to an element contained in the modal, which is usually the first focusable element. If the first focusable element does not make sense, tabindex=”-1” should be added to a static element at the top of the modal, which could be the panel title. |
+| Space or Enter | Opens the modal when the trigger is focused. Once opened, the focus is locked inside the modal. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Esc | Pressing the escape key closes the modal and adds focus to the previously focused component. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The button uses the **`aria-label`** attribute to provide an accessible name.
+- The **`aria-labelledby`** attribute is supplied with label ID.
+- The **`aria-modal`** attribute allows the assistive technologies to inform users that the ability to interact with or access other content on the page requires the modal dialog to be closed.

package/lib/cjs/components/MultivaluesField/MultivaluesField.mdx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/MultivaluesField/MultivaluesField" />
+
+# MultivaluesField
+ 
+The MultivalueField component allows users to select more than one option from a list. 
+Using [useListState](https://react-spectrum.adobe.com/react-stately/useListState.html) from React Stately, it combines an input with a Listbox for a filterable dropdown list.
+
+This component should:
+- Be used when choosing multiple items from a list of options or filtering through items by typing.
+- Allow you to add and remove custom items from the list.
+
+It should not:
+- Have fewer than 4 options. If it does, use a [CheckboxField](./?path=/docs/form-checkboxfield--default) instead.
+- Be used when only 1 item can be selected. 
+- Have a long async loaded list, consider using useAsyncList like [ComboBoxField](./?path=/docs/form-comboboxfield--default) instead.
+
+### Required components
+
+This component requires the OverlayProvider and Item originating from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html). 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Focuses the field and follows the page tab sequence. |
+| Space or Enter | Opens or closes the menu when the input is focused. |
+| Arrow keys | Moves through the list popover. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+|  | To allow multiple selections, the user making a selection does not close the menu. However, clicking outside of the listbox or pressing Tab with an open popover does. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The input uses the **`aria-expanded`** attribute to show the expansion and collapse of the popover, the **`aria-invalid`** attribute set to “True” when an incorrect value or status error occurs, and the **`aria-labelledby`** attribute is used to reference the label.
+- The list box **`aria-multiselectable`** attribute is set to “True” by default. 
+- Each option uses the **`aria-selected`** attribute to indicate the state of selection, **`aria-posinset`** to give the option position in the current set of list items, and the **`aria-setsize`** attribute to define the current set of options. 
+- The **`aria-disabled`** attribute is set to “False” for each option by default.

package/lib/cjs/components/NavBar/NavBar.mdx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Navbar/Navbar" />
+
+# Navbar
+
+The NavBar component is primarily to navigate within apps.
+This component is built to have the NavBarSection component passed into it. NavBarSection is an iterative component with an array of objects passed into it.
+
+The NavBar should:
+- Be visually separate from the content.
+- Have descriptive titles describing the destination, action item or category.
+- Group navigation items into sections based on related categories.
+- Order content logically for a natural progression.
+
+### Required Components
+
+This component requires these components:
+- NavBarItem
+- NavBarItemLink
+- NavBarItemButton
+- NavBarSection
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Key | Functions |
+| ---- | ---- |
+| Tab | All of the content in the NavBar is focusable. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Toggles the component when the accordion is focused. |
+| Arrow keys | All components within the NavBar are accessible using arrow keys. |
+| Esc | Pressing the escape key when the accordion is open and focused collapses the component. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- Each Link component uses the **`aria-label`** attribute to provide an accessible name.
+- The Icon uses the **`aria-hidden`** attribute to hide its content from assistive technology.

package/lib/cjs/components/NumberField/NumberField.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/NumberField/NumberField" />
+
+# NumberField
+ 
+This component is a variation of an input field that only accepts numeric values, and can be incremented and decremented using stepper buttons. 
+It uses the [useNumberField](https://react-spectrum.adobe.com/react-aria/useNumberField.html) component from React Aria and the [useNumberFieldState](https://react-spectrum.adobe.com/react-stately/useNumberFieldState.html) component from React Stately.
+
+The NumberFields should:
+- Be used when the users may not know exact values and need to adjust it relative to its current state.
+- Set a common default value when possible for proper context. For example, travel companies put the default number of passengers to 1. The default value is easily modified by typing into the field. 
+- Use formatOptions props to include unit symbols, as appropriate.
+- Have a clear and concise label to specify what value the user should enter.
+
+This component shouldn’t be used with other digit-based values like date, telephone, and Zip code.
+
+### 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 input is focusable using the Tab key and follows the page tab sequence. |
+| Arrow keys | Can be used to increment or decrement the numbers displayed in the field. |
+| Shift + Tab | Moves focus to the previous focusable component.|
+| Stepper buttons | Pressing and holding the stepper buttons allows continuous increments or decrements. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- The input component uses the **`aria-labelledby`** attribute to reference the label.
+- The two icon buttons each use the **`aria-controls`** attribute with the input ID and the **`aria-label`** attribute to provide an accessible name.