@pingux/astro 2.170.1-alpha.0 → 2.172.0-alpha.0

package/lib/cjs/components/Avatar/Avatar.js

@@ -21,8 +21,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
+var _constants = require("./constants");
+var _getColorFromUuid = _interopRequireDefault(require("./getColorFromUuid"));
 var _react2 = require("@emotion/react");
-var _excluded = ["alt", "defaultText", "color", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
+var _excluded = ["alt", "defaultText", "color", "colorId", "className", "size", "src", "sx", "children", "isSquare", "isLogo"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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 ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -32,6 +34,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _props$defaultText = props.defaultText,
     defaultText = _props$defaultText === void 0 ? 'AA' : _props$defaultText,
     color = props.color,
+    colorId = props.colorId,
     className = props.className,
     _props$size = props.size,
     size = _props$size === void 0 ? 'sm' : _props$size,
@@ -41,7 +44,15 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isSquare = props.isSquare,
     isLogo = props.isLogo,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(color), color), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
+
+  // this will use color prop if provided,
+  // else will map colorId to a color, else defaults to 'green'
+  var finalColor = (0, _react.useMemo)(function () {
+    if (color) return color;
+    if (colorId) return (0, _getColorFromUuid["default"])(colorId, _constants.avatarColors);
+    return 'green';
+  }, [color, colorId, _constants.avatarColors]);
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(finalColor), finalColor), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
     classNames = _useStatusClasses.classNames;
   if (src) {
     return (0, _react2.jsx)(_themeUi.Box, (0, _extends2["default"])({

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

@@ -1,16 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _faker = require("@faker-js/faker");
+var _nodeCrypto = require("node:crypto");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _constants = require("./constants");
+var _getColorFromUuid = _interopRequireDefault(require("./getColorFromUuid"));
 var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var src = _faker.faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1');
+var datatestId = 'avatar-component';
 var defaultProps = {
-  src: src
+  src: src,
+  'data-testid': datatestId
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -43,4 +52,89 @@ test('an avatar is rendered with custom alt', function () {
   });
   var avatar = _testWrapper.screen.getByText('KL');
   expect(avatar).toBeInTheDocument();
+});
+describe('getColorFromUUID', function () {
+  test('returns a consistent color for the same UUID', function () {
+    var uuid = '123e4567-e89b-12d3-a456-426614174000';
+    var result1 = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+    var result2 = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+    expect(result1).toBe(result2);
+  });
+  test('returns a color from the provided array', function () {
+    var uuid = 'random-id';
+    var result = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+    expect(_constants.avatarColors).toContain(result);
+  });
+  test('distributes colors differently for different UUIDs', function () {
+    var colorA = (0, _getColorFromUuid["default"])('id-1', _constants.avatarColors);
+    var colorB = (0, _getColorFromUuid["default"])('id-2', _constants.avatarColors);
+
+    // While collisions are mathematically possible, for 2 items in a 10-item list,
+    // these specific IDs yield different results in FNV-1a.
+    expect(colorA).not.toBe(colorB);
+  });
+  test('throws error if color array is empty', function () {
+    expect(function () {
+      return (0, _getColorFromUuid["default"])('uuid', []);
+    }).toThrow('Color array cannot be empty.');
+  });
+  test('uses the specific color class when color prop is provided', function () {
+    getComponent({
+      color: 'blue',
+      colorId: 'some-id'
+    });
+    var avatar = _testWrapper.screen.getByTestId(datatestId);
+
+    // Checking for 'is-blue'
+    expect(avatar).toHaveClass('is-blue');
+  });
+  test('applies a hashed color class from colorId', function () {
+    var uuid = '550e8400-e29b-41d4-a716-446655440000';
+    getComponent({
+      colorId: uuid
+    });
+    var avatar = _testWrapper.screen.getByTestId(datatestId);
+
+    // We check that it has *a* class starting with 'is-'
+    // and specifically isn't the default 'is-green'
+    var classList = (0, _from["default"])(avatar.classList);
+    var colorClass = (0, _find["default"])(classList).call(classList, function (cls) {
+      return (0, _startsWith["default"])(cls).call(cls, 'is-');
+    });
+    expect(colorClass).toBeDefined();
+    expect(avatar).not.toHaveClass('is-green');
+  });
+  test('defaults to is-green when no color props are passed', function () {
+    getComponent();
+    var avatar = _testWrapper.screen.getByTestId(datatestId);
+    expect(avatar).toHaveClass('is-green');
+  });
+});
+describe('getColorFromUUID Distribution', function () {
+  test('distributes 10,000 UUIDs evenly across 10 colors', function () {
+    var iterations = 10000;
+    var distribution = {};
+
+    // Initialize counts
+    (0, _forEach["default"])(_constants.avatarColors).call(_constants.avatarColors, function (c) {
+      distribution[c] = 0;
+    });
+
+    // Generate and hash
+    for (var i = 0; i < iterations; i += 1) {
+      // Use the imported randomUUID function directly
+      var uuid = (0, _nodeCrypto.randomUUID)();
+      var selectedColor = (0, _getColorFromUuid["default"])(uuid, _constants.avatarColors);
+      distribution[selectedColor] += 1;
+    }
+    var expectedMean = iterations / _constants.avatarColors.length;
+    // 15% variance is a safe threshold for 10k iterations
+    var allowedVariance = 0.15;
+    (0, _forEach["default"])(_constants.avatarColors).call(_constants.avatarColors, function (color) {
+      var count = distribution[color];
+      // Assert that each color is roughly 10% of the total
+      expect(count).toBeGreaterThan(expectedMean * (1 - allowedVariance));
+      expect(count).toBeLessThan(expectedMean * (1 + allowedVariance));
+    });
+  });
 });

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

@@ -0,0 +1,2 @@
+declare const avatarColors: string[];
+export { avatarColors };

package/lib/cjs/components/Avatar/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.avatarColors = void 0;
+var avatarColors = exports.avatarColors = ['green', 'purple', 'pink', 'red', 'orange', 'yellow', 'teal', 'cyan', 'blue', 'indigo'];

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

@@ -0,0 +1,2 @@
+declare const getColorFromUUID: <T>(uuid: string, colors: T[]) => T;
+export default getColorFromUUID;

package/lib/cjs/components/Avatar/getColorFromUuid.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _imul = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/math/imul"));
+// * Maps a UUID to a specific color from a provided array.
+//  * @param uuid - The unique identifier string.
+//  * @param colors - An array of color strings/objects.
+//  * @returns A single color from the array.
+
+var getColorFromUUID = function getColorFromUUID(uuid, colors) {
+  if (colors.length === 0) {
+    throw new Error('Color array cannot be empty.');
+  }
+
+  // FNV-1a Hash implementation
+  // This spreads the bits of the UUID string evenly across a 32-bit integer
+  var hash = 2166136261;
+  for (var i = 0; i < uuid.length; i += 1) {
+    /* eslint-disable no-bitwise */
+    hash ^= uuid.charCodeAt(i);
+    // Standard FNV prime (using Math.imul for 32-bit integer multiplication)
+
+    hash = (0, _imul["default"])(hash, 16777619);
+  }
+
+  // Convert to an unsigned index using the modulo operator
+  // The >>> 0 ensures we are dealing with an unsigned 32-bit integer
+  /* eslint-disable no-bitwise */
+  var index = (hash >>> 0) % colors.length;
+  return colors[index];
+};
+var _default = exports["default"] = getColorFromUUID;

package/lib/cjs/components/Icon/Icon.js

@@ -1,63 +1,29 @@
 "use strict";
 
-var _typeof3 = require("@babel/runtime-corejs3/helpers/typeof");
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _hooks = require("../../hooks");
-var _Box = _interopRequireDefault(require("../Box"));
+var _IconDefault = _interopRequireDefault(require("./IconDefault"));
+var _IconSymbol = _interopRequireDefault(require("./IconSymbol"));
 var _react2 = require("@emotion/react");
-var _excluded = ["color", "icon", "sx", "size", "variant", "title"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _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 ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
 var Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var theme = (0, _hooks.useGetTheme)();
-  var color = props.color,
-    IconComponent = props.icon,
-    sx = props.sx,
-    _props$size = props.size,
-    size = _props$size === void 0 ? theme.defaultIconSize : _props$size,
-    variant = props.variant,
-    title = props.title,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useTShirtSize = (0, _hooks.useTShirtSize)({
-      size: size,
-      sizes: theme.tShirtSizes
-    }),
-    sizeProps = _useTShirtSize.sizeProps;
-  var defaultIconColor = theme.defaultIconColor;
-  var resolvedTitle = title !== null && title !== void 0 ? title : (0, _typeof2["default"])(IconComponent) === 'object' && 'type' in IconComponent ? {
-    name: IconComponent.type.name
-  } : '';
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    as: IconComponent,
-    ref: ref,
-    role: "img",
-    title: resolvedTitle,
-    variant: variant,
-    size: sizeProps.size,
-    sx: _objectSpread({
-      fill: color || defaultIconColor,
-      minWidth: sizeProps.size
-    }, sx)
-  }, others));
+  var icon = props.icon;
+  if (typeof icon === 'string') {
+    return (0, _react2.jsx)(_IconSymbol["default"], (0, _extends2["default"])({}, props, {
+      ref: ref
+    }));
+  }
+  return (0, _react2.jsx)(_IconDefault["default"], (0, _extends2["default"])({}, props, {
+    ref: ref
+  }));
 });
-Icon.displayName = 'Icon';
 var _default = exports["default"] = Icon;

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

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
 var _react2 = require("@testing-library/react");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
-var _ = _interopRequireDefault(require("."));
+var _Icon = _interopRequireDefault(require("./Icon"));
 var _react3 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
 var testId = 'test-icon';
@@ -24,7 +24,7 @@ var defaultProps = {
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _react2.render)((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _react2.render)((0, _react3.jsx)(_Icon["default"], (0, _extends2["default"])({}, defaultProps, props)));
 };
 
 // The mdi-react and @pingux/mid-react libraries don't support ref forwarding
@@ -42,7 +42,7 @@ var SVGTestComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({
   renderComponent: function renderComponent(props) {
-    return (0, _react3.jsx)(_["default"], (0, _extends2["default"])({
+    return (0, _react3.jsx)(_Icon["default"], (0, _extends2["default"])({
       icon: SVGTestComponent
     }, props));
   }
@@ -53,40 +53,11 @@ test('default icon', function () {
   expect(icon).toBeInstanceOf(SVGSVGElement);
   expect(icon).toBeInTheDocument();
 });
-test('icon renders correct xxsmall tshirt size', function () {
+test('icon render for type symbol', function () {
   getComponent({
-    size: 'xxs'
+    icon: 'search'
   });
-  var xsIcon = _react2.screen.getByTestId(testId);
-  expect(xsIcon).toHaveStyleRule('width', '9px');
-});
-test('icon renders correct xsmall tshirt size', function () {
-  getComponent({
-    size: 'xs'
-  });
-  var xsIcon = _react2.screen.getByTestId(testId);
-  expect(xsIcon).toHaveStyleRule('width', '15px');
-});
-test('icon renders correct small tshirt size', function () {
-  getComponent({
-    size: 'sm'
-  });
-  var smIcon = _react2.screen.getByTestId(testId);
-  expect(smIcon).toHaveStyleRule('width', '20px');
-});
-test('icon renders correct medium tshirt size', function () {
-  getComponent({
-    size: 'md'
-  });
-  var mdIcon = _react2.screen.getByTestId(testId);
-  expect(mdIcon).toHaveStyleRule('width', '25px');
-});
-test('icon renders with associated title', function () {
-  getComponent();
   var icon = _react2.screen.getByTestId(testId);
-  var title = _react2.screen.getByText('Earth Icon');
-  expect(icon).toBeInstanceOf(SVGSVGElement);
-  expect(icon).toBeInTheDocument();
-  expect(icon).toHaveAttribute('aria-labelledby', 'title-id');
-  expect(title).toBeInTheDocument();
+  expect(icon).toHaveClass('material-symbols-outlined');
+  _react2.screen.getByText(/search/i);
 });

package/lib/cjs/components/Icon/IconDefault.d.ts

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

package/lib/cjs/components/Icon/IconDefault.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _typeof3 = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
+var _Box = _interopRequireDefault(require("../Box"));
+var _react2 = require("@emotion/react");
+var _excluded = ["color", "icon", "sx", "size", "variant", "title"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _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 ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var IconDefault = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var theme = (0, _hooks.useGetTheme)();
+  var color = props.color,
+    IconComponent = props.icon,
+    sx = props.sx,
+    _props$size = props.size,
+    size = _props$size === void 0 ? theme.defaultIconSize : _props$size,
+    variant = props.variant,
+    title = props.title,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useTShirtSize = (0, _hooks.useTShirtSize)({
+      size: size,
+      sizes: theme.tShirtSizes
+    }),
+    sizeProps = _useTShirtSize.sizeProps;
+  var defaultIconColor = theme.defaultIconColor;
+  var resolvedTitle = title !== null && title !== void 0 ? title : (0, _typeof2["default"])(IconComponent) === 'object' && 'type' in IconComponent ? {
+    name: IconComponent.type.name
+  } : '';
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    as: IconComponent,
+    ref: ref,
+    role: "img",
+    title: resolvedTitle,
+    variant: variant,
+    size: sizeProps.size,
+    sx: _objectSpread({
+      fill: color || defaultIconColor,
+      minWidth: sizeProps.size
+    }, sx)
+  }, others));
+});
+IconDefault.displayName = 'Icon';
+var _default = exports["default"] = IconDefault;

package/lib/cjs/components/Icon/IconDefault.test.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
+var _react2 = require("@testing-library/react");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _IconDefault = _interopRequireDefault(require("./IconDefault"));
+var _react3 = require("@emotion/react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId,
+  icon: _EarthIcon["default"],
+  title: {
+    id: 'title-id',
+    name: 'Earth Icon'
+  }
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_IconDefault["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+// The mdi-react and @pingux/mid-react libraries don't support ref forwarding
+// A simple implementation of an SVG component demonstrates ref forwarding
+var SVGTestComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react3.jsx)("svg", (0, _extends2["default"])({
+    ref: ref
+  }, props, {
+    "aria-labelledby": "id"
+  }), (0, _react3.jsx)("title", {
+    id: "id"
+  }, "title"));
+});
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_IconDefault["default"], (0, _extends2["default"])({
+      icon: SVGTestComponent
+    }, props));
+  }
+});
+test('default icon', function () {
+  getComponent();
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+});
+test('icon renders correct xxsmall tshirt size', function () {
+  getComponent({
+    size: 'xxs'
+  });
+  var xsIcon = _react2.screen.getByTestId(testId);
+  expect(xsIcon).toHaveStyleRule('width', '9px');
+});
+test('icon renders correct xsmall tshirt size', function () {
+  getComponent({
+    size: 'xs'
+  });
+  var xsIcon = _react2.screen.getByTestId(testId);
+  expect(xsIcon).toHaveStyleRule('width', '15px');
+});
+test('icon renders correct small tshirt size', function () {
+  getComponent({
+    size: 'sm'
+  });
+  var smIcon = _react2.screen.getByTestId(testId);
+  expect(smIcon).toHaveStyleRule('width', '20px');
+});
+test('icon renders correct medium tshirt size', function () {
+  getComponent({
+    size: 'md'
+  });
+  var mdIcon = _react2.screen.getByTestId(testId);
+  expect(mdIcon).toHaveStyleRule('width', '25px');
+});
+test('icon renders with associated title', function () {
+  getComponent();
+  var icon = _react2.screen.getByTestId(testId);
+  var title = _react2.screen.getByText('Earth Icon');
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveAttribute('aria-labelledby', 'title-id');
+  expect(title).toBeInTheDocument();
+});

package/lib/cjs/components/Icon/IconSymbol.d.ts

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

package/lib/cjs/components/Icon/IconSymbol.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
+var _Box = _interopRequireDefault(require("../Box"));
+var _react2 = require("@emotion/react");
+var _excluded = ["icon", "className", "title", "size", "color", "hasFill"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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 ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var IconSymbol = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var theme = (0, _hooks.useGetTheme)();
+  var _props$icon = props.icon,
+    icon = _props$icon === void 0 ? 'disabled_by_default' : _props$icon,
+    className = props.className,
+    title = props.title,
+    _props$size = props.size,
+    size = _props$size === void 0 ? theme.defaultIconSize : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? theme.defaultIconColor : _props$color,
+    hasFill = props.hasFill,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useTShirtSize = (0, _hooks.useTShirtSize)({
+      size: size,
+      sizes: theme.tShirtSizes
+    }),
+    sizeProps = _useTShirtSize.sizeProps;
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    as: "span",
+    ref: ref,
+    className: "material-symbols-outlined ".concat(className || ''),
+    title: title === null || title === void 0 ? void 0 : title.name
+  }, rest, {
+    sx: _objectSpread(_objectSpread({}, rest.sx), {}, {
+      color: color,
+      fontSize: sizeProps.size,
+      fontVariationSettings: hasFill ? "'FILL' 1" : "'FILL' 0"
+    })
+  }), icon);
+});
+IconSymbol.displayName = 'Icon';
+var _default = exports["default"] = IconSymbol;