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

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;

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

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Icon/Icon" />
+
+# Icon
+
+Icons are small images that represent concepts or capabilities that often provide information or lead users to other pages within the application. 
+
+Icon should be:
+- Centrally aligned when used in a group with an appropriate amount of space between them.
+- Paired with text or a tooltip when its intention is not immediately evident. 
+- Relatively sized when used with text.
+
+Icon shouldn’t:
+- Include letters in the icon design.
+- Be randomly scaled to fit the layout.
+
+Regarding sizing, this component uses the **1em x 1em** container by default and maintains the aspect ratios. You can:
+
+- Use the theme to color the icon.
+  
+- Use font icon text from the [Material Symbol Library](https://marella.github.io/material-symbols/demo/)
+
+It is built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the available [props from Theme-UI](https://theme-ui.com/sx-prop).
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+#### Labelling
+
+The Icon component accepts the title prop:
+`title={{ id: 'unique id', name: 'short description of the icon'}}`.
+The `name` will be passed inside title attribute of span element.
+The `id` is optional. If not specified, it will be generated automatically.
+This is needed to make font icon accessible.
+
+#### Screen Readers
+
+If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.
+
+
+
+

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _IconSymbol = _interopRequireDefault(require("./IconSymbol"));
+var _react3 = require("@emotion/react");
+var testId = 'test-icon';
+var testIcon = 'Search';
+var defaultProps = {
+  'data-testid': testId,
+  icon: testIcon,
+  title: {
+    id: 'title-id',
+    name: 'Search Icon'
+  }
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_IconSymbol["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_IconSymbol["default"], (0, _extends2["default"])({
+      icon: testIcon
+    }, props));
+  }
+});
+test('default icon', function () {
+  getComponent();
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveClass('material-symbols-outlined');
+  _react2.screen.getByText(/search/i);
+});
+test('default icon', function () {
+  getComponent({
+    icon: 'face'
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveClass('material-symbols-outlined');
+  _react2.screen.getByText(/face/i);
+});
+test('size prop', function () {
+  getComponent({
+    size: 'sm'
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveStyle('font-size: 20px');
+});
+test('color prop', function () {
+  getComponent({
+    color: 'red'
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveStyle('color: red');
+});
+test('hasFill prop', function () {
+  getComponent({
+    hasFill: true
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveStyle("font-variation-settings: 'FILL' 1");
+});
+test('title prop', function () {
+  getComponent();
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveAttribute('title', 'Search Icon');
+});
+test('className prop', function () {
+  var customClass = 'custom-icon-class';
+  getComponent({
+    className: customClass
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toHaveClass(customClass);
+});

package/lib/cjs/components/Icon/MaterialSymbolIcon.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { IconProps } from '../../types';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn<IconProps>;
+export declare const Sizes: StoryFn;
+export declare const CommonlyUsed: StoryFn;