@leafygreen-ui/icon 11.20.1 → 11.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "11.20.1",
+  "version": "11.21.0",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",

package/src/generated/AllProducts.tsx

@@ -0,0 +1,45 @@
+/**
+* This is a generated file. Do not modify it manually.
+*
+* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+* @checksum dbd199479a1021c896ec23bcdb476edc
+*/
+import * as React from "react";
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface AllProductsProps extends LGGlyph.ComponentProps {}
+const AllProducts = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: AllProductsProps) => {
+  const fillStyle = css`
+        color: ${fill};
+      `;
+  const noFlexShrink = css`
+        flex-shrink: 0;
+      `;
+  const accessibleProps = generateAccessibleProps(role, 'AllProducts', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['aria-labelledby']: ariaLabelledby
+  });
+  return <svg className={cx({
+    [fillStyle]: fill != null
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M2.5 3.5C2.5 2.94772 2.94772 2.5 3.5 2.5H4.5C5.05228 2.5 5.5 2.94772 5.5 3.5V4.5C5.5 5.05228 5.05228 5.5 4.5 5.5H3.5C2.94772 5.5 2.5 5.05228 2.5 4.5V3.5Z" fill={'currentColor'} /><path d="M6.5 3.5C6.5 2.94772 6.94772 2.5 7.5 2.5H8.5C9.05228 2.5 9.5 2.94772 9.5 3.5V4.5C9.5 5.05228 9.05228 5.5 8.5 5.5H7.5C6.94772 5.5 6.5 5.05228 6.5 4.5V3.5Z" fill={'currentColor'} /><path d="M11.5 2.5C10.9477 2.5 10.5 2.94772 10.5 3.5V4.5C10.5 5.05228 10.9477 5.5 11.5 5.5H12.5C13.0523 5.5 13.5 5.05228 13.5 4.5V3.5C13.5 2.94772 13.0523 2.5 12.5 2.5H11.5Z" fill={'currentColor'} /><path d="M2.5 7.5C2.5 6.94772 2.94772 6.5 3.5 6.5H4.5C5.05228 6.5 5.5 6.94772 5.5 7.5V8.5C5.5 9.05228 5.05228 9.5 4.5 9.5H3.5C2.94772 9.5 2.5 9.05228 2.5 8.5V7.5Z" fill={'currentColor'} /><path d="M7.5 6.5C6.94772 6.5 6.5 6.94772 6.5 7.5V8.5C6.5 9.05228 6.94772 9.5 7.5 9.5H8.5C9.05228 9.5 9.5 9.05228 9.5 8.5V7.5C9.5 6.94772 9.05228 6.5 8.5 6.5H7.5Z" fill={'currentColor'} /><path d="M10.5 7.5C10.5 6.94772 10.9477 6.5 11.5 6.5H12.5C13.0523 6.5 13.5 6.94772 13.5 7.5V8.5C13.5 9.05228 13.0523 9.5 12.5 9.5H11.5C10.9477 9.5 10.5 9.05228 10.5 8.5V7.5Z" fill={'currentColor'} /><path d="M3.5 10.5C2.94772 10.5 2.5 10.9477 2.5 11.5V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H4.5C5.05228 13.5 5.5 13.0523 5.5 12.5V11.5C5.5 10.9477 5.05228 10.5 4.5 10.5H3.5Z" fill={'currentColor'} /><path d="M6.5 11.5C6.5 10.9477 6.94772 10.5 7.5 10.5H8.5C9.05228 10.5 9.5 10.9477 9.5 11.5V12.5C9.5 13.0523 9.05228 13.5 8.5 13.5H7.5C6.94772 13.5 6.5 13.0523 6.5 12.5V11.5Z" fill={'currentColor'} /><path d="M11.5 10.5C10.9477 10.5 10.5 10.9477 10.5 11.5V12.5C10.5 13.0523 10.9477 13.5 11.5 13.5H12.5C13.0523 13.5 13.5 13.0523 13.5 12.5V11.5C13.5 10.9477 13.0523 10.5 12.5 10.5H11.5Z" fill={'currentColor'} /></svg>;
+};
+AllProducts.displayName = 'AllProducts';
+AllProducts.isGlyph = true;
+AllProducts.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string
+};
+export default AllProducts;

package/src/generated/List.tsx

@@ -1,13 +1,12 @@
 /**
- * This is a generated file. Do not modify it manually.
- *
- * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
- * @checksum 2f6fd7ab3c0fa1b30f13a813cae7e765
- */
-import { css, cx } from '@leafygreen-ui/emotion';
+* This is a generated file. Do not modify it manually.
+*
+* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+* @checksum 13856fbbed35bc479e5113e9f3561e8e
+*/
+import * as React from "react";
 import PropTypes from 'prop-types';
-import * as React from 'react';
-
+import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ListProps extends LGGlyph.ComponentProps {}
@@ -22,64 +21,25 @@ const List = ({
   ...props
 }: ListProps) => {
   const fillStyle = css`
-    color: ${fill};
-  `;
+        color: ${fill};
+      `;
   const noFlexShrink = css`
-    flex-shrink: 0;
-  `;
+        flex-shrink: 0;
+      `;
   const accessibleProps = generateAccessibleProps(role, 'List', {
     title,
     ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby,
+    ['aria-labelledby']: ariaLabelledby
   });
-  return (
-    <svg
-      className={cx(
-        {
-          [fillStyle]: fill != null,
-        },
-        noFlexShrink,
-        className,
-      )}
-      height={typeof size === 'number' ? size : sizeMap[size]}
-      width={typeof size === 'number' ? size : sizeMap[size]}
-      role={role}
-      {...accessibleProps}
-      {...props}
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M3.125 2.75C2.43464 2.75 1.875 3.30964 1.875 4C1.875 4.69036 2.43464 5.25 3.125 5.25C3.81536 5.25 4.375 4.69036 4.375 4C4.375 3.30964 3.81536 2.75 3.125 2.75Z"
-        fill={'currentColor'}
-      />
-      <path
-        d="M3.125 6.75C2.43464 6.75 1.875 7.30964 1.875 8C1.875 8.69036 2.43464 9.25 3.125 9.25C3.81536 9.25 4.375 8.69036 4.375 8C4.375 7.30964 3.81536 6.75 3.125 6.75Z"
-        fill={'currentColor'}
-      />
-      <path
-        d="M1.875 12C1.875 11.3096 2.43464 10.75 3.125 10.75C3.81536 10.75 4.375 11.3096 4.375 12C4.375 12.6904 3.81536 13.25 3.125 13.25C2.43464 13.25 1.875 12.6904 1.875 12Z"
-        fill={'currentColor'}
-      />
-      <path
-        d="M6.625 3C6.07272 3 5.625 3.44772 5.625 4C5.625 4.55228 6.07272 5 6.625 5H13.125C13.6773 5 14.125 4.55228 14.125 4C14.125 3.44772 13.6773 3 13.125 3H6.625Z"
-        fill={'currentColor'}
-      />
-      <path
-        d="M5.625 8C5.625 7.44772 6.07272 7 6.625 7H13.125C13.6773 7 14.125 7.44772 14.125 8C14.125 8.55228 13.6773 9 13.125 9H6.625C6.07272 9 5.625 8.55228 5.625 8Z"
-        fill={'currentColor'}
-      />
-      <path
-        d="M6.625 11C6.07272 11 5.625 11.4477 5.625 12C5.625 12.5523 6.07272 13 6.625 13H13.125C13.6773 13 14.125 12.5523 14.125 12C14.125 11.4477 13.6773 11 13.125 11H6.625Z"
-        fill={'currentColor'}
-      />
-    </svg>
-  );
+  return <svg className={cx({
+    [fillStyle]: fill != null
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M3.125 2.75C2.43464 2.75 1.875 3.30964 1.875 4C1.875 4.69036 2.43464 5.25 3.125 5.25C3.81536 5.25 4.375 4.69036 4.375 4C4.375 3.30964 3.81536 2.75 3.125 2.75Z" fill={'currentColor'} /><path d="M3.125 6.75C2.43464 6.75 1.875 7.30964 1.875 8C1.875 8.69036 2.43464 9.25 3.125 9.25C3.81536 9.25 4.375 8.69036 4.375 8C4.375 7.30964 3.81536 6.75 3.125 6.75Z" fill={'currentColor'} /><path d="M1.875 12C1.875 11.3096 2.43464 10.75 3.125 10.75C3.81536 10.75 4.375 11.3096 4.375 12C4.375 12.6904 3.81536 13.25 3.125 13.25C2.43464 13.25 1.875 12.6904 1.875 12Z" fill={'currentColor'} /><path d="M6.625 3C6.07272 3 5.625 3.44772 5.625 4C5.625 4.55228 6.07272 5 6.625 5H13.125C13.6773 5 14.125 4.55228 14.125 4C14.125 3.44772 13.6773 3 13.125 3H6.625Z" fill={'currentColor'} /><path d="M5.625 8C5.625 7.44772 6.07272 7 6.625 7H13.125C13.6773 7 14.125 7.44772 14.125 8C14.125 8.55228 13.6773 9 13.125 9H6.625C6.07272 9 5.625 8.55228 5.625 8Z" fill={'currentColor'} /><path d="M6.625 11C6.07272 11 5.625 11.4477 5.625 12C5.625 12.5523 6.07272 13 6.625 13H13.125C13.6773 13 14.125 12.5523 14.125 12C14.125 11.4477 13.6773 11 13.125 11H6.625Z" fill={'currentColor'} /></svg>;
 };
 List.displayName = 'List';
 List.isGlyph = true;
 List.propTypes = {
   fill: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-export default List;
+export default List;

package/src/generated/NavCollapse.tsx

@@ -0,0 +1,45 @@
+/**
+* This is a generated file. Do not modify it manually.
+*
+* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+* @checksum 2ea5bd5022b3f89ef21314161e9c7bb6
+*/
+import * as React from "react";
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface NavCollapseProps extends LGGlyph.ComponentProps {}
+const NavCollapse = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: NavCollapseProps) => {
+  const fillStyle = css`
+        color: ${fill};
+      `;
+  const noFlexShrink = css`
+        flex-shrink: 0;
+      `;
+  const accessibleProps = generateAccessibleProps(role, 'NavCollapse', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['aria-labelledby']: ariaLabelledby
+  });
+  return <svg className={cx({
+    [fillStyle]: fill != null
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M7.5 4H6.5C5.39543 4 4.5 4.89543 4.5 6V10C4.5 11.1046 5.39543 12 6.5 12H7.5V4Z" fill={'currentColor'} /><path d="M8.21716 8.28284C8.06095 8.12663 8.06095 7.87337 8.21716 7.71716L10.7627 5.17157C10.919 5.01536 11.1722 5.01536 11.3284 5.17157C11.4846 5.32778 11.4846 5.58105 11.3284 5.73726L9.06569 8L11.3284 10.2627C11.4846 10.419 11.4846 10.6722 11.3284 10.8284C11.1722 10.9846 10.919 10.9846 10.7627 10.8284L8.21716 8.28284Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V4ZM4 3.25H12C12.4142 3.25 12.75 3.58579 12.75 4V12C12.75 12.4142 12.4142 12.75 12 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12V4C3.25 3.58579 3.58579 3.25 4 3.25Z" fill={'currentColor'} /></svg>;
+};
+NavCollapse.displayName = 'NavCollapse';
+NavCollapse.isGlyph = true;
+NavCollapse.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string
+};
+export default NavCollapse;

package/src/generated/NavExpand.tsx

@@ -0,0 +1,45 @@
+/**
+* This is a generated file. Do not modify it manually.
+*
+* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+* @checksum e5a0c8d34e8fcc2a863a98a6e53e105f
+*/
+import * as React from "react";
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface NavExpandProps extends LGGlyph.ComponentProps {}
+const NavExpand = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: NavExpandProps) => {
+  const fillStyle = css`
+        color: ${fill};
+      `;
+  const noFlexShrink = css`
+        flex-shrink: 0;
+      `;
+  const accessibleProps = generateAccessibleProps(role, 'NavExpand', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['aria-labelledby']: ariaLabelledby
+  });
+  return <svg className={cx({
+    [fillStyle]: fill != null
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M8.5 4H9.5C10.6046 4 11.5 4.89543 11.5 6V10C11.5 11.1046 10.6046 12 9.5 12H8.5V4Z" fill={'currentColor'} /><path d="M7.78284 8.28284C7.93905 8.12663 7.93905 7.87337 7.78284 7.71716L5.23726 5.17157C5.08105 5.01536 4.82778 5.01536 4.67157 5.17157C4.51536 5.32778 4.51536 5.58105 4.67157 5.73726L6.93431 8L4.67157 10.2627C4.51536 10.419 4.51536 10.6722 4.67157 10.8284C4.82778 10.9846 5.08105 10.9846 5.23726 10.8284L7.78284 8.28284Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M14 4C14 2.89543 13.1046 2 12 2H4C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4ZM12 3.25H4C3.58579 3.25 3.25 3.58579 3.25 4V12C3.25 12.4142 3.58579 12.75 4 12.75H12C12.4142 12.75 12.75 12.4142 12.75 12V4C12.75 3.58579 12.4142 3.25 12 3.25Z" fill={'currentColor'} /></svg>;
+};
+NavExpand.displayName = 'NavExpand';
+NavExpand.isGlyph = true;
+NavExpand.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string
+};
+export default NavExpand;

package/src/generated/Return.tsx

@@ -1,13 +1,12 @@
 /**
- * This is a generated file. Do not modify it manually.
- *
- * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
- * @checksum b05e3bc3c6c7479a3cbaa93aba8c7b37
- */
-import { css, cx } from '@leafygreen-ui/emotion';
+* This is a generated file. Do not modify it manually.
+*
+* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+* @checksum 088ef2cc9a4519b2bddcd4a7af33d5e1
+*/
+import * as React from "react";
 import PropTypes from 'prop-types';
-import * as React from 'react';
-
+import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ReturnProps extends LGGlyph.ComponentProps {}
@@ -22,47 +21,25 @@ const Return = ({
   ...props
 }: ReturnProps) => {
   const fillStyle = css`
-    color: ${fill};
-  `;
+        color: ${fill};
+      `;
   const noFlexShrink = css`
-    flex-shrink: 0;
-  `;
+        flex-shrink: 0;
+      `;
   const accessibleProps = generateAccessibleProps(role, 'Return', {
     title,
     ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby,
+    ['aria-labelledby']: ariaLabelledby
   });
-  return (
-    <svg
-      className={cx(
-        {
-          [fillStyle]: fill != null,
-        },
-        noFlexShrink,
-        className,
-      )}
-      height={typeof size === 'number' ? size : sizeMap[size]}
-      width={typeof size === 'number' ? size : sizeMap[size]}
-      role={role}
-      {...accessibleProps}
-      {...props}
-      viewBox="0 0 16 16"
-    >
-      <g id="Return">
-        <path
-          id="Union"
-          d="M5 2C4.44772 2 4 2.44772 4 3C4 3.55228 4.44772 4 5 4H10C11.3807 4 12.5 5.11929 12.5 6.5C12.5 7.88071 11.3807 9 10 9H5.20328L6.65079 7.75927C7.07012 7.39985 7.11868 6.76855 6.75926 6.34923C6.39983 5.9299 5.76853 5.88134 5.34921 6.24076L1.84921 9.24076C1.62756 9.43074 1.5 9.70809 1.5 10C1.5 10.2919 1.62756 10.5693 1.84921 10.7593L5.34921 13.7593C5.76853 14.1187 6.39983 14.0701 6.75926 13.6508C7.11868 13.2315 7.07012 12.6002 6.65079 12.2408L5.20324 11H10C12.4853 11 14.5 8.98528 14.5 6.5C14.5 4.01472 12.4853 2 10 2H5Z"
-          fill={'currentColor'}
-        />
-      </g>
-    </svg>
-  );
+  return <svg className={cx({
+    [fillStyle]: fill != null
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><g id="Return"><path id="Union" d="M5 2C4.44772 2 4 2.44772 4 3C4 3.55228 4.44772 4 5 4H10C11.3807 4 12.5 5.11929 12.5 6.5C12.5 7.88071 11.3807 9 10 9H5.20328L6.65079 7.75927C7.07012 7.39985 7.11868 6.76855 6.75926 6.34923C6.39983 5.9299 5.76853 5.88134 5.34921 6.24076L1.84921 9.24076C1.62756 9.43074 1.5 9.70809 1.5 10C1.5 10.2919 1.62756 10.5693 1.84921 10.7593L5.34921 13.7593C5.76853 14.1187 6.39983 14.0701 6.75926 13.6508C7.11868 13.2315 7.07012 12.6002 6.65079 12.2408L5.20324 11H10C12.4853 11 14.5 8.98528 14.5 6.5C14.5 4.01472 12.4853 2 10 2H5Z" fill={'currentColor'} /></g></svg>;
 };
 Return.displayName = 'Return';
 Return.isGlyph = true;
 Return.propTypes = {
   fill: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-export default Return;
+export default Return;

package/src/generated/Sparkle.tsx

@@ -1,13 +1,12 @@
 /**
- * This is a generated file. Do not modify it manually.
- *
- * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
- * @checksum 5150a0036cfe4b450e93815d1feeae5f
- */
-import { css, cx } from '@leafygreen-ui/emotion';
+* This is a generated file. Do not modify it manually.
+*
+* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+* @checksum 90addb5f1c30daa93d14be4b89af617b
+*/
+import * as React from "react";
 import PropTypes from 'prop-types';
-import * as React from 'react';
-
+import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface SparkleProps extends LGGlyph.ComponentProps {}
@@ -22,52 +21,25 @@ const Sparkle = ({
   ...props
 }: SparkleProps) => {
   const fillStyle = css`
-    color: ${fill};
-  `;
+        color: ${fill};
+      `;
   const noFlexShrink = css`
-    flex-shrink: 0;
-  `;
+        flex-shrink: 0;
+      `;
   const accessibleProps = generateAccessibleProps(role, 'Sparkle', {
     title,
     ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby,
+    ['aria-labelledby']: ariaLabelledby
   });
-  return (
-    <svg
-      className={cx(
-        {
-          [fillStyle]: fill != null,
-        },
-        noFlexShrink,
-        className,
-      )}
-      height={typeof size === 'number' ? size : sizeMap[size]}
-      width={typeof size === 'number' ? size : sizeMap[size]}
-      role={role}
-      {...accessibleProps}
-      {...props}
-      viewBox="0 0 16 16"
-    >
-      <path
-        d="M6.27334 2.89343L5.27501 5.88842C5.1749 6.18877 4.93922 6.42445 4.63887 6.52456L1.64388 7.52289C1.18537 7.67573 1.18537 8.32427 1.64388 8.47711L4.63887 9.47544C4.93922 9.57555 5.1749 9.81123 5.27501 10.1116L6.27334 13.1066C6.42618 13.5651 7.07472 13.5651 7.22756 13.1066L8.22589 10.1116C8.326 9.81123 8.56168 9.57555 8.86203 9.47544L11.857 8.47711C12.3155 8.32427 12.3155 7.67573 11.857 7.52289L8.86203 6.52456C8.56168 6.42445 8.326 6.18877 8.22589 5.88842L7.22756 2.89343C7.07472 2.43492 6.42618 2.43492 6.27334 2.89343Z"
-        fill={'currentColor'}
-      />
-      <path
-        d="M12.5469 1.17194L12.3158 1.8651C12.2157 2.16545 11.98 2.40113 11.6797 2.50125L10.9865 2.7323C10.7573 2.80872 10.7573 3.13299 10.9865 3.20941L11.6797 3.44046C11.98 3.54058 12.2157 3.77626 12.3158 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.255 4.0766C13.3552 3.77626 13.5908 3.54058 13.8912 3.44046L14.5843 3.20941C14.8136 3.13299 14.8136 2.80872 14.5843 2.7323L13.8912 2.50125C13.5908 2.40113 13.3552 2.16545 13.255 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z"
-        fill={'currentColor'}
-      />
-      <path
-        d="M12.5469 11.2302L12.3158 11.9234C12.2157 12.2237 11.98 12.4594 11.6797 12.5595L10.9865 12.7906C10.7573 12.867 10.7573 13.1913 10.9865 13.2677L11.6797 13.4988C11.98 13.5989 12.2157 13.8346 12.3158 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.255 14.1349C13.3552 13.8346 13.5908 13.5989 13.8912 13.4988L14.5843 13.2677C14.8136 13.1913 14.8136 12.867 14.5843 12.7906L13.8912 12.5595C13.5908 12.4594 13.3552 12.2237 13.255 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z"
-        fill={'currentColor'}
-      />
-    </svg>
-  );
+  return <svg className={cx({
+    [fillStyle]: fill != null
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path d="M6.27334 2.89343L5.27501 5.88842C5.1749 6.18877 4.93922 6.42445 4.63887 6.52456L1.64388 7.52289C1.18537 7.67573 1.18537 8.32427 1.64388 8.47711L4.63887 9.47544C4.93922 9.57555 5.1749 9.81123 5.27501 10.1116L6.27334 13.1066C6.42618 13.5651 7.07472 13.5651 7.22756 13.1066L8.22589 10.1116C8.326 9.81123 8.56168 9.57555 8.86203 9.47544L11.857 8.47711C12.3155 8.32427 12.3155 7.67573 11.857 7.52289L8.86203 6.52456C8.56168 6.42445 8.326 6.18877 8.22589 5.88842L7.22756 2.89343C7.07472 2.43492 6.42618 2.43492 6.27334 2.89343Z" fill={'currentColor'} /><path d="M12.5469 1.17194L12.3158 1.8651C12.2157 2.16545 11.98 2.40113 11.6797 2.50125L10.9865 2.7323C10.7573 2.80872 10.7573 3.13299 10.9865 3.20941L11.6797 3.44046C11.98 3.54058 12.2157 3.77626 12.3158 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.255 4.0766C13.3552 3.77626 13.5908 3.54058 13.8912 3.44046L14.5843 3.20941C14.8136 3.13299 14.8136 2.80872 14.5843 2.7323L13.8912 2.50125C13.5908 2.40113 13.3552 2.16545 13.255 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z" fill={'currentColor'} /><path d="M12.5469 11.2302L12.3158 11.9234C12.2157 12.2237 11.98 12.4594 11.6797 12.5595L10.9865 12.7906C10.7573 12.867 10.7573 13.1913 10.9865 13.2677L11.6797 13.4988C11.98 13.5989 12.2157 13.8346 12.3158 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.255 14.1349C13.3552 13.8346 13.5908 13.5989 13.8912 13.4988L14.5843 13.2677C14.8136 13.1913 14.8136 12.867 14.5843 12.7906L13.8912 12.5595C13.5908 12.4594 13.3552 12.2237 13.255 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z" fill={'currentColor'} /></svg>;
 };
 Sparkle.displayName = 'Sparkle';
 Sparkle.isGlyph = true;
 Sparkle.propTypes = {
   fill: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-export default Sparkle;
+export default Sparkle;

package/src/glyphs/AllProducts.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 3.5C2.5 2.94772 2.94772 2.5 3.5 2.5H4.5C5.05228 2.5 5.5 2.94772 5.5 3.5V4.5C5.5 5.05228 5.05228 5.5 4.5 5.5H3.5C2.94772 5.5 2.5 5.05228 2.5 4.5V3.5Z" fill="#000"/>
+<path d="M6.5 3.5C6.5 2.94772 6.94772 2.5 7.5 2.5H8.5C9.05228 2.5 9.5 2.94772 9.5 3.5V4.5C9.5 5.05228 9.05228 5.5 8.5 5.5H7.5C6.94772 5.5 6.5 5.05228 6.5 4.5V3.5Z" fill="#000"/>
+<path d="M11.5 2.5C10.9477 2.5 10.5 2.94772 10.5 3.5V4.5C10.5 5.05228 10.9477 5.5 11.5 5.5H12.5C13.0523 5.5 13.5 5.05228 13.5 4.5V3.5C13.5 2.94772 13.0523 2.5 12.5 2.5H11.5Z" fill="#000"/>
+<path d="M2.5 7.5C2.5 6.94772 2.94772 6.5 3.5 6.5H4.5C5.05228 6.5 5.5 6.94772 5.5 7.5V8.5C5.5 9.05228 5.05228 9.5 4.5 9.5H3.5C2.94772 9.5 2.5 9.05228 2.5 8.5V7.5Z" fill="#000"/>
+<path d="M7.5 6.5C6.94772 6.5 6.5 6.94772 6.5 7.5V8.5C6.5 9.05228 6.94772 9.5 7.5 9.5H8.5C9.05228 9.5 9.5 9.05228 9.5 8.5V7.5C9.5 6.94772 9.05228 6.5 8.5 6.5H7.5Z" fill="#000"/>
+<path d="M10.5 7.5C10.5 6.94772 10.9477 6.5 11.5 6.5H12.5C13.0523 6.5 13.5 6.94772 13.5 7.5V8.5C13.5 9.05228 13.0523 9.5 12.5 9.5H11.5C10.9477 9.5 10.5 9.05228 10.5 8.5V7.5Z" fill="#000"/>
+<path d="M3.5 10.5C2.94772 10.5 2.5 10.9477 2.5 11.5V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H4.5C5.05228 13.5 5.5 13.0523 5.5 12.5V11.5C5.5 10.9477 5.05228 10.5 4.5 10.5H3.5Z" fill="#000"/>
+<path d="M6.5 11.5C6.5 10.9477 6.94772 10.5 7.5 10.5H8.5C9.05228 10.5 9.5 10.9477 9.5 11.5V12.5C9.5 13.0523 9.05228 13.5 8.5 13.5H7.5C6.94772 13.5 6.5 13.0523 6.5 12.5V11.5Z" fill="#000"/>
+<path d="M11.5 10.5C10.9477 10.5 10.5 10.9477 10.5 11.5V12.5C10.5 13.0523 10.9477 13.5 11.5 13.5H12.5C13.0523 13.5 13.5 13.0523 13.5 12.5V11.5C13.5 10.9477 13.0523 10.5 12.5 10.5H11.5Z" fill="#000"/>
+</svg>

package/src/glyphs/NavCollapse.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 4H6.5C5.39543 4 4.5 4.89543 4.5 6V10C4.5 11.1046 5.39543 12 6.5 12H7.5V4Z" fill="#000"/>
+<path d="M8.21716 8.28284C8.06095 8.12663 8.06095 7.87337 8.21716 7.71716L10.7627 5.17157C10.919 5.01536 11.1722 5.01536 11.3284 5.17157C11.4846 5.32778 11.4846 5.58105 11.3284 5.73726L9.06569 8L11.3284 10.2627C11.4846 10.419 11.4846 10.6722 11.3284 10.8284C11.1722 10.9846 10.919 10.9846 10.7627 10.8284L8.21716 8.28284Z" fill="#000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V4ZM4 3.25H12C12.4142 3.25 12.75 3.58579 12.75 4V12C12.75 12.4142 12.4142 12.75 12 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12V4C3.25 3.58579 3.58579 3.25 4 3.25Z" fill="#000"/>
+</svg>

package/src/glyphs/NavExpand.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 4H9.5C10.6046 4 11.5 4.89543 11.5 6V10C11.5 11.1046 10.6046 12 9.5 12H8.5V4Z" fill="#000"/>
+<path d="M7.78284 8.28284C7.93905 8.12663 7.93905 7.87337 7.78284 7.71716L5.23726 5.17157C5.08105 5.01536 4.82778 5.01536 4.67157 5.17157C4.51536 5.32778 4.51536 5.58105 4.67157 5.73726L6.93431 8L4.67157 10.2627C4.51536 10.419 4.51536 10.6722 4.67157 10.8284C4.82778 10.9846 5.08105 10.9846 5.23726 10.8284L7.78284 8.28284Z" fill="#000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4C14 2.89543 13.1046 2 12 2H4C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4ZM12 3.25H4C3.58579 3.25 3.25 3.58579 3.25 4V12C3.25 12.4142 3.58579 12.75 4 12.75H12C12.4142 12.75 12.75 12.4142 12.75 12V4C12.75 3.58579 12.4142 3.25 12 3.25Z" fill="#000"/>
+</svg>

package/src/glyphs/index.ts

@@ -4,6 +4,7 @@ import { LGGlyph } from '../types';
 // Glyphs
 import ActivityFeed from './ActivityFeed.svg';
 import AddFile from './AddFile.svg';
+import AllProducts from './AllProducts.svg';
 import Apps from './Apps.svg';
 import Array from './Array.svg';
 import ArrowDown from './ArrowDown.svg';
@@ -80,6 +81,8 @@ import Menu from './Menu.svg';
 import Minus from './Minus.svg';
 import MultiDirectionArrow from './MultiDirectionArrow.svg';
 import MultiLayers from './MultiLayers.svg';
+import NavCollapse from './NavCollapse.svg';
+import NavExpand from './NavExpand.svg';
 import NoFilter from './NoFilter.svg';
 import NotAllowed from './NotAllowed.svg';
 import Note from './Note.svg';
@@ -138,6 +141,7 @@ import XWithCircle from './XWithCircle.svg';
 const _glyphs = {
   ActivityFeed,
   AddFile,
+  AllProducts,
   Apps,
   Array,
   ArrowDown,
@@ -214,6 +218,8 @@ const _glyphs = {
   Minus,
   MultiDirectionArrow,
   MultiLayers,
+  NavCollapse,
+  NavExpand,
   NoFilter,
   NotAllowed,
   Note,