import styled from "styled-components" ; export function IconHomeActive ( ) { return ( < svg width = { 24 } height = { 25 } viewBox = "0 0 24 25" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path fillRule = "evenodd" clipRule = "evenodd" d = "M12.92 2.956l7.5 5.834c.366.284.58.72.58 1.184V20.24a2 2 0 01-2 2h-3.46l.005-.09v-7.274l-.004-.155a2.637 2.637 0 00-2.632-2.48h-1.818l-.155.003a2.636 2.636 0 00-2.481 2.632v7.273l.004.09L5 22.24a2 2 0 01-2-2V9.974c0-.463.214-.9.58-1.184l7.5-5.834c.54-.42 1.3-.42 1.84 0zm-.01 10.92l.108.006a1 1 0 01.891.994v7.273l.005.09h-3.829l.006-.09v-7.273l.006-.109a1 1 0 01.994-.89h1.819z" fill = "#146EB4" / > < /svg>); } export function IconCategoryActive ( ) { return ( < svg width = { 24 } height = { 25 } viewBox = "0 0 24 25" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path fillRule = "evenodd" clipRule = "evenodd" d = "M20.497 13.059a1.5 1.5 0 011.5 1.5v6a1.5 1.5 0 01-1.5 1.5h-6a1.5 1.5 0 01-1.5-1.5v-6a1.5 1.5 0 011.5-1.5h6zm-10.997 0a1.5 1.5 0 011.5 1.5v6a1.5 1.5 0 01-1.5 1.5h-6a1.5 1.5 0 01-1.5-1.5v-6a1.5 1.5 0 011.5-1.5h6zm0-11a1.5 1.5 0 011.5 1.5v6a1.5 1.5 0 01-1.5 1.5h-6a1.5 1.5 0 01-1.5-1.5v-6a1.5 1.5 0 011.5-1.5h6zm10.997 0a1.5 1.5 0 011.5 1.5v6a1.5 1.5 0 01-1.5 1.5h-6a1.5 1.5 0 01-1.5-1.5v-6a1.5 1.5 0 011.5-1.5h6z" fill = "#146EB4" / > < /svg>); } export function IconBagActive ( ) { return ( < svg width = { 24 } height = { 24 } viewBox = "0 0 24 24" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M2.148 5.992c0-.14.038-.278.104-.399l.006-.01.03-.05.016-.024.014-.019 3-4a.85.85 0 01.567-.332l.113-.008h12c.23 0 .447.093.606.254l.074.086 3 4 .01.012c.01.014.02.027.027.042l-.037-.054a.849.849 0 01.17.51v14a2.85 2.85 0 01-2.683 2.845l-.167.005h-14a2.85 2.85 0 01-2.845-2.683L2.148 20V5.992zm13.85 3.158a.85.85 0 00-.85.85 3.15 3.15 0 11-6.3 0 .85.85 0 10-1.7 0 4.85 4.85 0 109.7 0 .85.85 0 00-.85-.85zm1.575-6.3H6.423l-1.728 2.3h14.602l-1.724-2.3z" fill = "#146EB4" / > < /svg>); } export const IconHomeInactive = ( ) => ( < svg width = { 24 } height = { 25 } viewBox = "0 0 24 25" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M11.498 2.322L3.316 8.686A.816.816 0 003 9.332v10a2.636 2.636 0 002.636 2.636h12.728A2.636 2.636 0 0021 19.332v-10a.819.819 0 00-.316-.646l-8.182-6.364a.817.817 0 00-1.004 0zM12 4.005l7.364 5.727v9.6a1 1 0 01-1 1H5.636l-.109-.006a1 1 0 01-.89-.994V9.73L12 4.005z" fill = "#B3B3B3" / > < path d = "M12.908 11.24a2.637 2.637 0 012.631 2.482l.004.155v7.273a.818.818 0 01-1.63.103l-.005-.103v-7.273a1 1 0 00-.89-.994l-.11-.006H11.09a1 1 0 00-.994.891l-.006.11v7.272a.818.818 0 01-1.63.103l-.006-.103v-7.273a2.637 2.637 0 012.481-2.632l.155-.004h1.819z" fill = "#B3B3B3" / > < /svg>); export const IconCategoryInactive = ( ) => ( < svg width = { 24 } height = { 25 } viewBox = "0 0 24 25" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M3.604 9.541v-5.79h5.79v5.79h-5.79zM14.588 9.541v-5.79h5.791v5.79h-5.79zM3.604 20.575v-5.791h5.79v5.79h-5.79zM14.588 20.575v-5.791h5.791v5.79h-5.79z" stroke = "#B3B3B3" strokeWidth = { 1.2 } / > < /svg>); export const IconBagInactive = ( ) => ( < svg width = { 24 } height = { 24 } viewBox = "0 0 24 24" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M17.998 1.15h-12a.849.849 0 00-.68.34l-3 4a.852.852 0 00-.17.51v14a2.85 2.85 0 002.85 2.85h14a2.85 2.85 0 002.85-2.85V6a.852.852 0 00-.17-.51l-3-4a.849.849 0 00-.68-.34zm-.425 1.7l2.575 3.433V20a1.15 1.15 0 01-1.15 1.15h-14l-.125-.007A1.15 1.15 0 013.848 20V6.282L6.422 2.85h11.151z" fill = "#B3B3B3" / > < path d = "M20.998 5.15a.85.85 0 01.107 1.693l-.107.007h-18a.85.85 0 01-.107-1.693l.107-.007h18zm-5 4c.47 0 .85.38.85.85a4.85 4.85 0 11-9.7 0 .85.85 0 111.7 0 3.15 3.15 0 106.3 0c0-.47.38-.85.85-.85z" fill = "#B3B3B3" / > < /svg>); export const IconOrdersInactive = ( ) => ( < svg width = { 24 } height = { 25 } viewBox = "0 0 24 25" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M2.755 18.484a1.552 1.552 0 11.001 3.105 1.552 1.552 0 010-3.105zm18.99.452a1.1 1.1 0 01.12 2.194l-.12.006h-13a1.1 1.1 0 01-.12-2.193l.12-.007h13zm-18.99-7.952a1.552 1.552 0 11.001 3.105 1.552 1.552 0 010-3.105zm18.99.452a1.1 1.1 0 01.12 2.194l-.12.006h-13a1.1 1.1 0 01-.12-2.193l.12-.007h13zM2.755 3.484a1.552 1.552 0 11.001 3.105 1.552 1.552 0 010-3.105zm18.99.452a1.1 1.1 0 01.12 2.194l-.12.006h-13a1.1 1.1 0 01-.12-2.193l.12-.007h13z" fill = "#B3B3B3" / > < /svg>); export const IconOrdersActive = ( ) => ( < svg width = { 24 } height = { 25 } viewBox = "0 0 24 25" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M2.755 18.484a1.552 1.552 0 11.001 3.105 1.552 1.552 0 010-3.105zm18.99.452a1.1 1.1 0 01.12 2.194l-.12.006h-13a1.1 1.1 0 01-.12-2.193l.12-.007h13zm-18.99-7.952a1.552 1.552 0 11.001 3.105 1.552 1.552 0 010-3.105zm18.99.452a1.1 1.1 0 01.12 2.194l-.12.006h-13a1.1 1.1 0 01-.12-2.193l.12-.007h13zM2.755 3.484a1.552 1.552 0 11.001 3.105 1.552 1.552 0 010-3.105zm18.99.452a1.1 1.1 0 01.12 2.194l-.12.006h-13a1.1 1.1 0 01-.12-2.193l.12-.007h13v0z" fill = "#146EB4" stroke = "#146EB4" strokeWidth = { 0.4 } / > < /svg>); export const IconMinus = ( ) => { return ( < svg xmlns = "http://www.w3.org/2000/svg" width = "12" height = "2" viewBox = "0 0 12 2" > < line x2 = "10" y1 = "1" y2 = "1" fill = "none" stroke = "#146EB4" strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = "1.7" transform = "translate(1)" > < /line> < /svg>); } ; export const IconPlus = ( ) => { return ( < svg xmlns = "http://www.w3.org/2000/svg" width = { 12 } height = { 12 } viewBox = "0 0 12 12" > < g fill = "#146EB4" > < path d = "M6 0a.75.75 0 01.745.663L6.75.75v10.5a.75.75 0 01-1.495.087l-.005-.087V.75A.75.75 0 016 0z" / > < path d = "M11.25 5.25a.75.75 0 01.087 1.495l-.087.005H.75a.75.75 0 01-.087-1.495L.75 5.25h10.5z" / > < /g> < /svg>); } ; export const OuterContainer = styled . div `
  padding: 0 1rem;
  width: 100%;
  margin: 0 auto;
  max-width: ${ ( { theme } ) => theme . maxWidth };
  margin: 0 auto;
` ; export const LeftArrow = ( ) => ( < svg className = "prefix__mr-1 prefix__mt-md-1 prefix__ml-md-0" xmlns = "http://www.w3.org/2000/svg" width = { 24 } height = { 24 } viewBox = "0 0 24 24" > < g fill = "none" fillRule = "evenodd" stroke = "#353535" strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } > < path d = "M10.02 3.225l-8.36 8.55 8.36 8.55M1.66 11.775h21.12" / > < /g> < /svg>); export const IconCategory = ( ) => ( < svg width = { 24 } height = { 24 } viewBox = "0 0 24 24" className = "details-icon" > < g fill = "none" fillRule = "evenodd" strokeLinejoin = "round" strokeWidth = { 1.8 } transform = "translate(3.004 3)" > < rect width = { 6.991 } height = { 6.991 } rx = { 0.5 } / > < rect width = { 6.991 } height = { 6.991 } x = { 10.983 } rx = { 0.5 } / > < g transform = "translate(0 11.033)" > < rect width = { 6.991 } height = { 6.991 } rx = { 0.5 } / > < rect width = { 6.991 } height = { 6.991 } x = { 10.983 } rx = { 0.5 } / > < /g> < /g> < /svg>); export const IconCart = ( ) => ( < svg width = { 24 } height = { 24 } viewBox = "0 0 24 24" className = "details-icon" > < g strokeWidth = { 0 } > < path d = "M18 1.15H6a.849.849 0 00-.68.34l-3 4a.852.852 0 00-.17.51v14A2.85 2.85 0 005 22.85h14A2.85 2.85 0 0021.85 20V6a.852.852 0 00-.17-.51l-3-4a.849.849 0 00-.68-.34zm-.425 1.7l2.575 3.433V20A1.15 1.15 0 0119 21.15H5l-.125-.007A1.15 1.15 0 013.85 20V6.282L6.424 2.85h11.151z" / > < path d = "M21 5.15a.85.85 0 01.107 1.693L21 6.85H3a.85.85 0 01-.107-1.693L3 5.15h18zm-5 4c.47 0 .85.38.85.85a4.85 4.85 0 11-9.7 0 .85.85 0 111.7 0 3.15 3.15 0 106.3 0c0-.47.38-.85.85-.85z" / > < /g> < /svg>); export const IllustrationNotFound = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" width = { 216 } height = { 128 } viewBox = "0 0 216 128" > < g fill = "none" fillRule = "evenodd" > < path fill = "#EE741F" d = "M119 29a7 7 0 110 14h64a7 7 0 110 14h22a7 7 0 110 14h-19a7 7 0 100 14h6a7 7 0 110 14h-52a7.056 7.056 0 01-1.5-.161A7.056 7.056 0 01137 99H46a7 7 0 110-14H7a7 7 0 110-14h40a7 7 0 100-14H22a7 7 0 110-14h40c-3.866 0-1.033-3.134-1.033-7s5.799-5.67 9.665-5.67L119 29zm90 56a7 7 0 110 14 7 7 0 010-14z" opacity = { 0.1 } / > < g fill = "#FFF" stroke = "#EE741F" strokeLinecap = "round" strokeWidth = { 2.75 } transform = "translate(54 6)" > < circle cx = { 52.8 } cy = { 52.8 } r = { 52.8 } / > < path d = "M107.134 115.086L86.79 94.49" / > < path d = "M30.03 80.751C35.134 72.892 43.66 68.2 52.843 68.2c9.121 0 17.618 4.641 22.727 12.419-11.525-17.652-35.748-15.496-45.54.132zM77.55 47.3c-5.468 0-9.9-4.432-9.9-9.9h19.8c0 5.468-4.432 9.9-9.9 9.9h0zm-59.4-9.9h19.8c0 5.468-4.432 9.9-9.9 9.9s-9.9-4.432-9.9-9.9h0z" strokeLinejoin = "round" / > < /g> < /g> < /svg>); const SEmtpyBagSVG = styled . svg `
  width: 324px;
  height: 188px;
` ; export const IllustrationBag = ( ) => ( < SEmtpyBagSVG xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 216 126" > < g fill = "none" fillRule = "evenodd" transform = "translate(0 -1)" > < path fill = "#FFF0E7" d = "M79 32h67l-6 9 8 6H77l9-6z" / > < path stroke = "#EE741F" strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2.5 } d = "M53 111.5h21.454m-34.326 0H47m136.128 0H186m-30 0h22.428" / > < path fill = "#FFF" stroke = "#EE741F" strokeLinecap = "round" strokeWidth = { 2.5 } d = "M76.006 89.215V49c0-1.657 1.36-3 3.037-3h69.48c1.092 0 1.977.895 1.977 2v73c0 2.21-1.77 4-3.955 4H79.961c-2.184 0-3.955-1.79-3.955-4v-19m0-4.103v-4.503m.021 8.162V88.91" / > < path stroke = "#EE741F" strokeWidth = { 2.5 } d = "M78 46V34c0-1.105.804-2 1.795-2h66.41c.991 0 1.795.895 1.795 2v12" / > < circle cx = { 96.5 } cy = { 63.5 } r = { 3.5 } fill = "#FFF" stroke = "#EE741F" strokeWidth = { 2.5 } / > < circle cx = { 129.5 } cy = { 63.5 } r = { 3.5 } fill = "#FFF" stroke = "#EE741F" strokeWidth = { 2.5 } / > < path stroke = "#EE741F" strokeLinecap = "round" strokeWidth = { 2.5 } d = "M129 67c0 8.837-7.163 16-16 16s-16-7.163-16-16M79.061 32.997l7.107 7.015a1 1 0 01-.218 1.587L78 46h0M147.109 33.07l-6.802 6.937a1 1 0 00.235 1.578L148.636 46h0" / > < path stroke = "#EE741F" strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2.5 } d = "M139.1 7.303L128 19.756M113 3v16.756M87 7.303l11.1 12.453" / > < path fill = "#EE741F" d = "M119 30a7 7 0 010 14h64a7 7 0 010 14h22a7 7 0 010 14h-19a7 7 0 000 14h6a7 7 0 010 14h-52a7.026 7.026 0 01-1.5-.161 7.026 7.026 0 01-1.5.161H46a7 7 0 010-14H7a7 7 0 010-14h40a7 7 0 000-14H22a7 7 0 010-14h40a7 7 0 010-14h57zm90 56a7 7 0 110 14 7 7 0 010-14z" opacity = { 0.1 } / > < /g> < /SEmtpyBagSVG>); export const IconCheckSuccess = ( ) => { return ( < svg id = "icon-success" viewBox = "0 0 105 105" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < circle cx = { 52.01 } cy = { 52.393 } r = { 52 } fill = "#3A7BC8" / > < path d = "M29.775 51.206l14.702 17.969 29.768-29.948" stroke = "#fff" strokeWidth = { 7 } strokeLinecap = "round" strokeLinejoin = "round" / > < /svg>); } ;