@luxfi/core 5.2.7 → 5.2.8

package/components/header/desktop.tsx

@@ -1,49 +1,49 @@
-import React from 'react'
-
-import { NavItems } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
-
-import { Logo } from '..'
-
-import DesktopBagPopup from '../commerce/desktop-bag-popup'
-import BagButton from '../commerce/bag-button'
-import  DesktopNav  from '../commerce/desktop-nav-menu'
-
-
-import type { LinkDef } from '@hanzo/ui/types'
-
-const DesktopHeader: React.FC<{
-  currentAs: string | undefined
-  links: LinkDef[]
-  className?: string
-}> = ({
-  currentAs,
-  links,
-  className = ''
-}) => {
-
-    // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
-    // (vs be beat out by 'text-color-nav')
-  return (
-    <header className={cn('bg-background fixed z-header top-0 left-0 right-0', className)} >
-      {/* md or larger */}
-      <div className={
-        'flex flex-row h-[80px] items-center  justify-between ' +
-        'px-[8px] w-full mx-auto max-w-screen'
-      }>
-        <Logo size='md' href='/' className='hidden lg:flex' key='two' layout='text-only'/>
-        <Logo size='sm' href='/' className='hidden md:flex lg:hidden' key='one' layout='text-only'/>
-        {/* md or larger */}
-        <div className='flex gap-4 items-center'>
-          <DesktopNav links = {links}/>
-          <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
-          <AuthWidget/>
-        </div>
-      </div>
-    </header>
-  )
-}
-
-export default DesktopHeader
-
+import React from 'react'
+
+import { NavItems } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { AuthWidget } from '@hanzo/auth/components'
+
+import { Logo } from '..'
+
+import DesktopBagPopup from '../commerce/desktop-bag-popup'
+import BagButton from '../commerce/bag-button'
+import  DesktopNav  from '../commerce/desktop-nav-menu'
+
+
+import type { LinkDef } from '@hanzo/ui/types'
+
+const DesktopHeader: React.FC<{
+  currentAs: string | undefined
+  links: LinkDef[]
+  className?: string
+}> = ({
+  currentAs,
+  links,
+  className = ''
+}) => {
+
+    // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
+    // (vs be beat out by 'text-color-nav')
+  return (
+    <header className={cn('bg-background fixed z-header top-0 left-0 right-0', className)} >
+      {/* md or larger */}
+      <div className={
+        'flex flex-row h-[80px] items-center  justify-between ' +
+        'px-[8px] w-full mx-auto max-w-screen'
+      }>
+        <Logo size='md' href='/' outerClx='hidden lg:flex' key='two' variant='text-only'/>
+        <Logo size='sm' href='/' outerClx='hidden md:flex lg:hidden' key='one' variant='text-only'/>
+        {/* md or larger */}
+        <div className='flex gap-4 items-center'>
+          <DesktopNav links = {links}/>
+          <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
+          <AuthWidget/>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default DesktopHeader
+

package/components/header/index.tsx

@@ -1,52 +1,52 @@
-'use client'
-import React from 'react'
-
-import type { SiteDef } from '../../site-def'
-
-import DesktopHeader from './desktop'
-import MobileHeader from './mobile'
-import { cn } from '@hanzo/ui/util'
-import { ChatWidget } from '../../components'
-
-const Header: React.FC<{
-  siteDef: SiteDef
-  className?: string
-}> = ({
-  siteDef,
-  className = ''
-}) => {
-
-    // TODO
-    const [open, setOpen] = React.useState<boolean>(false);
-
-    const { nav: { common, featured }, currentAs } = siteDef
-    const links = (featured) ? [...common, ...featured] : common
-    const isDesktopView = (): boolean => {
-      if (typeof window === 'undefined') return false 
-      return window.innerWidth > 768 
-    }
-
-    return (<>
-      <DesktopHeader
-        className={cn(className, 'hidden md:flex')}
-        links={links}
-        currentAs={currentAs}
-      />
-      <MobileHeader
-        className={cn(className, 'md:hidden')}
-        links={links}
-        currentAs={currentAs}
-        setChatbotOpen={setOpen}
-      />
-      {isDesktopView() && (
-        <ChatWidget
-          title='LUX'
-          subtitle='AI'
-          chatbotUrl='https://lux.chat/iframe'
-          suggestedQuestions={siteDef.chatbot?.suggestedQuestions ?? []}
-        />
-      )}
-    </>)
-  }
-
-export default Header
+'use client'
+import React from 'react'
+
+import type { SiteDef } from '../../site-def'
+
+import DesktopHeader from './desktop'
+import MobileHeader from './mobile'
+import { cn } from '@hanzo/ui/util'
+import { ChatWidget } from '../../components'
+
+const Header: React.FC<{
+  siteDef: SiteDef
+  className?: string
+}> = ({
+  siteDef,
+  className = ''
+}) => {
+
+    // TODO
+    const [open, setOpen] = React.useState<boolean>(false);
+
+    const { nav: { common, featured }, currentAs } = siteDef
+    const links = (featured) ? [...common, ...featured] : common
+    const isDesktopView = (): boolean => {
+      if (typeof window === 'undefined') return false 
+      return window.innerWidth > 768 
+    }
+
+    return (<>
+      <DesktopHeader
+        className={cn(className, 'hidden md:flex')}
+        links={links}
+        currentAs={currentAs}
+      />
+      <MobileHeader
+        className={cn(className, 'md:hidden')}
+        links={links}
+        currentAs={currentAs}
+        setChatbotOpen={setOpen}
+      />
+      {isDesktopView() && (
+        <ChatWidget
+          title='LUX'
+          subtitle='AI'
+          chatbotUrl='https://lux.chat/iframe'
+          suggestedQuestions={siteDef.chatbot?.suggestedQuestions ?? []}
+        />
+      )}
+    </>)
+  }
+
+export default Header

package/components/header/mobile.tsx

@@ -1,166 +1,163 @@
-'use client'
-import React, { useState, useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-
-import { CartPanel, useCommerce } from '@hanzo/commerce'
-import { AuthWidget, LoginPanel } from '@hanzo/auth/components'
-import sendGAEvent from '../../next/analytics/google-analytics'
-import * as Icons from '../icons'
-
-import { Logo } from '..'
-
-import MenuToggleButton from '../commerce/mobile-menu-toggle-button'
-import BagButton from '../commerce/bag-button'
-import MobileBagDrawer from '../commerce/mobile-bag-drawer'
-import NavMenu from '../commerce/mobile-nav-menu'
-
-const bagClx = 'mt-4 mb-8 border-none py-0 px-4 w-full ' +
-  'sm:min-w-[350px] sm:max-w-[500px] sm:mx-auto min-h-[60vh] max-h-[70vh] ' +
-  'sm:animate-in sm:zoom-in-90 '
-
-const MobileHeader: React.FC<{
-  currentAs: string | undefined
-  links: LinkDef[]
-  className?: string,
-  setChatbotOpen: (open: boolean) => void,
-}> = ({
-  currentAs,
-  links,
-  className = '',
-  setChatbotOpen,
-}) => {
-    const cmmc = useCommerce()
-    const [menuState, setMenuState] = useState<'closed' | 'nav' | 'login' | 'bag'>('closed')
-    const [bagDrawerOpen, setBagDrawerOpen] = useState<boolean>(false)
-    const router = useRouter()
-
-    useEffect(() => {
-      if (menuState === 'bag' || bagDrawerOpen) {
-        sendGAEvent('view_cart', {
-          items: cmmc.cartItems.map((item) => ({
-            item_id: item.sku,
-            item_name: item.title,
-            item_category: item.familyId,
-            price: item.price,
-            quantity: item.quantity
-          })),
-          value: cmmc.cartTotal,
-          currency: 'USD',
-        })
-      }
-    }, [menuState, bagDrawerOpen])
-
-    const menuOpen = () => (menuState !== 'closed')
-
-    const onLoginChanged = (token: string) => {
-      // by def, menu was in state 'login'
-      if (!!token) { setMenuState('nav') }
-    }
-
-    const setMenuOpen = (open: boolean) => {
-      if (!open) {
-        setMenuState('closed')
-      }
-      else {
-        setMenuState('nav')
-      }
-    }
-
-    const handleCheckout = () => {
-      setMenuState('closed')
-      setBagDrawerOpen(false)
-      router.push('/checkout')
-    }
-
-    const openBag = () => {
-      if (menuOpen()) {
-        setMenuState('bag')
-      }
-      else {
-        setBagDrawerOpen(true)
-      }
-    }
-    // header element MUST be fixed, and NOT sticky.  Or else drawer breaks on mobile browsers
-    return (<>
-      <header className={cn(
-        `bg-background fixed z-header top-0 left-0 w-full h-19 ${menuOpen() ? 'hidden' : 'block'}`,
-        className
-      )}>
-        {/* smaller than md: mobile style drawer menu; h-11 is 44px, the standard mobile header height */}
-        <div className="flex h-11 items-center justify-between pl-6 pr-4">
-          <div className='h-[74px] w-pr-100 flex flex-row justify-between items-center font-bold'>
-            <Logo href='/' size='sm' className={'top-[3px] h-full'} layout='text-only' />
-            {/* Not that key to the cross-fade effect 
-              is that this is **on top of** the logo. */}
-            {menuOpen() && (
-              <div className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
-              'flex flex-row ' +
-              'bg-background animate-mobile-menu-open'
-            }>
-                <Icons.Avatar className='self-center ' />
-              </div>
-            )}
-            <div className='flex gap-0 flex-row'>
-              <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
-              <MenuToggleButton className='text-foreground' open={menuOpen()} setOpen={setMenuOpen} />
-            </div>
-
-          </div>
-
-        </div>
-      </header>
-      <MobileBagDrawer
-        className=''
-        open={bagDrawerOpen}
-        setOpen={setBagDrawerOpen}
-        handleCheckout={handleCheckout}
-      />
-      {menuOpen() && (
-        <div className={
-          'fixed top-0 left-0 w-full h-full ' +
-          // z must below header itself
-          'flex flex-column bg-background z-below-header animate-mobile-menu-open'
-        }>
-          {menuState === 'login' ? (
-            <LoginPanel noHeading onLoginChanged={onLoginChanged} className='sm:animate-in sm:zoom-in-90' />
-          ) : (
-            menuState === 'bag' ? (
-
-              <CartPanel
-                handleCheckout={() => { router.push('/checkout') }}
-                className={bagClx}
-                listClx='rounded-sm'
-                scrollAfter={6}
-                scrollHeightClx='h-[80vh]'
-                itemClx='mt-2'
-                totalClx='sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-level-1'
-                buttonClx='max-w-[220px] flex-none'
-              >
-                <div className='flex flex-row items-center flex-none justify-center '>
-                  <Icons.bag className='mr-2 relative w-4 h-5 fill-foreground ' />
-                  <p className='font-heading text-foreground text-default'>Your Bag</p>
-                </div>
-                <div className='h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none' />
-              </CartPanel>
-
-            ) : ( /* menuState === 'nav' */
-              <NavMenu
-                currentAs={currentAs}
-                links={links}
-                className='sm:animate-in sm:zoom-in-90 w-full'
-                commonItemClx='px-0 text-xl h-16 justify-start '
-                setMenuState={setMenuState}
-                setChatbotOpen={setChatbotOpen}
-                setMenuOpen={setMenuOpen}
-              />
-            )
-          )}
-        </div>
-      ) /* menuOpen */}
-    </>)
-  }
-
-export default MobileHeader
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { cn } from '@hanzo/ui/util'
+
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+import { AuthWidget, LoginPanel } from '@hanzo/auth/components'
+import sendGAEvent from '../../next/analytics/google-analytics'
+import * as Icons from '../icons'
+
+import { Logo } from '..'
+
+import MenuToggleButton from '../commerce/mobile-menu-toggle-button'
+import BagButton from '../commerce/bag-button'
+import MobileBagDrawer from '../commerce/mobile-bag-drawer'
+import NavMenu from '../commerce/mobile-nav-menu'
+
+const bagClx = 'mt-4 mb-8 border-none py-0 px-4 w-full ' +
+  'sm:min-w-[350px] sm:max-w-[500px] sm:mx-auto min-h-[60vh] max-h-[70vh] ' +
+  'sm:animate-in sm:zoom-in-90 '
+
+const MobileHeader: React.FC<{
+  currentAs: string | undefined
+  links: LinkDef[]
+  className?: string,
+  setChatbotOpen: (open: boolean) => void,
+}> = ({
+  currentAs,
+  links,
+  className = '',
+  setChatbotOpen,
+}) => {
+    const cmmc = useCommerce()
+    const [menuState, setMenuState] = useState<'closed' | 'nav' | 'login' | 'bag'>('closed')
+    const [bagDrawerOpen, setBagDrawerOpen] = useState<boolean>(false)
+    const router = useRouter()
+
+    useEffect(() => {
+      if (menuState === 'bag' || bagDrawerOpen) {
+        sendGAEvent('view_cart', {
+          items: cmmc.cartItems.map((item) => ({
+            item_id: item.sku,
+            item_name: item.title,
+            item_category: item.familyId,
+            price: item.price,
+            quantity: item.quantity
+          })),
+          value: cmmc.cartTotal,
+          currency: 'USD',
+        })
+      }
+    }, [menuState, bagDrawerOpen])
+
+    const menuOpen = () => (menuState !== 'closed')
+
+    const onLoginChanged = (token: string) => {
+      // by def, menu was in state 'login'
+      if (!!token) { setMenuState('nav') }
+    }
+
+    const setMenuOpen = (open: boolean) => {
+      if (!open) {
+        setMenuState('closed')
+      }
+      else {
+        setMenuState('nav')
+      }
+    }
+
+    const handleCheckout = () => {
+      setMenuState('closed')
+      setBagDrawerOpen(false)
+      router.push('/checkout')
+    }
+
+    const openBag = () => {
+      if (menuOpen()) {
+        setMenuState('bag')
+      }
+      else {
+        setBagDrawerOpen(true)
+      }
+    }
+    // header element MUST be fixed, and NOT sticky.  Or else drawer breaks on mobile browsers
+    return (<>
+      <header className={cn(
+        `bg-background fixed z-header top-0 left-0 w-full ${menuOpen() ? 'hidden' : 'block'}`,
+        className
+      )}>
+        {/* smaller than md: mobile style drawer menu; h-11 is 44px, the standard mobile header height */}
+        <div className='w-full h-11 flex flex-row justify-between items-center font-bold pl-6 pr-4'>
+          <Logo href='/' size='sm' outerClx={'top-[3px] h-full'} variant='text-only' />
+          {/* Not that key to the cross-fade effect 
+            is that this is **on top of** the logo. */}
+          {menuOpen() && (
+            <div className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
+            'flex flex-row ' +
+            'bg-background animate-mobile-menu-open'
+          }>
+              <Icons.Avatar className='self-center ' />
+            </div>
+          )}
+          <div className='flex gap-0 flex-row'>
+            <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
+            <MenuToggleButton className='text-foreground' open={menuOpen()} setOpen={setMenuOpen} />
+          </div>
+
+        </div>
+      </header>
+      <MobileBagDrawer
+        className=''
+        open={bagDrawerOpen}
+        setOpen={setBagDrawerOpen}
+        handleCheckout={handleCheckout}
+      />
+      {menuOpen() && (
+        <div className={
+          'fixed top-0 left-0 w-full h-full ' +
+          // z must below header itself
+          'flex flex-column bg-background z-below-header animate-mobile-menu-open'
+        }>
+          {menuState === 'login' ? (
+            <LoginPanel noHeading onLoginChanged={onLoginChanged} className='sm:animate-in sm:zoom-in-90' />
+          ) : (
+            menuState === 'bag' ? (
+
+              <CartPanel
+                handleCheckout={() => { router.push('/checkout') }}
+                className={bagClx}
+                listClx='rounded-sm'
+                scrollAfter={6}
+                scrollHeightClx='h-[80vh]'
+                itemClx='mt-2'
+                totalClx='sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-level-1'
+                buttonClx='max-w-[220px] flex-none'
+              >
+                <div className='flex flex-row items-center flex-none justify-center '>
+                  <Icons.bag className='mr-2 relative w-4 h-5 fill-foreground ' />
+                  <p className='font-heading text-foreground text-default'>Your Bag</p>
+                </div>
+                <div className='h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none' />
+              </CartPanel>
+
+            ) : ( /* menuState === 'nav' */
+              <NavMenu
+                currentAs={currentAs}
+                links={links}
+                className='sm:animate-in sm:zoom-in-90 w-full'
+                commonItemClx='px-0 text-xl h-16 justify-start '
+                setMenuState={setMenuState}
+                setChatbotOpen={setChatbotOpen}
+                setMenuOpen={setMenuOpen}
+              />
+            )
+          )}
+        </div>
+      ) /* menuOpen */}
+    </>)
+  }
+
+export default MobileHeader

package/components/header/theme-toggle.tsx

@@ -1,26 +1,26 @@
-'use client'
-
-import React from 'react'
-import { Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
-
-import { Button } from '@hanzo/ui/primitives'
-
-const ThemeToggle: React.FC = () => {
-
-  const { setTheme, theme } = useTheme()
-
-  return (
-    <Button
-      variant='ghost'
-      size='icon'
-      onClick={() => {setTheme(theme === 'light' ? 'dark' : 'light')}}
-    >
-      <Sun className='h-[1.5rem] w-[1.3rem] dark:hidden' />
-      <Moon className='hidden h-5 w-5 dark:block' />
-      <span className='sr-only'>Toggle theme</span>
-    </Button>
-  )
-}
-
-export default ThemeToggle
+'use client'
+
+import React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from '@hanzo/ui/primitives'
+
+const ThemeToggle: React.FC = () => {
+
+  const { setTheme, theme } = useTheme()
+
+  return (
+    <Button
+      variant='ghost'
+      size='icon'
+      onClick={() => {setTheme(theme === 'light' ? 'dark' : 'light')}}
+    >
+      <Sun className='h-[1.5rem] w-[1.3rem] dark:hidden' />
+      <Moon className='hidden h-5 w-5 dark:block' />
+      <span className='sr-only'>Toggle theme</span>
+    </Button>
+  )
+}
+
+export default ThemeToggle

package/components/icons/avatar.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const Avatar: React.FC<LucideProps> = (props: LucideProps) => (
-    <svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-        <path d="M8.66112 10.3544C6.14668 10.3544 4.32664 6.91073 4.32664 4.59206C4.32664 2.12213 6.27238 0.115723 8.66112 0.115723C11.0499 0.115723 12.9956 2.12514 12.9956 4.59206C12.9956 6.91398 11.1756 10.3544 8.66112 10.3544ZM8.66112 1.1542C6.82539 1.1542 5.33242 2.69703 5.33242 4.59185C5.33242 6.65402 6.94715 9.31553 8.66112 9.31553C10.3761 9.31553 11.9898 6.65387 11.9898 4.5925C11.9898 2.69668 10.4969 1.15398 8.66112 1.15398V1.1542Z" fill="white" />
-        <path d="M6.79776 11.3345H10.5242C13.7802 11.3345 16.4302 14.0712 16.4302 17.4338C16.4302 19.0831 15.1297 20.423 13.5356 20.423H3.78923C2.19216 20.423 0.894689 19.0831 0.894689 17.4338C0.893706 14.0712 3.54156 11.3345 6.79776 11.3345ZM3.78819 19.3844H13.5337C14.5749 19.3844 15.4225 18.509 15.4225 17.4338C15.4225 14.6453 13.2253 12.3731 10.5223 12.3731H6.79862C4.0956 12.3731 1.89839 14.6423 1.89839 17.4338C1.89937 18.509 2.74701 19.3844 3.78816 19.3844H3.78819Z" fill="white" />
-    </svg>
-)
-
-export default Avatar
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Avatar: React.FC<LucideProps> = (props: LucideProps) => (
+    <svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M8.66112 10.3544C6.14668 10.3544 4.32664 6.91073 4.32664 4.59206C4.32664 2.12213 6.27238 0.115723 8.66112 0.115723C11.0499 0.115723 12.9956 2.12514 12.9956 4.59206C12.9956 6.91398 11.1756 10.3544 8.66112 10.3544ZM8.66112 1.1542C6.82539 1.1542 5.33242 2.69703 5.33242 4.59185C5.33242 6.65402 6.94715 9.31553 8.66112 9.31553C10.3761 9.31553 11.9898 6.65387 11.9898 4.5925C11.9898 2.69668 10.4969 1.15398 8.66112 1.15398V1.1542Z" fill="white" />
+        <path d="M6.79776 11.3345H10.5242C13.7802 11.3345 16.4302 14.0712 16.4302 17.4338C16.4302 19.0831 15.1297 20.423 13.5356 20.423H3.78923C2.19216 20.423 0.894689 19.0831 0.894689 17.4338C0.893706 14.0712 3.54156 11.3345 6.79776 11.3345ZM3.78819 19.3844H13.5337C14.5749 19.3844 15.4225 18.509 15.4225 17.4338C15.4225 14.6453 13.2253 12.3731 10.5223 12.3731H6.79862C4.0956 12.3731 1.89839 14.6423 1.89839 17.4338C1.89937 18.509 2.74701 19.3844 3.78816 19.3844H3.78819Z" fill="white" />
+    </svg>
+)
+
+export default Avatar

package/components/icons/bag-icon.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg fill="none" viewBox="0 0 1019 1281" {...props}>
-    <path d="m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z" fill="currentColor"/>
-  </svg>
-)
-
-export default BagIcon
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg fill="none" viewBox="0 0 1019 1281" {...props}>
+    <path d="m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z" fill="currentColor"/>
+  </svg>
+)
+
+export default BagIcon