@pingux/astro 2.99.0-alpha.0 → 2.99.0

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

@@ -140,12 +140,28 @@ export interface ExampleItemProps {
     id: string | number;
     hasSeparator?: boolean;
 }
-export declare const Default: ({ ...args }: {
-    [x: string]: any;
-}) => React.JSX.Element;
-export declare const WithExpandableItems: ({ ...args }: {
-    [x: string]: any;
-}) => React.JSX.Element;
+export declare const Default: {
+    ({ ...args }: {
+        [x: string]: any;
+    }): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const WithExpandableItems: {
+    ({ ...args }: {
+        [x: string]: any;
+    }): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
 export declare const ControlledExpandableItems: ({ ...args }: {
     [x: string]: any;
 }) => React.JSX.Element;
@@ -160,12 +176,29 @@ export declare const InfiniteLoadingList: {
                 story: string;
             };
         };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+};
+export declare const WithCharts: {
+    ({ ...args }: {
+        [x: string]: any;
+    }): React.JSX.Element;
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
     };
 };
-export declare const MultipleSelection: ({ ...args }: {
-    [x: string]: any;
-}) => React.JSX.Element;
-export declare const WithCharts: ({ ...args }: {
-    [x: string]: any;
-}) => React.JSX.Element;
 export declare const OnLoadPrev: () => React.JSX.Element;

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

@@ -21,9 +21,9 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithExpandableItems = exports.WithCharts = exports.OnLoadPrev = exports.MultipleSelection = exports.InfiniteLoadingList = exports.Default = exports.ControlledExpandableItems = void 0;
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+exports["default"] = exports.WithExpandableItems = exports.WithCharts = exports.OnLoadPrev = exports.InfiniteLoadingList = exports.Default = exports.ControlledExpandableItems = void 0;
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
 var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
@@ -35,22 +35,20 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
-var _InformationIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationIcon"));
 var _addonActions = require("@storybook/addon-actions");
 var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _2 = require("../..");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 var _chartData = require("../ListViewItem/controls/chart/chartData");
 var _ListView = _interopRequireDefault(require("./ListView.mdx"));
 var _listViewAttributes = require("./listViewAttributes");
 var _react2 = require("@emotion/react");
-var _excluded = ["string", "secondString"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $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 defineProperty(generator, "_invoke", { value: makeInvokeMethod(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 _context16; _forEachInstanceProperty(_context16 = ["next", "throw", "return"]).call(_context16, 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; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(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); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), 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, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), 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 (val) { var object = Object(val), 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 _context17; 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(_context17 = this.tryEntries).call(_context17, 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; }
@@ -91,20 +89,6 @@ var items = [{
   name: 'Snake',
   id: '3'
 }];
-var environments = [{
-  title: 'Ping'
-}, {
-  title: 'PingOne'
-}, {
-  title: 'Montana'
-}, {
-  title: 'Europe',
-  populations: ['Spain', 'Switzerland', 'Germany']
-}, {
-  title: 'Asia',
-  populations: ['Hong Kong'],
-  isLimitedAccess: true
-}];
 var animals = [{
   name: 'Aardvark'
 }, {
@@ -562,60 +546,21 @@ var actions = {
   onFocus: (0, _addonActions.action)('onFocus'),
   onLoadMore: (0, _addonActions.action)('onLoadMore')
 };
-var CustomText = function CustomText(_ref) {
-  var string = _ref.string,
-    secondString = _ref.secondString,
-    others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return (0, _react2.jsx)(_2.Text, others, string, ' ', (0, _react2.jsx)("i", null, secondString));
-};
 var ExpandableChildren = function ExpandableChildren() {
   return (0, _react2.jsx)(_2.Box, {
     sx: {
-      my: 'md'
+      my: 'lg'
     }
-  }, (0, _react2.jsx)(_2.TextField, {
-    maxWidth: "300px",
-    "aria-label": "Search Environment"
-  }), (0, _react2.jsx)(_2.Box, {
+  }, (0, _react2.jsx)(_2.SearchField, {
+    maxWidth: "400px",
+    "aria-label": "Search",
+    placeholder: "Search"
+  }), (0, _react2.jsx)(_2.Text, {
     sx: {
       mt: 'md',
-      gap: 'md'
+      fontWeight: '1'
     }
-  }, (0, _map["default"])(environments).call(environments, function (env) {
-    var _env$populations;
-    return (0, _react2.jsx)(_2.Box, {
-      key: env.title
-    }, (0, _react2.jsx)(_2.Box, {
-      isRow: true
-    }, (0, _react2.jsx)(CustomText, {
-      key: "".concat(env.title, " title"),
-      string: env.title,
-      secondString: "Environment"
-    }), env.isLimitedAccess && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_2.Badge, {
-      label: "Limited Access",
-      bg: "white",
-      textColor: "text.primary",
-      sx: {
-        ml: 'xs',
-        border: '1px solid',
-        borderColor: 'neutral.80'
-      }
-    }), (0, _react2.jsx)(_2.HelpHint, null, "Text of the popover right here..."))), (_env$populations = env.populations) === null || _env$populations === void 0 ? void 0 : (0, _map["default"])(_env$populations).call(_env$populations, function (pop) {
-      return (0, _react2.jsx)(CustomText, {
-        key: pop,
-        sx: {
-          ml: 'sm'
-        },
-        string: pop,
-        secondString: "Population"
-      });
-    }));
-  }), (0, _react2.jsx)(_2.Button, {
-    sx: {
-      alignSelf: 'start'
-    },
-    variant: "link"
-  }, "More Environments")));
+  }, "Lorem ipsum dolor sit amet consectetur. Viverra nulla nec velit sollicitudin sed nisi mi gravida. Maecenas vestibulum pretium dictum dictum tempus. Sit et rutrum hendrerit facilisi turpis tellus elementum. Egestas consectetur in ac id. Sit aliquam et ut pellentesque in at blandit sed. Sapien morbi cras eleifend lectus."));
 };
 var ExampleContent = function ExampleContent(contentProps) {
   var text = contentProps.text;
@@ -626,14 +571,7 @@ var ExampleContent = function ExampleContent(contentProps) {
     }
   }, (0, _react2.jsx)(_2.Text, {
     variant: "itemTitle"
-  }, text), (0, _react2.jsx)(_2.IconButton, {
-    "aria-label": "".concat(text, " information icon")
-  }, (0, _react2.jsx)(_2.Icon, {
-    icon: _InformationIcon["default"],
-    title: {
-      name: 'Information Icon'
-    }
-  })));
+  }, text));
 };
 var Controls = function Controls() {
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_2.ListViewItemSwitchField, null), (0, _react2.jsx)(_2.ListViewItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
@@ -644,8 +582,8 @@ var Controls = function Controls() {
     key: "delete"
   }, "Delete user")));
 };
-var Default = function Default(_ref2) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
+var Default = function Default(_ref) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   return (0, _react2.jsx)(_2.ListView, (0, _extends2["default"])({}, props, args, {
     items: items
   }), function (item) {
@@ -655,13 +593,22 @@ var Default = function Default(_ref2) {
       data: {
         text: item.name,
         icon: _FormSelectIcon["default"]
+      },
+      iconProps: {
+        color: 'text.secondary'
       }
     }, (0, _react2.jsx)(Controls, null)));
   });
 };
 exports.Default = Default;
-var WithExpandableItems = function WithExpandableItems(_ref3) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listView["default"]
+  }
+};
+var WithExpandableItems = function WithExpandableItems(_ref2) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
   return (0, _react2.jsx)(_2.ListView, (0, _extends2["default"])({}, props, args, {
     items: items,
     selectionMode: "expansion"
@@ -675,8 +622,14 @@ var WithExpandableItems = function WithExpandableItems(_ref3) {
   });
 };
 exports.WithExpandableItems = WithExpandableItems;
-var ControlledExpandableItems = function ControlledExpandableItems(_ref4) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
+WithExpandableItems.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listView.withExpandableItems
+  }
+};
+var ControlledExpandableItems = function ControlledExpandableItems(_ref3) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
   var _useState = (0, _react.useState)(['Kangaroo']),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     expandedKeys = _useState2[0],
@@ -710,7 +663,7 @@ var ControlledExpandableItems = function ControlledExpandableItems(_ref4) {
 exports.ControlledExpandableItems = ControlledExpandableItems;
 var InfiniteLoadingList = function InfiniteLoadingList(args) {
   var getMockData = /*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
+    var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
       var pageNumber;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -740,11 +693,11 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
       }, _callee);
     }));
     return function getMockData(_x, _x2) {
-      return _ref5.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var fetchApiData = /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
+    var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
       var res, json;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -796,17 +749,17 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
       }, _callee2, null, [[2, 14]]);
     }));
     return function fetchApiData(_x3, _x4, _x5) {
-      return _ref6.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
   var list = (0, _reactStately.useAsyncList)({
-    load: function load(_ref7) {
+    load: function load(_ref6) {
       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 = _ref7.signal, cursor = _ref7.cursor, filterText = _ref7.filterText;
+              signal = _ref6.signal, cursor = _ref6.cursor, filterText = _ref6.filterText;
               if (cursor) {
                 // eslint-disable-next-line
                 cursor = cursor.replace(/^http:\/\//i, "https://");
@@ -843,6 +796,9 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
       data: {
         text: item.name,
         icon: _FormSelectIcon["default"]
+      },
+      iconProps: {
+        color: 'text.secondary'
       }
     }, (0, _react2.jsx)(Controls, null)));
   }));
@@ -856,31 +812,17 @@ InfiniteLoadingList.parameters = {
     description: {
       story: 'Note: Keep in mind the maxHeight may impact when the scroll callback is triggered. If you notice it\'s being called too often, try adjusting that value or loading more objects to prevent this behavior.'
     }
+  },
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listView.infiniteLoadingList
   }
 };
-var MultipleSelection = function MultipleSelection(_ref8) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref8), _ref8));
-  return (0, _react2.jsx)(_2.ListView, (0, _extends2["default"])({}, props, args, {
-    items: items,
-    selectionMode: "multiple"
-  }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.name
-    }, (0, _react2.jsx)(_2.ListViewItem, {
-      data: {
-        text: item.name,
-        icon: _FormSelectIcon["default"]
-      }
-    }, (0, _react2.jsx)(Controls, null)));
-  });
-};
-exports.MultipleSelection = MultipleSelection;
-var WithCharts = function WithCharts(_ref9) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref9), _ref9));
+var WithCharts = function WithCharts(_ref7) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref7), _ref7));
   var chartContainerRef = (0, _react.useRef)();
   return (0, _react2.jsx)(_2.ListView, (0, _extends2["default"])({}, args, {
-    items: items,
-    selectionMode: "multiple"
+    items: items
   }), function (item) {
     return (0, _react2.jsx)(_reactStately.Item, {
       key: item.name
@@ -890,6 +832,9 @@ var WithCharts = function WithCharts(_ref9) {
         text: item.name,
         subtext: item.subtext,
         icon: _FormSelectIcon["default"]
+      },
+      iconProps: {
+        color: 'text.secondary'
       }
     }, (0, _react2.jsx)(_2.ListViewItemChart, {
       containerRef: chartContainerRef,
@@ -906,6 +851,20 @@ var WithCharts = function WithCharts(_ref9) {
   });
 };
 exports.WithCharts = WithCharts;
+WithCharts.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.listView.withCharts
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'landmark-unique',
+        enabled: false
+      }]
+    }
+  }
+};
 var OnLoadPrev = function OnLoadPrev() {
   var _context4, _context5;
   var initialItems = (0, _map["default"])(_context4 = (0, _fill["default"])(_context5 = new Array(10)).call(_context5, {
@@ -935,7 +894,7 @@ var OnLoadPrev = function OnLoadPrev() {
     loadingState = _useState10[0],
     setLoadingState = _useState10[1];
   var onLoadMore = /*#__PURE__*/function () {
-    var _ref10 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+    var _ref8 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
       var _context6, _context7, _context8;
       var newItems;
       return _regeneratorRuntime().wrap(function _callee4$(_context9) {
@@ -967,11 +926,11 @@ var OnLoadPrev = function OnLoadPrev() {
       }, _callee4);
     }));
     return function onLoadMore() {
-      return _ref10.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
   var onLoadPrev = /*#__PURE__*/function () {
-    var _ref11 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+    var _ref9 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
       var _context10, _context11, _context12;
       var newItems;
       return _regeneratorRuntime().wrap(function _callee5$(_context13) {
@@ -1003,7 +962,7 @@ var OnLoadPrev = function OnLoadPrev() {
       }, _callee5);
     }));
     return function onLoadPrev() {
-      return _ref11.apply(this, arguments);
+      return _ref9.apply(this, arguments);
     };
   }();
   return (0, _react2.jsx)(_2.Box, {

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -184,6 +184,12 @@ export declare const FIGMA_LINKS: {
         withoutButton: string;
         withoutLink: string;
     };
+    listView: {
+        default: string;
+        withExpandableItems: string;
+        withCharts: string;
+        infiniteLoadingList: string;
+    };
     tooltipTrigger: {
         badgeWithTooltip: string;
     };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -191,6 +191,12 @@ var FIGMA_LINKS = {
     withoutButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16196&t=OK8Fy4P3se6BKy0F-4',
     withoutLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16201&t=OK8Fy4P3se6BKy0F-4'
   },
+  listView: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=57056-5258&t=aeLMWPtVqU6aIeNs-4',
+    withExpandableItems: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58432-5601&t=aeLMWPtVqU6aIeNs-4',
+    withCharts: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=57056-5709&t=aeLMWPtVqU6aIeNs-4',
+    infiniteLoadingList: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58597-316&t=aeLMWPtVqU6aIeNs-4'
+  },
   tooltipTrigger: {
     badgeWithTooltip: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=59201-5404&t=wsQsGpX0SmOiAweL-4'
   },

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

@@ -16,12 +16,10 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerat
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-var _excluded = ["string", "secondString"];
 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, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $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 defineProperty(generator, "_invoke", { value: makeInvokeMethod(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 _context16; _forEachInstanceProperty(_context16 = ["next", "throw", "return"]).call(_context16, 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; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(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); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), 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, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), 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 (val) { var object = Object(val), 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 _context17; 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(_context17 = this.tryEntries).call(_context17, 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; }
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
@@ -34,11 +32,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useRef, useState } from 'react';
 import { Item, useAsyncList } from 'react-stately';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
-import InformationIcon from '@pingux/mdi-react/InformationIcon';
 import { action } from '@storybook/addon-actions';
 import isChromatic from 'chromatic/isChromatic';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Badge, Box, Button, HelpHint, Icon, IconButton, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, Text, TextField } from '../..';
+import { Box, Button, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, SearchField, Text } from '../..';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { chartData } from '../ListViewItem/controls/chart/chartData';
 import ListViewReadme from './ListView.mdx';
@@ -78,20 +76,6 @@ var items = [{
   name: 'Snake',
   id: '3'
 }];
-var environments = [{
-  title: 'Ping'
-}, {
-  title: 'PingOne'
-}, {
-  title: 'Montana'
-}, {
-  title: 'Europe',
-  populations: ['Spain', 'Switzerland', 'Germany']
-}, {
-  title: 'Asia',
-  populations: ['Hong Kong'],
-  isLimitedAccess: true
-}];
 var animals = [{
   name: 'Aardvark'
 }, {
@@ -549,60 +533,21 @@ var actions = {
   onFocus: action('onFocus'),
   onLoadMore: action('onLoadMore')
 };
-var CustomText = function CustomText(_ref) {
-  var string = _ref.string,
-    secondString = _ref.secondString,
-    others = _objectWithoutProperties(_ref, _excluded);
-  return ___EmotionJSX(Text, others, string, ' ', ___EmotionJSX("i", null, secondString));
-};
 var ExpandableChildren = function ExpandableChildren() {
   return ___EmotionJSX(Box, {
     sx: {
-      my: 'md'
+      my: 'lg'
     }
-  }, ___EmotionJSX(TextField, {
-    maxWidth: "300px",
-    "aria-label": "Search Environment"
-  }), ___EmotionJSX(Box, {
+  }, ___EmotionJSX(SearchField, {
+    maxWidth: "400px",
+    "aria-label": "Search",
+    placeholder: "Search"
+  }), ___EmotionJSX(Text, {
     sx: {
       mt: 'md',
-      gap: 'md'
+      fontWeight: '1'
     }
-  }, _mapInstanceProperty(environments).call(environments, function (env) {
-    var _env$populations;
-    return ___EmotionJSX(Box, {
-      key: env.title
-    }, ___EmotionJSX(Box, {
-      isRow: true
-    }, ___EmotionJSX(CustomText, {
-      key: "".concat(env.title, " title"),
-      string: env.title,
-      secondString: "Environment"
-    }), env.isLimitedAccess && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Badge, {
-      label: "Limited Access",
-      bg: "white",
-      textColor: "text.primary",
-      sx: {
-        ml: 'xs',
-        border: '1px solid',
-        borderColor: 'neutral.80'
-      }
-    }), ___EmotionJSX(HelpHint, null, "Text of the popover right here..."))), (_env$populations = env.populations) === null || _env$populations === void 0 ? void 0 : _mapInstanceProperty(_env$populations).call(_env$populations, function (pop) {
-      return ___EmotionJSX(CustomText, {
-        key: pop,
-        sx: {
-          ml: 'sm'
-        },
-        string: pop,
-        secondString: "Population"
-      });
-    }));
-  }), ___EmotionJSX(Button, {
-    sx: {
-      alignSelf: 'start'
-    },
-    variant: "link"
-  }, "More Environments")));
+  }, "Lorem ipsum dolor sit amet consectetur. Viverra nulla nec velit sollicitudin sed nisi mi gravida. Maecenas vestibulum pretium dictum dictum tempus. Sit et rutrum hendrerit facilisi turpis tellus elementum. Egestas consectetur in ac id. Sit aliquam et ut pellentesque in at blandit sed. Sapien morbi cras eleifend lectus."));
 };
 var ExampleContent = function ExampleContent(contentProps) {
   var text = contentProps.text;
@@ -613,14 +558,7 @@ var ExampleContent = function ExampleContent(contentProps) {
     }
   }, ___EmotionJSX(Text, {
     variant: "itemTitle"
-  }, text), ___EmotionJSX(IconButton, {
-    "aria-label": "".concat(text, " information icon")
-  }, ___EmotionJSX(Icon, {
-    icon: InformationIcon,
-    title: {
-      name: 'Information Icon'
-    }
-  })));
+  }, text));
 };
 var Controls = function Controls() {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
@@ -631,8 +569,8 @@ var Controls = function Controls() {
     key: "delete"
   }, "Delete user")));
 };
-export var Default = function Default(_ref2) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+export var Default = function Default(_ref) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(ListView, _extends({}, props, args, {
     items: items
   }), function (item) {
@@ -642,12 +580,21 @@ export var Default = function Default(_ref2) {
       data: {
         text: item.name,
         icon: FormSelectIcon
+      },
+      iconProps: {
+        color: 'text.secondary'
       }
     }, ___EmotionJSX(Controls, null)));
   });
 };
-export var WithExpandableItems = function WithExpandableItems(_ref3) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listView["default"]
+  }
+};
+export var WithExpandableItems = function WithExpandableItems(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   return ___EmotionJSX(ListView, _extends({}, props, args, {
     items: items,
     selectionMode: "expansion"
@@ -660,8 +607,14 @@ export var WithExpandableItems = function WithExpandableItems(_ref3) {
     }), ___EmotionJSX(ExpandableChildren, null));
   });
 };
-export var ControlledExpandableItems = function ControlledExpandableItems(_ref4) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+WithExpandableItems.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listView.withExpandableItems
+  }
+};
+export var ControlledExpandableItems = function ControlledExpandableItems(_ref3) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
   var _useState = useState(['Kangaroo']),
     _useState2 = _slicedToArray(_useState, 2),
     expandedKeys = _useState2[0],
@@ -694,7 +647,7 @@ export var ControlledExpandableItems = function ControlledExpandableItems(_ref4)
 };
 export var InfiniteLoadingList = function InfiniteLoadingList(args) {
   var getMockData = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
       var pageNumber;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -724,11 +677,11 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
       }, _callee);
     }));
     return function getMockData(_x, _x2) {
-      return _ref5.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var fetchApiData = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
       var res, json;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -780,17 +733,17 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
       }, _callee2, null, [[2, 14]]);
     }));
     return function fetchApiData(_x3, _x4, _x5) {
-      return _ref6.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
   var list = useAsyncList({
-    load: function load(_ref7) {
+    load: function load(_ref6) {
       return _asyncToGenerator( /*#__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 = _ref7.signal, cursor = _ref7.cursor, filterText = _ref7.filterText;
+              signal = _ref6.signal, cursor = _ref6.cursor, filterText = _ref6.filterText;
               if (cursor) {
                 // eslint-disable-next-line
                 cursor = cursor.replace(/^http:\/\//i, "https://");
@@ -827,6 +780,9 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
       data: {
         text: item.name,
         icon: FormSelectIcon
+      },
+      iconProps: {
+        color: 'text.secondary'
       }
     }, ___EmotionJSX(Controls, null)));
   }));
@@ -839,30 +795,17 @@ InfiniteLoadingList.parameters = {
     description: {
       story: 'Note: Keep in mind the maxHeight may impact when the scroll callback is triggered. If you notice it\'s being called too often, try adjusting that value or loading more objects to prevent this behavior.'
     }
+  },
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listView.infiniteLoadingList
   }
 };
-export var MultipleSelection = function MultipleSelection(_ref8) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref8), _ref8));
-  return ___EmotionJSX(ListView, _extends({}, props, args, {
-    items: items,
-    selectionMode: "multiple"
-  }), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, ___EmotionJSX(ListViewItem, {
-      data: {
-        text: item.name,
-        icon: FormSelectIcon
-      }
-    }, ___EmotionJSX(Controls, null)));
-  });
-};
-export var WithCharts = function WithCharts(_ref9) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref9), _ref9));
+export var WithCharts = function WithCharts(_ref7) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref7), _ref7));
   var chartContainerRef = useRef();
   return ___EmotionJSX(ListView, _extends({}, args, {
-    items: items,
-    selectionMode: "multiple"
+    items: items
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.name
@@ -872,6 +815,9 @@ export var WithCharts = function WithCharts(_ref9) {
         text: item.name,
         subtext: item.subtext,
         icon: FormSelectIcon
+      },
+      iconProps: {
+        color: 'text.secondary'
       }
     }, ___EmotionJSX(ListViewItemChart, {
       containerRef: chartContainerRef,
@@ -887,6 +833,20 @@ export var WithCharts = function WithCharts(_ref9) {
     }), ___EmotionJSX(Controls, null)));
   });
 };
+WithCharts.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.listView.withCharts
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'landmark-unique',
+        enabled: false
+      }]
+    }
+  }
+};
 export var OnLoadPrev = function OnLoadPrev() {
   var _context4, _context5;
   var initialItems = _mapInstanceProperty(_context4 = _fillInstanceProperty(_context5 = new Array(10)).call(_context5, {
@@ -916,7 +876,7 @@ export var OnLoadPrev = function OnLoadPrev() {
     loadingState = _useState10[0],
     setLoadingState = _useState10[1];
   var onLoadMore = /*#__PURE__*/function () {
-    var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
       var _context6, _context7, _context8;
       var newItems;
       return _regeneratorRuntime().wrap(function _callee4$(_context9) {
@@ -948,11 +908,11 @@ export var OnLoadPrev = function OnLoadPrev() {
       }, _callee4);
     }));
     return function onLoadMore() {
-      return _ref10.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
   var onLoadPrev = /*#__PURE__*/function () {
-    var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+    var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
       var _context10, _context11, _context12;
       var newItems;
       return _regeneratorRuntime().wrap(function _callee5$(_context13) {
@@ -984,7 +944,7 @@ export var OnLoadPrev = function OnLoadPrev() {
       }, _callee5);
     }));
     return function onLoadPrev() {
-      return _ref11.apply(this, arguments);
+      return _ref9.apply(this, arguments);
     };
   }();
   return ___EmotionJSX(Box, {

package/lib/utils/designUtils/figmaLinks.js

@@ -184,6 +184,12 @@ export var FIGMA_LINKS = {
     withoutButton: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16196&t=OK8Fy4P3se6BKy0F-4',
     withoutLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=52102-16201&t=OK8Fy4P3se6BKy0F-4'
   },
+  listView: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=57056-5258&t=aeLMWPtVqU6aIeNs-4',
+    withExpandableItems: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58432-5601&t=aeLMWPtVqU6aIeNs-4',
+    withCharts: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=57056-5709&t=aeLMWPtVqU6aIeNs-4',
+    infiniteLoadingList: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58597-316&t=aeLMWPtVqU6aIeNs-4'
+  },
   tooltipTrigger: {
     badgeWithTooltip: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=59201-5404&t=wsQsGpX0SmOiAweL-4'
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.99.0-alpha.0",
+  "version": "2.99.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",