@spaced-out/ui-design-system 0.3.45 → 0.3.47-beta.0

package/lib/utils/classify/index.js

@@ -7,8 +7,7 @@ exports.classify = classify;
 exports.default = void 0;
 var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));
 var _map = _interopRequireDefault(require("lodash/map"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function classify() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -29,5 +28,4 @@ function classify() {
     return array;
   }, []).filter(val => val).join(' ');
 }
-var _default = classify;
-exports.default = _default;
+var _default = exports.default = classify;

package/lib/utils/click-away/click-away.js

@@ -7,60 +7,21 @@ exports.ClickAway = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _dom = require("../dom");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // TODO(Nishant): Make this a functional component
-
 class ClickAway extends React.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      isOpen: false,
-      height: null,
-      pageBottom: null
-    });
-    _defineProperty(this, "el", null);
-    _defineProperty(this, "boundaryRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "triggerRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "handleOpenClick", () => {
-      // NOTE (kyle): we recalculate the position on click because sibling and niece components
-      // could have changed.
-      let {
-        pageBottom
-      } = this.state;
-      if (this.el) {
-        pageBottom = this.pageBottom();
-      }
-      this.setState({
-        isOpen: !this.state.isOpen,
-        pageBottom
-      }, this.handleOnChange);
-    });
-    _defineProperty(this, "handleCloseClick", evt => {
-      if (evt.target instanceof Node && this.boundaryRef && (this.boundaryRef === evt.target || this.boundaryRef.current?.contains(evt.target))) {
-        return;
-      }
-      if (evt.target instanceof Node && this.triggerRef && (this.triggerRef === evt.target || this.triggerRef.current?.contains(evt.target))) {
-        return;
-      }
-      this.setState({
-        isOpen: false
-      }, this.handleOnChange);
-    });
-    _defineProperty(this, "handleCloseOnEscapeKeypress", evt => {
-      if (evt?.key === 'Escape') {
-        this.forceClose();
-      }
-    });
-    _defineProperty(this, "forceClose", () => {
-      this.setState({
-        isOpen: false
-      }, this.handleOnChange);
-    });
-    _defineProperty(this, "handleOnChange", () => this.props.onChange && this.props.onChange(this.state.isOpen));
-  }
+  static defaultProps = {
+    closeOnEscapeKeypress: true
+  };
+  state = {
+    isOpen: false,
+    height: null,
+    pageBottom: null
+  };
+  el = null;
+  boundaryRef = /*#__PURE__*/React.createRef();
+  triggerRef = /*#__PURE__*/React.createRef();
   componentDidMount() {
     if (this.el) {
       this.setState({
@@ -120,13 +81,46 @@ class ClickAway extends React.Component {
       triggerRef: this.triggerRef
     });
   }
+  handleOpenClick = () => {
+    // NOTE (kyle): we recalculate the position on click because sibling and niece components
+    // could have changed.
+    let {
+      pageBottom
+    } = this.state;
+    if (this.el) {
+      pageBottom = this.pageBottom();
+    }
+    this.setState({
+      isOpen: !this.state.isOpen,
+      pageBottom
+    }, this.handleOnChange);
+  };
+  handleCloseClick = evt => {
+    if (evt.target instanceof Node && this.boundaryRef && (this.boundaryRef === evt.target || this.boundaryRef.current?.contains(evt.target))) {
+      return;
+    }
+    if (evt.target instanceof Node && this.triggerRef && (this.triggerRef === evt.target || this.triggerRef.current?.contains(evt.target))) {
+      return;
+    }
+    this.setState({
+      isOpen: false
+    }, this.handleOnChange);
+  };
+  handleCloseOnEscapeKeypress = evt => {
+    if (evt?.key === 'Escape') {
+      this.forceClose();
+    }
+  };
+  forceClose = () => {
+    this.setState({
+      isOpen: false
+    }, this.handleOnChange);
+  };
+  handleOnChange = () => this.props.onChange && this.props.onChange(this.state.isOpen);
   pageBottom() {
     (0, _invariant.default)(this.el, 'pageBottom() requires that this.el not be null');
     const bottomBound = this.el ? this.el.getBoundingClientRect().bottom : 0;
     return (0, _dom.pageHeight)() - bottomBound + window.scrollY;
   }
 }
-exports.ClickAway = ClickAway;
-_defineProperty(ClickAway, "defaultProps", {
-  closeOnEscapeKeypress: true
-});
+exports.ClickAway = ClickAway;

package/lib/utils/date-range-picker/date-range-picker.js

@@ -9,25 +9,19 @@ var _invariant = _interopRequireDefault(require("invariant"));
 var _lodash = require("lodash");
 var _moment = _interopRequireDefault(require("moment"));
 var _timezones = require("./timezones");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // $FlowFixMe - strict types for date-fns
-
 // $FlowFixMe[untyped-import]
-
-const NAVIGATION_ACTION = Object.freeze({
+const NAVIGATION_ACTION = exports.NAVIGATION_ACTION = Object.freeze({
   NEXT: 'next',
   PREV: 'prev'
 });
-exports.NAVIGATION_ACTION = NAVIGATION_ACTION;
-const MARKERS = Object.freeze({
+const MARKERS = exports.MARKERS = Object.freeze({
   DATE_RANGE_START: 'FIRST',
   DATE_RANGE_END: 'SECOND'
 });
-exports.MARKERS = MARKERS;
-const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-exports.WEEKDAYS = WEEKDAYS;
-const MONTHS = [{
+const WEEKDAYS = exports.WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTHS = exports.MONTHS = [{
   key: '0',
   label: 'Jan'
 }, {
@@ -64,8 +58,7 @@ const MONTHS = [{
   key: '11',
   label: 'Dec'
 }];
-exports.MONTHS = MONTHS;
-const DATE_RANGE_PICKER_ERRORS = Object.freeze({
+const DATE_RANGE_PICKER_ERRORS = exports.DATE_RANGE_PICKER_ERRORS = Object.freeze({
   MIN_MAX_INVALID: {
     type: 'MIN_MAX_INVALID',
     description: 'Given minDate and maxDate are invalid.'
@@ -83,7 +76,6 @@ const DATE_RANGE_PICKER_ERRORS = Object.freeze({
     description: 'Given endDate can not come after maxDate.'
   }
 });
-exports.DATE_RANGE_PICKER_ERRORS = DATE_RANGE_PICKER_ERRORS;
 const checkRangeValidity = (rangeStart, rangeEnd, errorBody, onError) => {
   const isRangeStartValid = isValid(rangeStart);
   const isRangeEndValid = isRangeStartValid && isValid(rangeEnd);

package/lib/utils/date-range-picker/timezones.js

@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTodayInTimezone = exports.addTimezoneStartOfDay = exports.addTimezoneEndOfDay = exports.TIMEZONES = void 0;
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // $FlowFixMe[untyped-import]
-
-const TIMEZONES = {
+const TIMEZONES = exports.TIMEZONES = {
   'Pacific/Niue': '(GMT-11:00) Niue',
   'Pacific/Pago_Pago': '(GMT-11:00) Pago Pago',
   'Pacific/Honolulu': '(GMT-10:00) Hawaii Time',
@@ -263,7 +261,6 @@ const TIMEZONES = {
   'Pacific/Tongatapu': '(GMT+13:00) Tongatapu',
   'Pacific/Kiritimati': '(GMT+14:00) Kiritimati'
 };
-exports.TIMEZONES = TIMEZONES;
 const addTimezoneStartOfDay = (date, timezone) => _momentTimezone.default.tz(date, timezone).startOf('d').toISOString();
 exports.addTimezoneStartOfDay = addTimezoneStartOfDay;
 const addTimezoneEndOfDay = (date, timezone) => _momentTimezone.default.tz(date, timezone).endOf('d').toISOString();

package/lib/utils/dom/dom.js

@@ -16,7 +16,6 @@ exports.pxToNumber = pxToNumber;
 exports.requestPointerLock = requestPointerLock;
 exports.stopEvent = stopEvent;
 exports.stopEventImmediately = stopEventImmediately;
-
 function createElement(document, type, props) {
   const el = document.createElement(type);
   return Object.assign(el, props);

package/lib/utils/helpers/helpers.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uuid = exports.range = exports.convertFileSize = void 0;
-
 const uuid = () => {
   let dt = new Date().getTime();
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {

package/lib/utils/makeClassNameComponent/makeClassNameComponent.js

@@ -8,10 +8,9 @@ exports.makeClassNameComponentCustom = makeClassNameComponentCustom;
 exports.nameHoc = nameHoc;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../classify"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function nameHoc(WrapperComponent, WrappedComponent, hocName) {
   const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   WrapperComponent.displayName = `${hocName}(${wrappedComponentName})`;

package/lib/utils/menu/menu.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTextLabelFromSelectedKeys = exports.getSelectedKeysFromSelectedOption = exports.getOptionsFromKeys = exports.getOptionFromKey = exports.getFilteredOptionsResultText = exports.getFilteredOptionsFromSearchText = exports.getFilteredGroupTitleOptionsResultText = exports.getFilteredGroupTitleOptionsFromSearchText = exports.getFilteredComposeOptionsResultText = exports.getFilteredComposeOptionsFromSearchText = exports.getButtonLabelFromSelectedKeys = void 0;
 var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const getSelectedKeysFromSelectedOption = (currentOption, currentSelectedKeys) => {
   if (!Array.isArray(currentSelectedKeys) || !currentOption?.key) {
     return [];

package/lib/utils/rating/rating.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getRatingLabel = exports.RATING_ERRORS = exports.RATINGS = void 0;
-
-const RATING_ERRORS = Object.freeze({
+const RATING_ERRORS = exports.RATING_ERRORS = Object.freeze({
   INVALID_RANGE: {
     type: 'INVALID_RANGE',
     description: 'Given rating\'s stop value cannot come before the start value.'
@@ -15,9 +14,7 @@ const RATING_ERRORS = Object.freeze({
     description: 'Given rating labels are invalid.'
   }
 });
-exports.RATING_ERRORS = RATING_ERRORS;
-const RATINGS = ['Not-Qualified', 'Proficient', 'Silver', 'Gold', 'Platinum', 'Diamond'];
-exports.RATINGS = RATINGS;
+const RATINGS = exports.RATINGS = ['Not-Qualified', 'Proficient', 'Silver', 'Gold', 'Platinum', 'Diamond'];
 const getRatingLabel = (rating, labels) => {
   if (rating <= 0) {
     return labels[0];

package/lib/utils/score-bar/score-bar.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getLabelByScorePercentage = exports.getColorByScorePercentage = exports.SCORE_BAR_ERRORS = void 0;
-
 const getValidRange = (score, totalBars, keys) => {
   const scorePercentage = 100 * score / totalBars;
   for (const key of keys) {
@@ -32,10 +31,9 @@ const getLabelByScorePercentage = (score, totalBars, labelMap) => {
   return validLabel || '';
 };
 exports.getLabelByScorePercentage = getLabelByScorePercentage;
-const SCORE_BAR_ERRORS = Object.freeze({
+const SCORE_BAR_ERRORS = exports.SCORE_BAR_ERRORS = Object.freeze({
   INVALID_BAR_COUNT: {
     type: 'INVALID_BAR_COUNT',
     description: 'totalBars can not be less than 1'
   }
-});
-exports.SCORE_BAR_ERRORS = SCORE_BAR_ERRORS;
+});

package/lib/utils/string/string.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.truncateString = exports.formatWord = exports.escapeRegExp = exports.capitalize = exports.appendPx = void 0;
-
 const capitalize = word => {
   if (!word) {
     return '';

package/lib/utils/token-list-input/token-list-input.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getFirstOptionFromGroup = exports.getFirstOption = void 0;
 var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const getFirstOption = options => {
   // pick the first option from the options
   if (options.length > 0) {

package/lib/utils/tokens/tokens.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleDownload = exports.getSortedTokenNames = exports.getRandomDataVariation = exports.filterTableDataBySearchText = exports.dataVariations = void 0;
-
-const dataVariations = [{
+const dataVariations = exports.dataVariations = [{
   title: 'The Great HTML Escape 🎩🌐',
   description: 'Watch out! Our HTML has escaped and is running wild on the web. It\'s causing mischief, adding tags and styles wherever it pleases! <div>🙈</div>'
 }, {
@@ -88,7 +87,6 @@ const dataVariations = [{
  * based on their numerical values.
  *
  */
-exports.dataVariations = dataVariations;
 const getSortedTokenNames = function (obj) {
   let order = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'asc';
   let sortBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.45",
+  "version": "0.3.47-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -64,11 +64,11 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-a11y": "^9.1.0-alpha.3",
-    "@storybook/addon-docs": "^9.1.0-alpha.3",
+    "@storybook/addon-a11y": "^9.0.10",
+    "@storybook/addon-docs": "^9.0.10",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "^9.1.0-alpha.3",
-    "@storybook/test-runner": "^0.22.0",
+    "@storybook/react-webpack5": "^9.0.10",
+    "@storybook/test-runner": "^0.23.0",
     "@testing-library/react": "^11.2.7",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
@@ -86,7 +86,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-storybook": "^9.1.0-alpha.3",
+    "eslint-plugin-storybook": "^9.0.10",
     "eslint-plugin-unused-imports": "^2.0.0",
     "flow-bin": "^0.184.0",
     "gulp": "^4.0.2",
@@ -104,7 +104,7 @@
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",
-    "storybook": "^9.1.0-alpha.3",
+    "storybook": "^9.0.10",
     "storybook-css-modules": "^1.0.8",
     "storybook-vscode-component": "^1.0.9",
     "style-dictionary": "^3.7.1"

package/lib/components/Avatar/Avatar.d.ts

@@ -1,263 +0,0 @@
-import {$ReadOnly, $Values, $Keys} from 'utility-types';
-import * as React from 'react';
-import {
-  JumboSmall,
-  SubTitleLarge,
-  SubTitleMedium,
-  SubTitleSmall,
-} from '../../components/Text';
-import * as COLORS from '../../styles/variables/_color';
-import {
-  colorDangerLightest,
-  colorGrayLightest,
-  colorInformationLightest,
-  colorNeutralLightest,
-  colorSuccessLightest,
-  colorWarningLightest,
-} from '../../styles/variables/_color';
-import classify from '../../utils/classify';
-import type {IconType} from '../Icon';
-import {Icon} from '../Icon';
-import type {StatusSemanticType} from '../StatusIndicator';
-import {StatusIndicator} from '../StatusIndicator';
-import css from './Avatar.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  ring?: string;
-  content?: string;
-  image?: string;
-  icon?: string;
-  text?: string;
-}>;
-export const AVATAR_SIZE = Object.freeze({
-  small: 'small',
-  medium: 'medium',
-  large: 'large',
-  extraLarge: 'extraLarge',
-});
-export const avatarSizeOptions: Array<unknown> = [...Object.keys(AVATAR_SIZE)];
-export type AvatarSize = $Values<typeof AVATAR_SIZE>;
-export const AVATAR_COLOR = Object.freeze({
-  red: colorDangerLightest,
-  orange: colorWarningLightest,
-  green: colorSuccessLightest,
-  blue: colorInformationLightest,
-  gray: colorGrayLightest,
-  indigo: colorNeutralLightest,
-});
-export type AvatarColorType = $Keys<typeof AVATAR_COLOR>;
-export type AvatarProps = {
-  classNames?: ClassNames;
-  size?: AvatarSize;
-  imageSrc?: string;
-  ring?: boolean;
-  icon?: boolean;
-  text?: string;
-  color?: AvatarColorType;
-  style?: unknown;
-  iconName?: string;
-  iconType?: IconType;
-  status?: StatusSemanticType;
-  statusBorderColorToken?: $Keys<typeof COLORS>;
-};
-
-const getAvatarText = (text = '') => {
-  const [firstWord, secondWord] = text.split(' ');
-  const firstChar = firstWord ? firstWord[0].toUpperCase() : '';
-  const secondChar = secondWord ? secondWord[0].toUpperCase() : '';
-  return firstChar + secondChar;
-};
-
-const AvatarTextDecorator = ({
-  avatarText,
-  size,
-  className,
-}: {
-  avatarText: string;
-  size: AvatarSize;
-  className?: string;
-}) => {
-  switch (size) {
-    case 'small':
-      return <SubTitleSmall className={className}>{avatarText}</SubTitleSmall>;
-
-    case 'medium':
-      return (
-        <SubTitleMedium className={className}>{avatarText}</SubTitleMedium>
-      );
-
-    case 'large':
-      return <SubTitleLarge className={className}>{avatarText}</SubTitleLarge>;
-
-    case 'extraLarge':
-      return <JumboSmall className={className}>{avatarText}</JumboSmall>;
-  }
-};
-
-// mapping of iconSize for each avatar size;
-const iconSize = Object.freeze({
-  small: 'small',
-  medium: 'medium',
-  large: 'medium',
-  extraLarge: 'large',
-});
-export type AvatarContentProps = {
-  imageSrc?: string;
-  text?: string;
-  iconName?: string;
-  iconType?: IconType;
-  size: AvatarSize;
-  color?: AvatarColorType;
-  ring?: boolean;
-  status?: StatusSemanticType;
-  statusBorderColorToken?: $Keys<typeof COLORS>;
-  classNames?: ClassNames;
-};
-
-const AvatarConditionalContent = ({
-  imageSrc,
-  text,
-  iconName,
-  size,
-  iconType,
-  color = 'blue',
-  status,
-  statusBorderColorToken,
-  classNames,
-}: AvatarContentProps) => (
-  <div
-    className={classify(
-      css.innerContainer,
-      {
-        [css.alignCenter]: !imageSrc,
-      },
-      classNames?.content,
-    )}
-    style={{
-      '--background-color': AVATAR_COLOR[color],
-    }}
-  >
-    {!!status && (
-      <div className={classify(css.statusIndicatorWrapper, css[size])}>
-        <StatusIndicator
-          status={status}
-          withBorder
-          borderColorToken={statusBorderColorToken}
-        />
-      </div>
-    )}
-
-    {imageSrc ? (
-      <img
-        src={imageSrc}
-        alt="Avatar"
-        className={classify(css.avatar, classNames?.image)}
-      ></img>
-    ) : iconName ? (
-      <Icon
-        name={iconName}
-        type={iconType}
-        size={iconSize[size]}
-        className={classNames?.icon}
-      />
-    ) : text ? (
-      <AvatarTextDecorator
-        avatarText={getAvatarText(text)}
-        size={size}
-        className={classNames?.text}
-      />
-    ) : null}
-  </div>
-);
-
-export const Avatar: React$AbstractComponent<AvatarProps, HTMLDivElement> =
-  React.forwardRef<AvatarProps, HTMLDivElement>(
-    (
-      {
-        classNames,
-        size = AVATAR_SIZE.medium,
-        imageSrc,
-        text,
-        style,
-        iconName,
-        iconType,
-        color,
-        ring = false,
-        status,
-        statusBorderColorToken,
-      }: AvatarProps,
-      ref,
-    ) => (
-      <div
-        className={classify(
-          css.container,
-          {
-            [css.extraLargeSize]: size === 'extraLarge',
-            [css.largeSize]: size === 'large',
-            [css.mediumSize]: size === 'medium',
-            [css.smallSize]: size === 'small',
-          },
-          classNames?.wrapper,
-        )}
-        style={style}
-        ref={ref}
-      >
-        {ring ? (
-          <div className={classify(css.ring, classNames?.ring)}>
-            <div className={css.whiteCircle}>
-              <AvatarConditionalContent
-                imageSrc={imageSrc}
-                text={text}
-                iconName={iconName}
-                iconType={iconType}
-                color={color}
-                size={size}
-                status={status}
-                statusBorderColorToken={statusBorderColorToken}
-                classNames={classNames}
-              />
-            </div>
-          </div>
-        ) : (
-          <AvatarConditionalContent
-            imageSrc={imageSrc}
-            text={text}
-            iconName={iconName}
-            iconType={iconType}
-            color={color}
-            size={size}
-            status={status}
-            statusBorderColorToken={statusBorderColorToken}
-            classNames={classNames}
-          />
-        )}
-      </div>
-    ),
-  );
-export const BaseAvatar = ({
-  classNames,
-  size = AVATAR_SIZE.medium,
-  text = '',
-  style,
-  color = 'blue',
-}: AvatarProps): React.ReactNode => (
-  <div
-    className={classify(
-      css.container,
-      {
-        [css.baseExtraLargeSize]: size === 'extraLarge',
-        [css.baseLargeSize]: size === 'large',
-        [css.baseMediumSize]: size === 'medium',
-        [css.baseSmallSize]: size === 'small',
-      },
-      classNames?.wrapper,
-    )}
-    style={{...style, background: AVATAR_COLOR[color]}}
-  >
-    <AvatarTextDecorator
-      avatarText={text}
-      size={size}
-      className={classNames?.text}
-    />
-  </div>
-);

package/lib/components/Avatar/index.d.ts

@@ -1 +0,0 @@
-export * from './Avatar';