@automattic/vip-design-system 0.34.0 → 0.34.1

package/build/system/Form/Label.js

@@ -13,11 +13,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _themeUi = require("theme-ui");
+
 var _RequiredLabel = require("./RequiredLabel");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx", "children", "required"];
+var _excluded = ["sx", "children", "required", "as"];
 var baseLabelColor = 'input.label.default';
 exports.baseLabelColor = baseLabelColor;
 var baseLabelStyle = {
@@ -32,9 +34,14 @@ var Label = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
   var sx = _ref.sx,
       children = _ref.children,
       required = _ref.required,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'label' : _ref$as,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsxs)("label", (0, _extends2["default"])({
-    sx: (0, _extends2["default"])({}, baseLabelStyle, {
+  return (0, _jsxRuntime.jsxs)(_themeUi.Box, (0, _extends2["default"])({
+    as: as,
+    sx: (0, _extends2["default"])({
+      all: 'unset'
+    }, baseLabelStyle, {
       display: 'block',
       mb: 2
     }, sx),
@@ -48,6 +55,7 @@ exports.Label = Label;
 Label.propTypes = {
   children: _propTypes["default"].any,
   required: _propTypes["default"].bool,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  as: _propTypes["default"].node
 };
 Label.displayName = 'Label';

package/build/system/Form/RadioBoxGroup.js

@@ -15,10 +15,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
-var _Label = require("./Label");
-
 var _Validation = require("./Validation");
 
+var _RequiredLabel = require("./RequiredLabel");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["id", "value", "className", "label", "description", "labelProps"],
@@ -171,15 +171,15 @@ var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, f
         borderColor: 'input.border.error',
         borderRadius: 2
       } : {}),
-      ref: forwardRef
+      ref: forwardRef,
+      "aria-required": required,
+      role: "radiogroup"
     }, props, {
-      children: [groupLabel ? (0, _jsxRuntime.jsx)(_Label.Label, {
-        as: "legend",
+      children: [groupLabel ? (0, _jsxRuntime.jsxs)("legend", {
         sx: {
           mb: 2
         },
-        required: required,
-        children: groupLabel
+        children: [groupLabel, required ? (0, _jsxRuntime.jsx)(_RequiredLabel.RequiredLabel, {}) : null]
       }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
         children: "Choose an option"
       }), (0, _jsxRuntime.jsx)("div", {

package/build/system/Wizard/WizardStep.js

@@ -54,7 +54,7 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
 
   if (active) {
     status = 'active';
-    statusText = 'Current step';
+    statusText = ''; // not adding the status text for active step since it's announced by aria-current
   } else if (complete) {
     status = 'complete';
     statusText = 'Step completed';
@@ -63,7 +63,10 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
     statusText = 'Step skipped';
   }
 
-  statusText = "Status: " + statusText;
+  if (statusText !== '') {
+    statusText = "Status: " + statusText;
+  }
+
   var stepText = "Step " + order + " of " + totalSteps;
   var borderLeftColor = "wizard.step.border." + status;
   var statusIconColor = "wizard.step.icon." + status;

package/build/system/theme/generated/valet-theme.json

@@ -38,23 +38,6 @@
       "value": "#ffffff",
       "type": "color"
     },
-    "label": {
-      "default": {
-        "value": "#13191e",
-        "type": "color"
-      }
-    },
-    "text": {
-      "default": {
-        "value": "#13191e",
-        "type": "color"
-      },
-      "placeholder": {
-        "type": "color",
-        "value": "#767372",
-        "description": "Use for placeholder text in fields"
-      }
-    },
     "border": {
       "default": {
         "value": "#8f8c8b",
@@ -196,19 +179,18 @@
       "description": "Use for helper text",
       "value": "#6a6766"
     },
+    "placeholder": {
+      "type": "color",
+      "value": "#767372",
+      "description": "Use for placeholder text in fields"
+    },
     "disabled": {
       "type": "color",
       "value": "#9b9796"
     },
     "inverse": {
       "type": "color",
-      "value": "#fbfbfb",
-      "description": "Use for primary text on an inverse layer"
-    },
-    "inverse-secondary": {
-      "value": "#b3afae",
-      "type": "color",
-      "description": "Use for secondary text on an inverse layer."
+      "value": "#fbfbfb"
     },
     "accent": {
       "type": "color",
@@ -643,8 +625,8 @@
       "info": {
         "default": {
           "type": "color",
-          "value": "#006979",
-          "description": "Use for text links"
+          "description": "Use for text links",
+          "value": "#007586"
         },
         "hover": {
           "type": "color",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.34.0",
+	"version": "0.34.1",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Form/Label.js

@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { Box } from 'theme-ui';
 /**
  * Internal dependencies
  */
@@ -19,26 +19,31 @@ export const baseLabelStyle = {
 	color: baseLabelColor,
 };
 
-const Label = React.forwardRef( ( { sx, children, required, ...rest }, forwardRef ) => (
-	<label
-		sx={ {
-			...baseLabelStyle,
-			display: 'block',
-			mb: 2,
-			...sx,
-		} }
-		ref={ forwardRef }
-		{ ...rest }
-	>
-		{ children }
-		{ required && <RequiredLabel /> }
-	</label>
-) );
+const Label = React.forwardRef(
+	( { sx, children, required, as = 'label', ...rest }, forwardRef ) => (
+		<Box
+			as={ as }
+			sx={ {
+				all: 'unset',
+				...baseLabelStyle,
+				display: 'block',
+				mb: 2,
+				...sx,
+			} }
+			ref={ forwardRef }
+			{ ...rest }
+		>
+			{ children }
+			{ required && <RequiredLabel /> }
+		</Box>
+	)
+);
 
 Label.propTypes = {
 	children: PropTypes.any,
 	required: PropTypes.bool,
 	sx: PropTypes.object,
+	as: PropTypes.node,
 };
 
 Label.displayName = 'Label';

package/src/system/Form/RadioBoxGroup.js

@@ -6,8 +6,8 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import ScreenReaderText from '../ScreenReaderText';
-import { Label } from './Label';
 import { Validation } from './Validation';
+import { RequiredLabel } from './RequiredLabel';
 
 /**
  * Internal dependencies
@@ -154,12 +154,15 @@ const RadioBoxGroup = React.forwardRef(
 							: {} ),
 					} }
 					ref={ forwardRef }
+					aria-required={ required }
+					role="radiogroup"
 					{ ...props }
 				>
 					{ groupLabel ? (
-						<Label as="legend" sx={ { mb: 2 } } required={ required }>
+						<legend sx={ { mb: 2 } }>
 							{ groupLabel }
-						</Label>
+							{ required ? <RequiredLabel /> : null }
+						</legend>
 					) : (
 						<ScreenReaderText>Choose an option</ScreenReaderText>
 					) }

package/src/system/Wizard/WizardStep.js

@@ -36,7 +36,7 @@ const WizardStep = React.forwardRef(
 		let statusText = 'Step not completed';
 		if ( active ) {
 			status = 'active';
-			statusText = 'Current step';
+			statusText = ''; // not adding the status text for active step since it's announced by aria-current
 		} else if ( complete ) {
 			status = 'complete';
 			statusText = 'Step completed';
@@ -44,7 +44,9 @@ const WizardStep = React.forwardRef(
 			status = 'skipped';
 			statusText = 'Step skipped';
 		}
-		statusText = `Status: ${ statusText }`;
+		if ( statusText !== '' ) {
+			statusText = `Status: ${ statusText }`;
+		}
 		const stepText = `Step ${ order } of ${ totalSteps }`;
 
 		const borderLeftColor = `wizard.step.border.${ status }`;

package/build/system/ResourceList/ResourceItem.js

@@ -1,89 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.ResourceItem = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-var ResourceItem = function ResourceItem(_ref) {
-  var children = _ref.children,
-      item = _ref.item,
-      renderActions = _ref.renderActions,
-      _ref$relativeTime = _ref.relativeTime,
-      relativeTime = _ref$relativeTime === void 0 ? false : _ref$relativeTime,
-      _ref$timeOnly = _ref.timeOnly,
-      timeOnly = _ref$timeOnly === void 0 ? false : _ref$timeOnly,
-      dateKey = _ref.dateKey,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? null : _ref$icon;
-  return (0, _jsxRuntime.jsxs)(_.Flex, {
-    sx: {
-      alignItems: 'center',
-      gap: 3
-    },
-    children: [icon, (0, _jsxRuntime.jsx)(_.Box, {
-      sx: {
-        flex: '1 1 auto'
-      },
-      children: children
-    }), (0, _jsxRuntime.jsxs)(_.Flex, {
-      sx: {
-        flex: '0 0 auto',
-        alignItems: 'center',
-        gap: 3
-      },
-      children: [(0, _jsxRuntime.jsx)(_.Time, {
-        className: "time",
-        relativeTime: relativeTime,
-        timeOnly: timeOnly,
-        time: item[dateKey],
-        sx: {
-          color: 'muted',
-          mb: 0,
-          textAlign: 'right',
-          flex: '0 0 auto'
-        }
-      }), renderActions && (0, _jsxRuntime.jsxs)(_.Flex, {
-        className: "actions",
-        sx: {
-          alignItems: 'center',
-          gap: 3
-        },
-        children: [(0, _jsxRuntime.jsx)(_.Box, {
-          sx: {
-            width: 4,
-            height: 4,
-            borderRadius: 4,
-            bg: 'border'
-          }
-        }), renderActions(item)]
-      })]
-    })]
-  });
-};
-
-exports.ResourceItem = ResourceItem;
-ResourceItem.propTypes = {
-  children: _propTypes["default"].node,
-  item: _propTypes["default"].object,
-  icon: _propTypes["default"].node,
-  relativeTime: _propTypes["default"].bool,
-  timeOnly: _propTypes["default"].bool,
-  dateKey: _propTypes["default"].string,
-  renderActions: _propTypes["default"].func
-};

package/build/system/ResourceList/ResourceList.js

@@ -1,140 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.ResourceList = void 0;
-
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = require("react");
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-var formatterOptions = {
-  weekday: 'long',
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric'
-};
-
-var formatDate = function formatDate(date) {
-  var today = new Date();
-
-  if (date.getFullYear() !== today.getFullYear()) {
-    return date.toLocaleDateString(formatterOptions);
-  } else if (date.getMonth() !== today.getMonth()) {
-    return date.toLocaleDateString(formatterOptions);
-  } else if (date.getDate() < today.getDate() - 1) {
-    return date.toLocaleDateString(formatterOptions);
-  } else if (date.getDate() === today.getDate() - 1) {
-    return 'Yesterday';
-  }
-
-  return 'Today';
-};
-
-var StyledListItem = function StyledListItem(props) {
-  return (0, _jsxRuntime.jsx)(_.Box, (0, _extends3["default"])({
-    as: "li",
-    sx: {
-      py: 2,
-      borderBottom: '1px solid',
-      borderColor: 'borders.2',
-      listStyleType: 'none',
-      margin: 0,
-      px: 0
-    }
-  }, props));
-};
-
-var ResourceList = function ResourceList(_ref) {
-  var _ref$groupedByDay = _ref.groupedByDay,
-      groupedByDay = _ref$groupedByDay === void 0 ? false : _ref$groupedByDay,
-      items = _ref.items,
-      renderItem = _ref.renderItem,
-      dateKey = _ref.dateKey;
-  var groupedItems = {};
-
-  if (groupedByDay) {
-    groupedItems = items == null ? void 0 : items.reduce(function (itemGroups, item) {
-      var _extends2;
-
-      var formattedDate = formatDate(item[dateKey]);
-      var itemsAtDate = itemGroups[formattedDate];
-      return (0, _extends3["default"])({}, itemGroups, (_extends2 = {}, _extends2[formattedDate] = itemsAtDate ? [].concat(itemsAtDate, [item]) : [item], _extends2));
-    }, {});
-  }
-
-  var renderItemList = function renderItemList(itemsList) {
-    return itemsList.map(function (item, index) {
-      return (0, _jsxRuntime.jsx)(StyledListItem, {
-        children: renderItem(item)
-      }, index);
-    });
-  };
-
-  var renderGoupedItems = function renderGoupedItems() {
-    return (0, _react.useMemo)(function () {
-      return Object.keys(groupedItems).map(function (groupName, index) {
-        return (0, _jsxRuntime.jsxs)(_.Box, {
-          sx: {
-            mb: 4
-          },
-          as: "li",
-          children: [(0, _jsxRuntime.jsx)(_.Heading, {
-            variant: "h4",
-            as: "h4",
-            sx: {
-              mb: 3
-            },
-            children: groupName
-          }), (0, _jsxRuntime.jsx)(_.Box, {
-            as: "ul",
-            sx: {
-              listStyleType: 'none',
-              m: 0,
-              p: 0,
-              borderTop: '1px solid',
-              borderColor: 'border'
-            },
-            children: renderItemList(groupedItems[groupName])
-          })]
-        }, index);
-      });
-    }, [groupedItems]);
-  };
-
-  return (0, _jsxRuntime.jsx)(_.Box, {
-    as: "ul",
-    sx: {
-      listStyleType: 'none',
-      m: 0,
-      p: 0
-    },
-    className: "vip-resource-list-component",
-    children: groupedByDay ? renderGoupedItems(groupedItems) : renderItemList(items)
-  });
-};
-
-exports.ResourceList = ResourceList;
-ResourceList.propTypes = {
-  groupedByDay: _propTypes["default"].bool,
-  items: _propTypes["default"].array,
-  renderItem: _propTypes["default"].func,
-  relativeTime: _propTypes["default"].bool,
-  dateKey: _propTypes["default"].string
-};

package/build/system/ResourceList/ResourceList.stories.js

@@ -1,379 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports["default"] = exports.Relative = exports.Grouped = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _bi = require("react-icons/bi");
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'ResourceList',
-  component: _.ResourceList
-};
-exports["default"] = _default;
-var logs = [{
-  actor: 'Saxon Fletcher',
-  action: 'switched primary domain to',
-  object: 'mydomain.com',
-  date: new Date()
-}, {
-  actor: 'Saxon Fletcher',
-  action: 'switched primary domain to',
-  object: 'mydomain.com',
-  date: new Date(new Date().setHours(11))
-}, {
-  actor: 'Simon Wheatley',
-  action: 'deployed to',
-  object: 'Production',
-  showObject: true,
-  date: new Date(new Date().setDate(15))
-}, {
-  actor: 'Saxon Fletcher',
-  action: 'created a backup on',
-  object: 'Production',
-  date: new Date(new Date().setDate(13))
-}];
-
-var Grouped = function Grouped() {
-  return (0, _jsxRuntime.jsxs)(_.Box, {
-    sx: {
-      p: 5,
-      pt: 2
-    },
-    children: [(0, _jsxRuntime.jsx)(_.Heading, {
-      sx: {
-        mb: 2
-      },
-      children: "Audit Log"
-    }), (0, _jsxRuntime.jsx)(_.Text, {
-      sx: {
-        mb: 4
-      },
-      children: "A live trail of system and human events."
-    }), (0, _jsxRuntime.jsx)(_.ResourceList, {
-      items: logs,
-      dateKey: "date",
-      groupedByDay: true,
-      renderItem: function renderItem(item) {
-        return (0, _jsxRuntime.jsxs)(_.ResourceItem, {
-          item: item,
-          icon: (0, _jsxRuntime.jsx)(_bi.BiGlobe, {
-            sx: {
-              color: 'red'
-            }
-          }),
-          dateKey: 'date',
-          relativeTime: true,
-          timeOnly: true,
-          children: [(0, _jsxRuntime.jsxs)(_.Flex, {
-            sx: {
-              alignItems: 'center',
-              gap: 3
-            },
-            children: [(0, _jsxRuntime.jsx)(_.Avatar, {
-              name: item.actor,
-              src: "https://uifaces.co/our-content/donated/1H_7AxP0.jpg",
-              size: 16
-            }), (0, _jsxRuntime.jsxs)(_.Heading, {
-              variant: "h4",
-              as: "p",
-              sx: {
-                mb: 0,
-                fontWeight: 'normal'
-              },
-              children: [item.actor, ' ', (0, _jsxRuntime.jsx)(_.Text, {
-                as: "span",
-                sx: {
-                  color: 'muted',
-                  mb: 0
-                },
-                children: item.action
-              }), ' ', item.object]
-            })]
-          }), item.showObject && (0, _jsxRuntime.jsxs)(_.Box, {
-            variant: "indent",
-            sx: {
-              mt: 2,
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: 3,
-              alignItems: 'center'
-            },
-            children: [(0, _jsxRuntime.jsxs)(_.Heading, {
-              variant: "h5",
-              as: "div",
-              sx: {
-                mb: 0
-              },
-              children: ["Merge pull request", ' ', (0, _jsxRuntime.jsx)(_.Text, {
-                as: "span",
-                sx: {
-                  color: 'muted'
-                },
-                children: "#443"
-              })]
-            }), (0, _jsxRuntime.jsxs)(_.Text, {
-              as: "div",
-              sx: {
-                mb: 0,
-                fontSize: 1,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1
-              },
-              children: [(0, _jsxRuntime.jsx)(_.Avatar, {
-                name: item.actor,
-                src: "https://uifaces.co/our-content/donated/n4Ngwvi7.jpg",
-                size: 16
-              }), item.actor]
-            }), (0, _jsxRuntime.jsxs)(_.Text, {
-              sx: {
-                mb: 0,
-                fontSize: 1,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1
-              },
-              children: [(0, _jsxRuntime.jsx)(_bi.BiCheckCircle, {
-                size: 16
-              }), "Deployed in 31s"]
-            })]
-          })]
-        });
-      }
-    })]
-  });
-};
-
-exports.Grouped = Grouped;
-var deploys = [{
-  title: 'Merge pull request',
-  id: '#773',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(11)),
-  status: 'running'
-}, {
-  title: 'Update homepage',
-  id: '#772',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(9))
-}, {
-  title: 'Improve overall performance',
-  id: '#771',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(8))
-}, {
-  title: 'Merge pull request',
-  id: '#770',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(5)),
-  status: 'failed'
-}, {
-  title: 'Merge pull request',
-  id: '#773',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(11))
-}, {
-  title: 'Update homepage',
-  id: '#772',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(9))
-}, {
-  title: 'Improve overall performance',
-  id: '#771',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(8))
-}, {
-  title: 'Merge pull request',
-  id: '#770',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(5))
-}, {
-  title: 'Merge pull request',
-  id: '#773',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(11))
-}, {
-  title: 'Update homepage',
-  id: '#772',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(9))
-}, {
-  title: 'Improve overall performance',
-  id: '#771',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(8))
-}, {
-  title: 'Merge pull request',
-  id: '#770',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(5))
-}, {
-  title: 'Merge pull request',
-  id: '#773',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(11))
-}, {
-  title: 'Update homepage',
-  id: '#772',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(9))
-}, {
-  title: 'Improve overall performance',
-  id: '#771',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(8))
-}, {
-  title: 'Merge pull request',
-  id: '#770',
-  author: 'Saxon Fletcher',
-  date: new Date(new Date().setHours(5))
-}];
-
-var Relative = function Relative() {
-  return (0, _jsxRuntime.jsxs)(_.Box, {
-    sx: {
-      p: 5,
-      pt: 2
-    },
-    children: [(0, _jsxRuntime.jsx)(_.Heading, {
-      sx: {
-        mb: 2
-      },
-      children: "Deploys"
-    }), (0, _jsxRuntime.jsx)(_.Text, {
-      sx: {
-        mb: 4
-      },
-      children: "View and manage application deployments."
-    }), (0, _jsxRuntime.jsx)(_.Card, {
-      variant: "indent",
-      sx: {
-        mb: 4,
-        display: 'flex',
-        flexDirection: 'row-reverse',
-        gap: 1
-      },
-      children: deploys.map(function (deploy, index) {
-        return (0, _jsxRuntime.jsx)(_.Box, {
-          sx: {
-            flex: '1 1 auto',
-            width: 10,
-            height: 4,
-            backgroundColor: deploy.status === 'running' ? 'blue.50' : 'green.50',
-            borderRadius: 1
-          }
-        }, index);
-      })
-    }), (0, _jsxRuntime.jsx)(_.ResourceList, {
-      items: deploys,
-      dateKey: "date",
-      groupedByDay: false,
-      renderItem: function renderItem(item) {
-        return (0, _jsxRuntime.jsx)(_.ResourceItem, {
-          item: item,
-          dateKey: 'date',
-          relativeTime: true,
-          timeOnly: true,
-          renderActions: function renderActions() {
-            return (0, _jsxRuntime.jsx)(_.Flex, {
-              sx: {
-                alignItems: 'center'
-              },
-              children: (0, _jsxRuntime.jsx)(_.Button, {
-                variant: "secondary",
-                sx: {
-                  fontSize: 1
-                },
-                children: "Rollback"
-              })
-            });
-          },
-          children: (0, _jsxRuntime.jsxs)(_.Flex, {
-            sx: {
-              alignItems: 'center',
-              gap: 4
-            },
-            children: [(0, _jsxRuntime.jsxs)(_.Flex, {
-              sx: {
-                alignItems: 'center',
-                gap: 3,
-                minWidth: 300
-              },
-              children: [(0, _jsxRuntime.jsxs)(_.Heading, {
-                variant: "h4",
-                as: "p",
-                sx: {
-                  mb: 0,
-                  fontWeight: 'normal'
-                },
-                children: [item.title, ' ', (0, _jsxRuntime.jsx)(_.Text, {
-                  as: "span",
-                  sx: {
-                    color: 'muted',
-                    mb: 0
-                  },
-                  children: item.id
-                })]
-              }), item.status === 'running' && (0, _jsxRuntime.jsx)(_.Badge, {
-                sx: {
-                  mb: 0
-                },
-                children: "Running"
-              })]
-            }), (0, _jsxRuntime.jsxs)(_.Text, {
-              as: "div",
-              sx: {
-                mb: 0,
-                color: 'muted',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 2
-              },
-              children: [(0, _jsxRuntime.jsx)(_.Avatar, {
-                name: item.author,
-                size: 16,
-                src: "https://randomuser.me/api/portraits/men/46.jpg"
-              }), item.author]
-            }), (0, _jsxRuntime.jsx)(_.Text, {
-              sx: {
-                mb: 0,
-                color: item.status === 'running' ? 'blue.60' : 'muted',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1
-              },
-              children: item.status === 'running' ? (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-                children: [(0, _jsxRuntime.jsx)(_bi.BiRevision, {
-                  size: 16
-                }), "Running for 31s"]
-              }) : (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-                children: [(0, _jsxRuntime.jsx)(_bi.BiCheckCircle, {
-                  size: 16
-                }), "Deployed in 31s"]
-              })
-            })]
-          })
-        });
-      }
-    })]
-  });
-};
-
-exports.Relative = Relative;

package/build/system/ResourceList/index.js

@@ -1,11 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-
-var _ResourceList = require("./ResourceList");
-
-exports.ResourceList = _ResourceList.ResourceList;
-
-var _ResourceItem = require("./ResourceItem");
-
-exports.ResourceItem = _ResourceItem.ResourceItem;