@graphcommerce/next-ui 3.9.0 → 3.11.0

package/Row/ParagraphWithSidebarSlide/index.tsx

@@ -1,6 +1,4 @@
 import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
-import { m, useSpring, useTransform, useViewportScroll } from 'framer-motion'
-import React, { useEffect, useRef, useState } from 'react'
 import Row from '..'
 import { UseStyles } from '../../Styles'
 
@@ -32,7 +30,7 @@ const useStyles = makeStyles(
       },
     },
     copy: {
-      color: '#fff',
+      color: theme.palette.secondary.contrastText,
       display: 'grid',
       zIndex: 1,
       justifyItems: 'start',
@@ -54,7 +52,9 @@ const useStyles = makeStyles(
       },
     },
     slidingItems: {
-      maxWidth: '100%',
+      '& > *': {
+        height: 'auto !important',
+      },
     },
   }),
   { name: 'ParagraphWithSidebarSlide' },
@@ -71,33 +71,6 @@ export default function ParagraphWithSidebarSlide(props: ParagraphWithSidebarSli
   const { background, slidingItems, children, ...containerProps } = props
   const classes = useStyles(props)
 
-  const [windowHeight, setHeight] = useState(0)
-  const [itemY, setItemY] = useState(0)
-  const [parentHeight, setParentHeight] = useState(0)
-  const sidebar = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!sidebar.current) return () => {}
-    const ro = new ResizeObserver(([entry]) => {
-      if (entry.target instanceof HTMLElement) {
-        setParentHeight(entry.target.offsetHeight)
-        setHeight(window.innerHeight)
-        setItemY(entry.target.offsetTop)
-      }
-    })
-    ro.observe(sidebar.current)
-    return () => ro.disconnect()
-  }, [])
-
-  const { scrollY } = useViewportScroll()
-  const y = useSpring(
-    useTransform(
-      scrollY,
-      [itemY - windowHeight / 4, itemY + windowHeight / 2],
-      [0, parentHeight > windowHeight / 2 ? windowHeight / 2 : 0],
-    ),
-  )
-
   return (
     <Row maxWidth={false} {...containerProps}>
       <div className={classes.wrapper}>
@@ -105,9 +78,7 @@ export default function ParagraphWithSidebarSlide(props: ParagraphWithSidebarSli
           <div className={classes.copy}>{children}</div>
           {background}
         </div>
-        <m.div ref={sidebar} transition={{ ease: 'linear' }} style={{ y }}>
-          {slidingItems}
-        </m.div>
+        <div className={classes.slidingItems}>{slidingItems}</div>
       </div>
     </Row>
   )

package/Row/RowImageTextBoxed/index.tsx

@@ -26,8 +26,8 @@ const useStyles = makeStyles(
         width: responsiveVal(100, 600),
       },
       '& img': {
-        height: '100%',
-        width: '100%',
+        height: '100% !important',
+        width: '100% !important',
         objectFit: `cover`,
       },
     },

package/Row/index.tsx

@@ -2,10 +2,7 @@ import { Container, styled } from '@material-ui/core'
 
 const Row = styled(Container)(
   ({ theme }) => ({
-    marginBottom: theme.spacings.lg,
-    [theme.breakpoints.up('md')]: {
-      marginBottom: `${theme.spacings.xl}`,
-    },
+    marginBottom: theme.spacings.xl,
   }),
   { name: 'Row' },
 )

package/StarRatingField/index.tsx

@@ -1,8 +1,9 @@
 import { makeStyles, Theme } from '@material-ui/core'
 import { Rating, RatingProps } from '@material-ui/lab'
 import React from 'react'
+import { SvgImageSimple } from '..'
 import SvgImage from '../SvgImage'
-import { iconStarFilledMuted, iconStarYellow } from '../icons'
+import { iconStar } from '../icons'
 
 export type StarRatingFieldProps = {
   id?: string
@@ -12,9 +13,15 @@ export type StarRatingFieldProps = {
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
-    icon: {
-      marginLeft: 4,
-      marginRight: 4,
+    iconStar: {
+      fill: '#FFDA1C',
+      stroke: '#FFDA1C',
+      margin: 3,
+    },
+    iconStarEmpty: {
+      fill: theme.palette.text.disabled,
+      stroke: theme.palette.text.disabled,
+      margin: 3,
     },
   }),
   {
@@ -32,22 +39,15 @@ export default function StarRatingField(props: StarRatingFieldProps) {
       max={5}
       size='small'
       emptyIcon={
-        <SvgImage
-          src={iconStarFilledMuted}
-          size={iconSize}
+        <SvgImageSimple
+          src={iconStar}
           alt='star'
           loading='eager'
-          classes={{ root: classes.icon }}
+          className={classes.iconStarEmpty}
         />
       }
       icon={
-        <SvgImage
-          src={iconStarYellow}
-          size={iconSize}
-          alt='star'
-          loading='eager'
-          classes={{ root: classes.icon }}
-        />
+        <SvgImageSimple src={iconStar} alt='star' loading='eager' className={classes.iconStar} />
       }
       onChange={(event, value) => {
         onChange(id ?? '', value ?? 0)

package/SvgImage/SvgImageSimple.tsx

@@ -1,4 +1,4 @@
-import { Image, ImageProps } from '@graphcommerce/image'
+import { Image, ImageProps, isStaticImport, isStaticRequire } from '@graphcommerce/image'
 import { makeStyles, capitalize, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { forwardRef } from 'react'
@@ -9,47 +9,75 @@ export type SvgImageShade = 'muted' | 'default' | 'inverted'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     image: {
-      display: 'block',
-      flexShrink: 0,
       userSelect: 'none',
-      width: 24,
-      height: 'auto',
+      width: responsiveVal(22, 24),
+      height: responsiveVal(22, 24),
+      strokeWidth: 1.8,
+      strokeLinecap: 'square',
+      strokeLinejoin: 'miter',
+      stroke: theme.palette.text.primary,
+      fill: 'none',
     },
-    /* Styles applied to the element if `size='inherit'`. */
     sizeInherit: {
       fontSize: 'inherit',
     },
-    /* Styles applied to the element if `size='small'`. */
     sizeSmall: {
-      width: 20,
+      width: responsiveVal(13, 16),
+      height: responsiveVal(13, 16),
+      strokeWidth: 2.3,
     },
-    /* Styles applied to the element if `size='large'`. */
     sizeLarge: {
-      width: responsiveVal(28, 32),
+      width: responsiveVal(24, 28),
+      height: responsiveVal(24, 28),
+      strokeWidth: 1.4,
+    },
+    sizeXl: {
+      width: responsiveVal(38, 42),
+      height: responsiveVal(38, 42),
+      strokeWidth: 1.8,
+    },
+    sizeXxl: {
+      width: responsiveVal(96, 148),
+      height: responsiveVal(96, 148),
+      strokeWidth: 1,
+    },
+    muted: {
+      stroke: theme.palette.text.disabled,
+    },
+    inverted: {
+      stroke: theme.palette.background.default,
     },
-    muted: { filter: `invert(75%)` },
-    inverted: { filter: `invert(100%)` },
   }),
   { name: 'SvgImageSimple' },
 )
 
 type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
   /** The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. */
-  size?: 'default' | 'inherit' | 'large' | 'medium' | 'small'
-
+  size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small'
+  fill?: boolean
   muted?: boolean
   inverted?: boolean
 }
 
 const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props, ref) => {
-  const { className, size = 'medium', muted, inverted, layout = 'fixed', ...imageProps } = props
+  const {
+    className,
+    size = 'medium',
+    muted,
+    inverted,
+    fill,
+    layout = 'fixed',
+    ...imageProps
+  } = props
   const classes = useStyles()
 
+  let src = imageProps.src
+  let staticSrc = ''
+  if (isStaticImport(src)) staticSrc = (isStaticRequire(src) ? src.default : src).src
+  src = typeof src === 'string' ? src : staticSrc
+
   return (
-    <Image
-      {...imageProps}
-      ref={ref}
-      layout={layout}
+    <svg
       className={clsx(
         className,
         classes.image,
@@ -57,8 +85,10 @@ const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props,
         muted && classes.muted,
         inverted && classes.inverted,
       )}
-      unoptimized
-    />
+      aria-hidden='true'
+    >
+      <use href={`${src}#icon`}></use>
+    </svg>
   )
 })
 SvgImageSimple.displayName = 'SvgImageSimple'

package/TextInputNumber/index.tsx

@@ -13,6 +13,7 @@ import React, { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } fro
 import { UseStyles } from '../Styles'
 import responsiveVal from '../Styles/responsiveVal'
 import SvgImage from '../SvgImage'
+import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconMin, iconPlus } from '../icons'
 
 const useStyles = makeStyles(
@@ -133,7 +134,7 @@ export default function TextInputNumber(props: TextInputNumberProps) {
             {...DownProps}
           >
             {DownProps.children ?? (
-              <SvgImage src={iconMin} size='small' alt='Step down' loading='eager' />
+              <SvgImageSimple src={iconMin} size='small' alt='Step down' loading='eager' />
             )}
           </IconButton>
         ),
@@ -151,7 +152,7 @@ export default function TextInputNumber(props: TextInputNumberProps) {
             {...UpProps}
           >
             {UpProps.children ?? (
-              <SvgImage src={iconPlus} size='small' alt='Step up' loading='eager' />
+              <SvgImageSimple src={iconPlus} size='small' alt='Step up' loading='eager' />
             )}
           </IconButton>
         ),

package/Theme/types.ts

@@ -1,19 +1,6 @@
 export {}
 
 declare module '@material-ui/core/styles/createPalette' {
-  // interface PaletteOptions {
-  //   tertiary: PaletteColorOptions
-  // }
-  // interface Palette {
-  //   tertiary: PaletteColor & ColorPartial
-  // }
-
-  interface SimplePaletteColorOptions {
-    mutedText: string
-  }
-  interface PaletteColor {
-    mutedText: string
-  }
   interface TypeBackground {
     highlight: string
   }

package/Title/index.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import React from 'react'
 import { UseStyles } from '../Styles'
 import SvgImage, { SvgImageProps } from '../SvgImage'
+import SvgImageSimple from '../SvgImage/SvgImageSimple'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -47,15 +48,7 @@ const Title = React.forwardRef<HTMLDivElement, TitleProps>((props, ref) => {
 
   return (
     <div className={clsx(classes.container, small && classes.small)}>
-      {icon && (
-        <SvgImage
-          src={icon}
-          size={small ? 30 : 56}
-          mobileSize={small ? 20 : 56}
-          loading='eager'
-          classes={{ root: small ? undefined : classes.icon }}
-        />
-      )}
+      {icon && <SvgImageSimple src={icon} loading='eager' size='xl' />}
       <Typography
         ref={ref}
         variant={variant || (small ? 'h6' : 'h3')}

package/UspList/UspListItem.tsx

@@ -1,6 +1,7 @@
 import { makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
+import { responsiveVal } from '..'
 import { UseStyles } from '../Styles'
 
 const useStyles = makeStyles(
@@ -8,20 +9,26 @@ const useStyles = makeStyles(
     root: {
       display: 'grid',
       gridAutoFlow: 'column',
-      maxWidth: 'max-content',
       alignItems: 'center',
-      gridTemplateColumns: '30px 1fr',
-    },
-    gap: {
+      gridTemplateColumns: `${responsiveVal(22, 32)} auto`,
       gap: theme.spacings.xs,
+      '& > p': {
+        ...theme.typography.body2,
+      },
+    },
+    icon: {
+      '& > * > img': {
+        display: 'block',
+      },
     },
-    smallText: {
+    smallCopy: {
       '& > p': {
-        marginLeft: 5,
+        ...theme.typography.body2,
       },
     },
-    normalText: {
-      ...theme.typography.body1,
+    smallIcons: {
+      gridTemplateColumns: `${responsiveVal(10, 14)} auto`,
+      gap: theme.spacings.xxs,
     },
   }),
   { name: 'UspListItem' },
@@ -38,9 +45,9 @@ export default function UspListItem(props: UspListItemProps) {
   const classes = useStyles()
 
   return (
-    <li className={clsx(classes.root, size === 'normal' && classes.gap)}>
-      <div>{icon}</div>
-      <div className={classes?.[`${size}Text`]}>{text}</div>
+    <li className={clsx(classes.root, size === 'small' && classes.smallIcons)}>
+      <div className={classes.icon}>{icon}</div>
+      <div className={clsx(size === 'small' && classes.smallCopy)}>{text}</div>
     </li>
   )
 }

package/UspList/index.tsx

@@ -11,9 +11,10 @@ const useStyles = makeStyles(
       margin: 0,
       display: 'grid',
       alignContent: 'start',
+      rowGap: theme.spacings.xs,
     },
-    gap: {
-      gap: theme.spacings.xs,
+    small: {
+      rowGap: 3,
     },
   }),
   { name: 'UspList' },
@@ -28,5 +29,5 @@ export default function UspList(props: UspListProps) {
   const { children, size } = props
   const classes = useStyles()
 
-  return <ul className={clsx(classes.root, size !== 'small' && classes.gap)}>{children}</ul>
+  return <ul className={clsx(classes.root, size === 'small' && classes.small)}>{children}</ul>
 }

package/icons/accessibility-human.svg

@@ -0,0 +1 @@
+<svg width="48px" height="48px" xmlns="http://www.w3.org/2000/svg" aria-labelledby="accessibilityHumanIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="accessibilityHumanIconTitle">Accessibility features</title> <symbol id="icon" viewBox="0 0 24 24"> <circle cx="12" cy="3" r="1"/> <path d="M16 21L12 13M12 13V7M12 13L8 21M12 7L18 9M12 7L6 9"/> </symbol></svg>

package/icons/accessibility.svg

@@ -0,0 +1 @@
+<svg width="48px" height="48px" xmlns="http://www.w3.org/2000/svg" aria-labelledby="accessibilityIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="accessibilityIconTitle">A11Y (accessibility)</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M2 16L2.8 14M6 16L5.2 14M5.2 14L4 11L2.8 14M5.2 14H2.8"/> <path d="M20 13L22 10M20 13L18 10M20 13L20 16"/> <path d="M8 12L10 10V16"/> <path d="M13 12L15 10V16"/> </symbol></svg>

package/icons/activity.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="activityIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="activityIconTitle">Activity</title> <symbol id="icon" viewBox="0 0 24 24"> <polyline points="21 14 18 14 15 7 10 17 7 11 5 14 3 14"/> </symbol></svg>

package/icons/add-to-list.svg

@@ -0,0 +1 @@
+<svg width="48px" height="48px" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="addToListIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" color="#2329D6"> <title id="addToListIconTitle">Add To List</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M6 10H18"/> <path d="M6 6H18"/> <path d="M6 14H10"/> <path d="M14 16H18"/> <path d="M16 14L16 18"/> <path d="M6 18H10"/> </symbol></svg>

package/icons/add.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="addIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="addIconTitle">Add</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M17 12L7 12M12 17L12 7"/> <circle cx="12" cy="12" r="10"/> </symbol></svg>

package/icons/alarm.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="alarmIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="alarmIconTitle">Alarm</title> <symbol id="icon" viewBox="0 0 24 24"> <circle cx="12" cy="13" r="9"/> <polyline points="12 8 12 13 15 16"/> <path d="M19 2L22 5M2 5L5 2"/> </symbol></svg>

package/icons/align-center.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="alignCenterIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="alignCenterIconTitle">Align Center</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M8 10L16 10M6 6L18 6M6 14L18 14M8 18L16 18"/> </symbol></svg>

package/icons/align-left.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="alignLeftIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="alignLeftIconTitle">Align Left</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M6 10L14 10M6 6L18 6M6 14L18 14M6 18L14 18"/> </symbol></svg>

package/icons/align-right.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="alignRightIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="alignRightIconTitle">Align Right</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M10 10h8M6 6h12M6 14h12m-8 4h8"/> </symbol></svg>

package/icons/anchor.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="anchorIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="anchorIconTitle">Anchor</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M12 20L12 7M9 10L15 10"/> <circle cx="12" cy="5" r="2"/> <path d="M20,14 C18.6666667,18 16,20 12,20 C8,20 5.33333333,18 4,14"/> </symbol></svg>

package/icons/aperture.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="apertureIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="apertureIconTitle">Aperture</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/> <g stroke-linecap="round"> <path d="M3 16H14.3164"/> <path d="M4.03589 6.20575L9.68257 15.9861"/> <path d="M13.0359 2.20575L7.37891 12.004"/> <path d="M10.9641 21.7942L16.6146 12.0074"/> <path d="M19.9641 17.7942L14.3086 7.99866"/> <path d="M21 7.98721H9.71844"/> </g> </symbol></svg>

package/icons/apps-alt.svg

@@ -0,0 +1 @@
+<svg width="48px" height="48px" xmlns="http://www.w3.org/2000/svg" aria-labelledby="appsAltIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="appsAltIconTitle">Apps drawer</title> <symbol id="icon" viewBox="0 0 24 24"> <rect x="5" y="5" width="2" height="2"/> <rect x="11" y="5" width="2" height="2"/> <rect x="17" y="5" width="2" height="2"/> <rect x="5" y="11" width="2" height="2"/> <rect x="11" y="11" width="2" height="2"/> <rect x="17" y="11" width="2" height="2"/> <rect x="5" y="17" width="2" height="2"/> <rect x="11" y="17" width="2" height="2"/> <rect x="17" y="17" width="2" height="2"/> </symbol></svg>

package/icons/apps.svg

@@ -0,0 +1 @@
+<svg width="48px" height="48px" xmlns="http://www.w3.org/2000/svg" aria-labelledby="appsIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="appsIconTitle">Apps drawer</title> <symbol id="icon" viewBox="0 0 24 24"> <circle cx="6" cy="6" r="1"/> <circle cx="12" cy="6" r="1"/> <circle cx="18" cy="6" r="1"/> <circle cx="6" cy="12" r="1"/> <circle cx="12" cy="12" r="1"/> <circle cx="18" cy="12" r="1"/> <circle cx="6" cy="18" r="1"/> <circle cx="12" cy="18" r="1"/> <circle cx="18" cy="18" r="1"/> </symbol></svg>

package/icons/arrow-down-circle.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="circleArrowDownIconTitle" fill="none" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" color="#2329D6"> <title id="circleArrowDownIconTitle">Arrow Down</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M15 13.5l-3 3-3-3"/> <path d="M12 15V7.5"/> <path stroke-linecap="round" d="M12 16.5V15v1.5z"/> <circle cx="12" cy="12" r="10"/> </symbol></svg>

package/icons/arrow-down.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="arrowDownIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="arrowDownIconTitle">Arrow Down</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M6 15l6 6 6-6"/> <path d="M12 3v17"/> <path stroke-linecap="round" d="M12 21v-1"/> </symbol></svg>

package/icons/arrow-left-bottom.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="arrowLeftBottomIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="arrowLeftBottomIconTitle">Arrow Left Bottom</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M5 11v8h8"/> <path stroke-linecap="round" d="M5 19l1-1"/> <path d="M6 18L19 5"/> </symbol></svg>

package/icons/arrow-left-circle.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="circleArrowLeftIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="circleArrowLeftIconTitle">Arrow Left</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M10.5 15l-3-3 3-3"/> <path d="M16.5 12H9"/> <path stroke-linecap="round" d="M7.5 12H9"/> <circle cx="12" cy="12" r="10"/> </symbol></svg>

package/icons/arrow-left-top.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="arrowLeftTopIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="arrowLeftTopIconTitle"/> <path d="M5 13V5h8"/> <path stroke-linecap="round" d="M5 5l1 1"/> <path d="M6 6l13 13"/> </symbol></svg>

package/icons/arrow-left.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="arrowLeftIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="arrowLeftIconTitle">Arrow Left</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M9 6l-6 6 6 6"/> <path d="M21 12H4"/> <path stroke-linecap="round" d="M3 12h1"/> </symbol></svg>

package/icons/arrow-right-bottom.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="arrowRightBottomIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="arrowRightBottomIconTitle">Arrow Right Bottom</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M19 11v8h-8"/> <path stroke-linecap="round" d="M19 19l-1-1"/> <path d="M18 18L5 5"/> </symbol></svg>

package/icons/arrow-right-circle.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="circleArrowRightIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="circleArrowRightIconTitle">Arrow Right</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M13.5 9l3 3-3 3"/> <path d="M7.5 12H15"/> <path stroke-linecap="round" d="M16.5 12H15"/> <circle cx="12" cy="12" r="10"/> </symbol></svg>

package/icons/arrow-right-top.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="arrowRightTopIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="arrowRightTopIconTitle">Arrow Right Top</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M19 13V5h-8"/> <path stroke-linecap="round" d="M19 5l-1 1"/> <path d="M18 6L5 19"/> </symbol></svg>

package/icons/arrow-right.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="arrowRightIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="arrowRightIconTitle">Arrow Right</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M15 18l6-6-6-6"/> <path d="M3 12h17"/> <path stroke-linecap="round" d="M21 12h-1"/> </symbol></svg>

package/icons/arrow-up-circle.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="arrowUpIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="arrowUpIconTitle">Arrow Up</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M9 10.5l3-3 3 3"/> <path d="M12 16.5V9"/> <path stroke-linecap="round" d="M12 7.5V9"/> <circle cx="12" cy="12" r="10"/> </symbol></svg>

package/icons/arrow-up.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="arrowUpIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="arrowUpIconTitle">Arrow Up</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M18 9l-6-6-6 6"/> <path d="M12 21V4"/> <path stroke-linecap="round" d="M12 3v1"/> </symbol></svg>

package/icons/back-alt.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="backAltIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="backAltIconTitle">Back</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M4 12l15-9v18z"/> </symbol></svg>

package/icons/back-left.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="backLeftIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="backLeftIconTitle">Turn back</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M5,17 L5,15 C5,10.0294373 8.80557963,6 13.5,6 C18.1944204,6 22,10.0294373 22,15"/> <polyline points="8 15 5 18 2 15"/> </symbol></svg>

package/icons/back-right.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="backRightIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="backRightIconTitle">Turn Back</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M19,17 L19,15 C19,10.0294373 15.1944204,6 10.5,6 C5.80557963,6 2,10.0294373 2,15"/> <polyline points="16 15 19 18 22 15"/> </symbol></svg>

package/icons/back.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="backIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="backIconTitle">Backwards</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M14 14.74L21 19V5l-7 4.26V5L2 12l12 7v-4.26z"/> </symbol></svg>

package/icons/bag.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="bagIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="bagIconTitle">Bag</title> <symbol id="icon" viewBox="0 0 24 24"><rect width="14" height="12" x="5" y="7"/> <path d="M8 7a4 4 0 1 1 8 0"/> </symbol></svg>

package/icons/basket.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="basketIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="basketIconTitle">Basket</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M14 4l6 6-1.372 9H5.372L4 10l6-6"/> <path stroke-linecap="round" d="M4 10h16"/> </symbol></svg>

package/icons/basketball.svg

@@ -0,0 +1 @@
+<svg width="48px" height="48px" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="basketballIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" color="#2329D6"> <title id="basketballIconTitle">Basketball</title> <symbol id="icon" viewBox="0 0 24 24"> <g stroke-linecap="butt"> <path d="M3.00476 7.71673C6.03818 6.81589 9.99791 7.74841 13.2448 10.4315C16.5425 13.1566 18.2053 16.9442 17.8244 20.1241"/> <path d="M10.102 21.7996C9.33937 19.3589 10.0106 15.6137 12.0776 12.0335C14.1385 8.46402 17.0351 6.01413 19.5251 5.44463"/> <path d="M11.4419 2C11.2615 3.94419 10.5157 6.2298 9.22541 8.46468C7.29158 11.8142 4.64753 14.1615 2.40135 14.7854"/> </g> <circle cx="12" cy="12" r="10"/> </symbol></svg>

package/icons/battery-alt.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="batteryAltIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="batteryAltIconTitle">Battery</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M14 3h-4"/> <path d="M6 4v17h12V4z"/> </symbol></svg>

package/icons/battery-charging.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="batteryChargingIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="batteryChargingIconTitle">BatteryCharging</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M21 14v-4"/> <path d="M20 6H4v12h16z"/> <polyline points="12 9 14 12 10 12 12 15"/> </symbol></svg>

package/icons/battery-full.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="batteryFullIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="batteryFullIconTitle">Battery Full</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M21 14v-4"/> <path d="M20 6H4v12h16z"/> <path d="M12 14v-4m4 4v-4m-8 4v-4"/> </symbol></svg>

package/icons/battery-low.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="batteryLowIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="batteryLowIconTitle">Battery Low</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M21 14v-4"/> <path d="M20 6H4v12h16z"/> <path d="M8 14v-4"/> </symbol></svg>

package/icons/battery-medium.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="batteryMediumIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="batteryMediumIconTitle">Battery 66%</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M21 14v-4"/> <path d="M20 6H4v12h16z"/> <path d="M12 14v-4m-4 4v-4"/> </symbol></svg>

package/icons/battery.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="batteryIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="batteryIconTitle">Battery</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M21 14v-4"/> <path d="M20 6H4v12h16z"/> </symbol></svg>

package/icons/bell.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="bellIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="bellIconTitle">Bell</title> <symbol id="icon" viewBox="0 0 24 24"> <path stroke-linejoin="round" d="M10.5,4.5 C12.1666667,4.5 13.8333333,4.5 15.5,4.5 C17.5,4.5 18.8333333,3.83333333 19.5,2.5 L19.5,18.5 C18.8333333,17.1666667 17.5,16.5 15.5,16.5 C13.8333333,16.5 12.1666667,16.5 10.5,16.5 L10.5,16.5 C7.1862915,16.5 4.5,13.8137085 4.5,10.5 L4.5,10.5 C4.5,7.1862915 7.1862915,4.5 10.5,4.5 Z" transform="rotate(90 12 10.5)"/> <path d="M11,21 C12.1045695,21 13,20.1045695 13,19 C13,17.8954305 12.1045695,17 11,17" transform="rotate(90 12 19)"/> </symbol></svg>

package/icons/bike.svg

@@ -0,0 +1 @@
+<svg width="48px" height="48px" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="bikeIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" color="#2329D6"> <title id="bikeIconTitle">Bike</title> <symbol id="icon" viewBox="0 0 24 24"> <circle cx="14" cy="6" r="1"/> <path d="M12 18V14L9 12L12 9L14 11L16 12"/> <circle cx="6" cy="17" r="3"/> <circle cx="18" cy="17" r="3"/> </symbol></svg>

package/icons/bin.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="binIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="binIconTitle">Bin</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M19 6L5 6M14 5L10 5M6 10L6 20C6 20.6666667 6.33333333 21 7 21 7.66666667 21 11 21 17 21 17.6666667 21 18 20.6666667 18 20 18 19.3333333 18 16 18 10"/> </symbol></svg>

package/icons/bluetooth.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="bluetoothIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="bluetoothIconTitle">Bluetooth</title> <symbol id="icon" viewBox="0 0 24 24"> <polyline points="7 17 17 7 12 2 12 22 17 17 7 7"/> </symbol></svg>

package/icons/bolt.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="boltIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="boltIconTitle">Bolt</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M5 14l8-11v7h5l-8 11v-7z"/> </symbol></svg>

package/icons/book-opened.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="bookOpenedIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="bookOpenedIconTitle">Book</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M12 6s-2-2-4-2-5 2-5 2v14s3-2 5-2 4 2 4 2c1.333-1.333 2.667-2 4-2 1.333 0 3 .667 5 2V6c-2-1.333-3.667-2-5-2-1.333 0-2.667.667-4 2z"/> <path stroke-linecap="round" d="M12 6v14"/> </symbol></svg>

package/icons/book.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="bookIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="bookIconTitle">Book</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M19 3v18H8a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h11z"/> <path d="M5 18a3 3 0 0 1 3-3h11"/> </symbol></svg>

package/icons/bookmark.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="bookmarkIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="bookmarkIconTitle">Bookmark</title> <symbol id="icon" viewBox="0 0 24 24"> <path d="M17,6.65881537 L17,19.5857864 L12,16.4078051 L7,19.5857864 L7,6.65881537 C7,5.19039219 8.11928813,4 9.5,4 L14.5,4 C15.8807119,4 17,5.19039219 17,6.65881537 Z"/> </symbol></svg>