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

package/lib/components/Icon/Icon.js

@@ -1,53 +1,17 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["color", "icon", "sx", "size", "variant", "title"];
-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) { _defineProperty(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; }
 import React, { forwardRef } from 'react';
-import { useGetTheme, useTShirtSize } from '../../hooks';
-import Box from '../Box';
+import IconDefault from './IconDefault';
+import IconSymbol from './IconSymbol';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
-  var theme = 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 = _objectWithoutProperties(props, _excluded);
-  var _useTShirtSize = useTShirtSize({
-      size: size,
-      sizes: theme.tShirtSizes
-    }),
-    sizeProps = _useTShirtSize.sizeProps;
-  var defaultIconColor = theme.defaultIconColor;
-  var resolvedTitle = title !== null && title !== void 0 ? title : _typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
-    name: IconComponent.type.name
-  } : '';
-  return ___EmotionJSX(Box, _extends({
-    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 ___EmotionJSX(IconSymbol, _extends({}, props, {
+      ref: ref
+    }));
+  }
+  return ___EmotionJSX(IconDefault, _extends({}, props, {
+    ref: ref
+  }));
 });
-Icon.displayName = 'Icon';
 export default Icon;

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

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import Earth from '@pingux/mdi-react/EarthIcon';
 import { render, screen } from '@testing-library/react';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
-import Icon from '.';
+import Icon from './Icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-icon';
 var defaultProps = {
@@ -45,40 +45,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 = screen.getByTestId(testId);
-  expect(xsIcon).toHaveStyleRule('width', '9px');
-});
-test('icon renders correct xsmall tshirt size', function () {
-  getComponent({
-    size: 'xs'
-  });
-  var xsIcon = screen.getByTestId(testId);
-  expect(xsIcon).toHaveStyleRule('width', '15px');
-});
-test('icon renders correct small tshirt size', function () {
-  getComponent({
-    size: 'sm'
-  });
-  var smIcon = screen.getByTestId(testId);
-  expect(smIcon).toHaveStyleRule('width', '20px');
-});
-test('icon renders correct medium tshirt size', function () {
-  getComponent({
-    size: 'md'
-  });
-  var mdIcon = screen.getByTestId(testId);
-  expect(mdIcon).toHaveStyleRule('width', '25px');
-});
-test('icon renders with associated title', function () {
-  getComponent();
   var icon = screen.getByTestId(testId);
-  var title = 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');
+  screen.getByText(/search/i);
 });

package/lib/components/Icon/IconDefault.js

@@ -0,0 +1,53 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["color", "icon", "sx", "size", "variant", "title"];
+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) { _defineProperty(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; }
+import React, { forwardRef } from 'react';
+import { useGetTheme, useTShirtSize } from '../../hooks';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var IconDefault = /*#__PURE__*/forwardRef(function (props, ref) {
+  var theme = 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 = _objectWithoutProperties(props, _excluded);
+  var _useTShirtSize = useTShirtSize({
+      size: size,
+      sizes: theme.tShirtSizes
+    }),
+    sizeProps = _useTShirtSize.sizeProps;
+  var defaultIconColor = theme.defaultIconColor;
+  var resolvedTitle = title !== null && title !== void 0 ? title : _typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
+    name: IconComponent.type.name
+  } : '';
+  return ___EmotionJSX(Box, _extends({
+    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';
+export default IconDefault;

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

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef } from 'react';
+import Earth from '@pingux/mdi-react/EarthIcon';
+import { render, screen } from '@testing-library/react';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import Icon from './IconDefault';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId,
+  icon: Earth,
+  title: {
+    id: 'title-id',
+    name: 'Earth Icon'
+  }
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Icon, _extends({}, 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__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX("svg", _extends({
+    ref: ref
+  }, props, {
+    "aria-labelledby": "id"
+  }), ___EmotionJSX("title", {
+    id: "id"
+  }, "title"));
+});
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Icon, _extends({
+      icon: SVGTestComponent
+    }, props));
+  }
+});
+test('default icon', function () {
+  getComponent();
+  var icon = screen.getByTestId(testId);
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+});
+test('icon renders correct xxsmall tshirt size', function () {
+  getComponent({
+    size: 'xxs'
+  });
+  var xsIcon = screen.getByTestId(testId);
+  expect(xsIcon).toHaveStyleRule('width', '9px');
+});
+test('icon renders correct xsmall tshirt size', function () {
+  getComponent({
+    size: 'xs'
+  });
+  var xsIcon = screen.getByTestId(testId);
+  expect(xsIcon).toHaveStyleRule('width', '15px');
+});
+test('icon renders correct small tshirt size', function () {
+  getComponent({
+    size: 'sm'
+  });
+  var smIcon = screen.getByTestId(testId);
+  expect(smIcon).toHaveStyleRule('width', '20px');
+});
+test('icon renders correct medium tshirt size', function () {
+  getComponent({
+    size: 'md'
+  });
+  var mdIcon = screen.getByTestId(testId);
+  expect(mdIcon).toHaveStyleRule('width', '25px');
+});
+test('icon renders with associated title', function () {
+  getComponent();
+  var icon = screen.getByTestId(testId);
+  var title = screen.getByText('Earth Icon');
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveAttribute('aria-labelledby', 'title-id');
+  expect(title).toBeInTheDocument();
+});

package/lib/components/Icon/IconSymbol.js

@@ -0,0 +1,50 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["icon", "className", "title", "size", "color", "hasFill"];
+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) { _defineProperty(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; }
+import React, { forwardRef } from 'react';
+import { useGetTheme, useTShirtSize } from '../../hooks';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var IconSymbol = /*#__PURE__*/forwardRef(function (props, ref) {
+  var theme = 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 = _objectWithoutProperties(props, _excluded);
+  var _useTShirtSize = useTShirtSize({
+      size: size,
+      sizes: theme.tShirtSizes
+    }),
+    sizeProps = _useTShirtSize.sizeProps;
+  return ___EmotionJSX(Box, _extends({
+    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';
+export default IconSymbol;

package/lib/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/components/Icon/IconSymbol.test.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import IconSymbol from './IconSymbol';
+import { jsx as ___EmotionJSX } from "@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 render(___EmotionJSX(IconSymbol, _extends({}, defaultProps, props)));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(IconSymbol, _extends({
+      icon: testIcon
+    }, props));
+  }
+});
+test('default icon', function () {
+  getComponent();
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveClass('material-symbols-outlined');
+  screen.getByText(/search/i);
+});
+test('default icon', function () {
+  getComponent({
+    icon: 'face'
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveClass('material-symbols-outlined');
+  screen.getByText(/face/i);
+});
+test('size prop', function () {
+  getComponent({
+    size: 'sm'
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveStyle('font-size: 20px');
+});
+test('color prop', function () {
+  getComponent({
+    color: 'red'
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveStyle('color: red');
+});
+test('hasFill prop', function () {
+  getComponent({
+    hasFill: true
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveStyle("font-variation-settings: 'FILL' 1");
+});
+test('title prop', function () {
+  getComponent();
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveAttribute('title', 'Search Icon');
+});
+test('className prop', function () {
+  var customClass = 'custom-icon-class';
+  getComponent({
+    className: customClass
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveClass(customClass);
+});

package/lib/components/Icon/MaterialSymbolIcon.stories.js

@@ -0,0 +1,200 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+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) { _defineProperty(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; }
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, Icon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
+import { sizeArgTypes } from '../../utils/docUtils/iconSizeProps';
+import IconReadme from './IconSymbol.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/MaterialSymbolIcon',
+  component: Icon,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: _objectSpread({
+    icon: {
+      control: {
+        type: {
+          name: 'string'
+        }
+      },
+      description: 'The font icon to render. List of font icons at https://marella.github.io/material-symbols/demo/'
+    }
+  }, sizeArgTypes),
+  args: {
+    icon: 'disabled_by_default',
+    className: 'material-symbols-outlined',
+    size: 'md'
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Icon, _extends({}, args, {
+    icon: "search",
+    title: {
+      name: 'Search Icon'
+    }
+  }));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.icon["default"]
+  }
+};
+var rowHeadings = ['Size', 'Code Example', 'Icon Example'];
+export var Sizes = function Sizes() {
+  return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, _mapInstanceProperty(rowHeadings).call(rowHeadings, function (head) {
+    return ___EmotionJSX(TableCell, {
+      isHeading: true,
+      key: head
+    }, head);
+  }))), ___EmotionJSX(TableBody, {
+    sx: {
+      borderBottom: 'unset'
+    }
+  }, ___EmotionJSX(TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, null, "XXS | 9px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="xxs"/>')), ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: "search",
+    title: {
+      name: 'Search Icon'
+    },
+    size: "xxs"
+  }))), ___EmotionJSX(TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, null, "XS | 15px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="xs"/>')), ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: "search",
+    size: "xs",
+    title: {
+      name: 'Search Icon'
+    }
+  }))), ___EmotionJSX(TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, null, "SM | 20px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="sm"/>')), ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: "search",
+    size: "sm",
+    title: {
+      name: 'Search Icon'
+    }
+  }))), ___EmotionJSX(TableRow, {
+    height: "80px",
+    bg: "transparent !important"
+  }, ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Text, null, "MD | 25px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
+    fontFamily: "monospace"
+  }, '<Icon  icon="search" size="md"/>')), ___EmotionJSX(TableCell, {
+    justifyContent: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: "search",
+    size: "md",
+    title: {
+      name: 'Search Icon'
+    }
+  })))));
+};
+export var CommonlyUsed = function CommonlyUsed() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: "account_circle",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Account Icon'
+    },
+    hasFill: true
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: "groups",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Account Group Icon'
+    },
+    hasFill: true
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: "lock",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Lock Icon'
+    },
+    hasFill: true
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: "search",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Search Icon'
+    },
+    hasFill: true
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    mb: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: "notifications",
+    color: "accent.40",
+    size: "sm",
+    title: {
+      name: 'Notification Icon'
+    },
+    hasFill: true
+  })));
+};

package/lib/index.js

@@ -1,7 +1,7 @@
 // NOTE: Named exports must be unique across files, otherwise collisions will occur.
 
 /* eslint-disable import/export */
-
+import '@material-symbols/font-400';
 export { default as AccordionGridGroup } from './components/AccordionGridGroup';
 export * from './components/AccordionGridGroup';
 export { default as AccordionGridItem } from './components/AccordionGridItem';