npm - @stackshift-ui/navigation - Versions diffs - 6.0.10 → 6.0.11 - Mend

@stackshift-ui/navigation 6.0.10 → 6.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/navigation",
   "description": "",
-  "version": "6.0.10",
+  "version": "6.0.11",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,23 +29,23 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.7",
-    "@stackshift-ui/typescript-config": "6.0.7"
+    "@stackshift-ui/typescript-config": "6.0.8",
+    "@stackshift-ui/eslint-config": "6.0.8"
   },
   "dependencies": {
     "@portabletext/react": "^3.1.0",
-    "@stackshift-ui/scripts": "6.0.7",
-    "@stackshift-ui/button": "6.0.8",
-    "@stackshift-ui/system": "6.0.8",
-    "@stackshift-ui/text": "6.0.8",
-    "@stackshift-ui/link": "6.0.8",
-    "@stackshift-ui/container": "6.0.8",
-    "@stackshift-ui/image": "6.0.8",
-    "@stackshift-ui/section": "6.0.8",
-    "@stackshift-ui/flex": "6.0.8"
+    "@stackshift-ui/scripts": "6.0.8",
+    "@stackshift-ui/button": "6.0.9",
+    "@stackshift-ui/system": "6.0.9",
+    "@stackshift-ui/text": "6.0.9",
+    "@stackshift-ui/section": "6.0.9",
+    "@stackshift-ui/image": "6.0.9",
+    "@stackshift-ui/container": "6.0.9",
+    "@stackshift-ui/link": "6.0.9",
+    "@stackshift-ui/flex": "6.0.9"
   },
   "peerDependencies": {
-    "@stackshift-ui/system": ">=6.0.8",
+    "@stackshift-ui/system": ">=6.0.9",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",

package/src/navigation_a.tsx CHANGED Viewed

@@ -22,7 +22,7 @@ export default function Navigation_A({
   return (
     <Section className="bg-background">
-      <Flex align="center" justify="between" className="px-6 py-6">
+      <Flex align="center" justify="between" className="px-6 py-6" gap={4}>
         <LogoSection logo={logo} />
         <NavLinks links={links} />
         <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
@@ -43,20 +43,21 @@ function LogoSection({ logo }: { logo?: Logo }) {
   if (!logo) return null;
   return (
-    <Link
-      aria-label={`Go to ${logoLink(logo) === "/" ? "home page" : logoLink(logo)}`}
-      className="text-3xl font-bold leading-none"
-      href={logoLink(logo)}
-      target={logo?.linkTarget}
-      rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
-      <Image
-        src={logo?.image}
-        alt={logo?.alt ?? "navigation-logo"}
-        width={50}
-        height={50}
-        className="text-3xl font-bold leading-none"
-      />
-    </Link>
+    <div className="w-full lg:w-1/5">
+      <Link
+        className="w-20 h-14 flex items-center"
+        aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
+        href={logoLink(logo)}
+        target={logo?.linkTarget}
+        rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
+        <Image
+          className="w-fit h-full object-contain"
+          src={`${logo?.image}`}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          alt={logo?.alt ?? "navigation-logo"}
+        />
+      </Link>
+    </div>
   );
 }
@@ -84,7 +85,7 @@ function NavLinks({ links }: { links?: LabeledRouteWithKey[] }) {
   return (
     <Flex>
-      <ul className="hidden lg:flex lg:items-center lg:space-x-6">
+      <ul className="hidden lg:flex lg:items-center lg:gap-5 xl:gap-10">
         {links?.map((link: any, index: number) => (
           <React.Fragment key={index}>
             <NavItem link={link} key={link._key} />
@@ -205,14 +206,14 @@ function Buttons({
   secondaryButton?: LabeledRoute;
 }) {
   return (
-    <Flex gap={4}>
+    <Flex align="center" gap={4}>
       {primaryButton?.label ? (
         <Button
           as="link"
           link={primaryButton}
           ariaLabel={primaryButton?.label}
           variant="outline"
-          className="hidden lg:flex px-4 py-3 mb-2 leading-loose text-center font-semibold text-gray-900 rounded-global bg-secondary hover:bg-secondary/50">
+          className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-gray-900 rounded-global bg-secondary hover:bg-secondary/50">
           {primaryButton?.label}
         </Button>
       ) : null}
@@ -222,7 +223,7 @@ function Buttons({
           link={secondaryButton}
           ariaLabel={secondaryButton?.label}
           variant="solid"
-          className="hidden lg:flex px-4 py-3 mb-2 leading-loose text-center font-semibold text-white bg-primary hover:bg-primary-foreground rounded-global">
+          className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-white bg-primary hover:bg-primary-foreground rounded-global">
           {secondaryButton?.label}
         </Button>
       ) : null}

package/src/navigation_b.tsx CHANGED Viewed

@@ -24,8 +24,8 @@ export default function Navigation_B({
   return (
     <Section className="bg-background">
       <nav className="relative py-6">
-        <Container maxWidth={1000}>
-          <Flex align="center" justify="between">
+        <Container maxWidth={1280}>
+          <Flex align="center" justify="between" gap={4}>
             <LogoSection logo={logo} />
             <MobileMenu showMenu={showMenu} />
             <NavLinks links={links} />
@@ -48,20 +48,21 @@ function LogoSection({ logo }: { logo?: Logo }) {
   if (!logo) return null;
   return (
-    <Link
-      aria-label={`Go to ${logoLink(logo) === "/" ? "home page" : logoLink(logo)}`}
-      className="text-3xl font-bold leading-none"
-      href={logoLink(logo)}
-      target={logo?.linkTarget}
-      rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
-      <Image
-        src={logo?.image}
-        alt={logo?.alt ?? "navigation-logo"}
-        width={48}
-        height={48}
-        className="text-3xl font-bold leading-none"
-      />
-    </Link>
+    <div className="w-full lg:w-fit">
+      <Link
+        className="w-20 h-14 flex items-center"
+        aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
+        href={logoLink(logo)}
+        target={logo?.linkTarget}
+        rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
+        <Image
+          className="w-fit h-full object-contain"
+          src={`${logo?.image}`}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          alt={logo?.alt ?? "navigation-logo"}
+        />
+      </Link>
+    </div>
   );
 }
@@ -69,14 +70,16 @@ function NavLinks({ links }: { links?: LabeledRouteWithKey[] }) {
   if (!links) return null;
   return (
-    <ul className="absolute hidden transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 lg:mx-auto lg:flex lg:w-auto lg:items-center lg:space-x-6">
-      {links?.map((link, index) => (
-        <React.Fragment key={index}>
-          {link?.label && <NavItem link={link} key={index} />}
-          {links.length !== index + 1 ? <NavIcon /> : null}
-        </React.Fragment>
-      ))}
-    </ul>
+    <Flex>
+      <ul className="hidden lg:flex lg:items-center lg:gap-5 xl:gap-10">
+        {links?.map((link: any, index: number) => (
+          <React.Fragment key={index}>
+            <NavItem link={link} key={link._key} />
+            {links.length !== index + 1 ? <NavIcon /> : null}
+          </React.Fragment>
+        ))}
+      </ul>
+    </Flex>
   );
 }
@@ -123,13 +126,13 @@ function Buttons({
   secondaryButton?: LabeledRoute;
 }) {
   return (
-    <React.Fragment>
+    <Flex align="center" gap={4}>
       {primaryButton?.label && (
         <Button
           as="link"
           ariaLabel={primaryButton?.label}
           link={primaryButton}
-          className="hidden lg:inline-block px-4 py-3 mb-2 text-gray-900 lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
+          className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-gray-900 rounded-global bg-secondary hover:bg-secondary/50">
           {primaryButton?.label}
         </Button>
       )}
@@ -138,11 +141,11 @@ function Buttons({
           as="link"
           ariaLabel={secondaryButton?.label}
           link={secondaryButton}
-          className="hidden lg:inline-block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
+          className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-white bg-primary hover:bg-primary-foreground rounded-global">
           {secondaryButton?.label}
         </Button>
       )}
-    </React.Fragment>
+    </Flex>
   );
 }

package/src/navigation_c.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ export default function Navigation_C({
     <Section className="bg-background">
       <nav className="relative py-6">
         <Container maxWidth={1280}>
-          <Flex align="center">
+          <Flex align="center" justify="between" gap={4}>
             <NavLinks links={links} />
             <LogoSection logo={logo} />
             <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
@@ -48,14 +48,16 @@ function NavLinks({ links }: { links?: LabeledRouteWithKey[] }) {
   if (!links) return null;
   return (
-    <ul className="hidden lg:flex lg:w-auto lg:items-center lg:space-x-6">
-      {links?.map((link, index) => (
-        <React.Fragment key={index}>
-          {link?.label && <NavItem link={link} />}
-          {links.length !== index + 1 ? <NavIcon /> : null}
-        </React.Fragment>
-      ))}
-    </ul>
+    <Flex>
+      <ul className="hidden lg:flex lg:items-center lg:gap-5">
+        {links?.map((link, index) => (
+          <React.Fragment key={index}>
+            {link?.label && <NavItem link={link} />}
+            {links.length !== index + 1 ? <NavIcon /> : null}
+          </React.Fragment>
+        ))}
+      </ul>
+    </Flex>
   );
 }
@@ -98,19 +100,18 @@ function LogoSection({ logo }: { logo?: Logo }) {
   if (!logo) return null;
   return (
-    <div className="lg:absolute lg:left-1/2 lg:top-1/2 lg:-translate-x-1/2 lg:-translate-y-1/2 lg:transform">
+    <div className="w-full lg:w-fit items-center justify-center">
       <Link
-        aria-label={`Go to ${logoLink(logo) === "/" ? "home page" : logoLink(logo)}`}
-        className="text-3xl font-bold leading-none"
+        className="w-20 h-14 flex justify-center items-center"
+        aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
         href={logoLink(logo)}
         target={logo?.linkTarget}
         rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
         <Image
-          src={logo?.image}
+          className="w-fit h-full object-contain"
+          src={`${logo?.image}`}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
           alt={logo?.alt ?? "navigation-logo"}
-          width={60}
-          height={60}
-          className="text-3xl font-bold leading-none"
         />
       </Link>
     </div>
@@ -125,13 +126,13 @@ function Buttons({
   secondaryButton?: LabeledRoute;
 }) {
   return (
-    <div className="hidden text-right lg:ml-auto lg:block lg:w-1/3">
+    <div className="hidden lg:text-right lg:block lg:w-1/3">
       {primaryButton?.label && (
         <Button
           as="link"
           ariaLabel={primaryButton?.label}
           link={primaryButton}
-          className="hidden lg:inline-block px-4 py-3 mb-2 text-gray-900 lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
+          className="px-4 py-3 text-gray-900 lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
           {primaryButton?.label}
         </Button>
       )}
@@ -140,7 +141,7 @@ function Buttons({
           as="link"
           ariaLabel={secondaryButton?.label}
           link={secondaryButton}
-          className="hidden lg:inline-block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
+          className="px-4 py-3 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
           {secondaryButton?.label}
         </Button>
       )}

package/src/navigation_d.tsx CHANGED Viewed

@@ -23,15 +23,13 @@ export default function Navigation_D({
   return (
     <Section className="bg-background">
-      <nav className="relative px-6 py-6">
-        <Container maxWidth={1000}>
-          <Flex align="center" justify="between">
-            <NavLinks links={links} />
-            <LogoSection logo={logo} />
-            <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
-            <MobileMenu showMenu={showMenu} />
-          </Flex>
-        </Container>
+      <nav className="relative lg:px-6 py-6">
+        <Flex align="center" justify="between" gap={4}>
+          <NavLinks links={links} />
+          <LogoSection logo={logo} />
+          <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
+          <MobileMenu showMenu={showMenu} />
+        </Flex>
       </nav>
       <ResponsiveNavLinks
         menu={menu}
@@ -48,12 +46,12 @@ function NavLinks({ links }: { links?: LabeledRouteWithKey[] }) {
   if (!links) return null;
   return (
-    <Flex className="hidden lg:flex" align="center">
-      <ul className="flex space-x-5">
-        {links.map((link, index) => (
+    <Flex>
+      <ul className="hidden lg:flex lg:items-center lg:gap-3 xl:gap-5">
+        {links?.map((link, index) => (
           <React.Fragment key={index}>
             {link?.label && <NavItem link={link} />}
-            {links.length !== index + 1 && <NavIcon />}
+            {links.length !== index + 1 ? <NavIcon /> : null}
           </React.Fragment>
         ))}
       </ul>
@@ -100,22 +98,21 @@ function LogoSection({ logo }: { logo?: Logo }) {
   if (!logo) return null;
   return (
-    <Flex className="flex-1 justify-start lg:justify-center">
+    <div className="w-full lg:w-fit items-center justify-center">
       <Link
-        aria-label={`Go to ${logoLink(logo) === "/" ? "home page" : logoLink(logo)}`}
-        className="text-3xl font-bold leading-none"
+        className="w-20 h-14 flex justify-center items-center"
+        aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
         href={logoLink(logo)}
         target={logo?.linkTarget}
         rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
         <Image
-          src={logo?.image}
+          className="w-fit h-full object-contain"
+          src={`${logo?.image}`}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
           alt={logo?.alt ?? "navigation-logo"}
-          width={50}
-          height={50}
-          className="object-contain"
         />
       </Link>
-    </Flex>
+    </div>
   );
 }
@@ -127,13 +124,13 @@ function Buttons({
   secondaryButton?: LabeledRoute;
 }) {
   return (
-    <Flex className="hidden lg:flex justify-end space-x-4">
+    <div className="hidden lg:flex lg:gap-4">
       {primaryButton?.label && (
         <Button
           as="link"
           ariaLabel={primaryButton?.label}
           link={primaryButton}
-          className="px-4 py-3 mb-2 leading-loose text-center text-gray-900 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
+          className="px-4 py-3 leading-loose text-center text-gray-900 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
           {primaryButton?.label}
         </Button>
       )}
@@ -142,11 +139,11 @@ function Buttons({
           as="link"
           ariaLabel={secondaryButton?.label}
           link={secondaryButton}
-          className="px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
+          className="px-4 py-3 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
           {secondaryButton?.label}
         </Button>
       )}
-    </Flex>
+    </div>
   );
 }

package/src/navigation_e.tsx CHANGED Viewed

@@ -42,7 +42,7 @@ export default function Navigation_E({ banner, logo, links }: NavigationProps) {
           <LogoSection logo={logo} />
           <NavLinks links={links} />
         </Flex>
-        <div className="items-center justify-end hidden mt-6 mr-12 lg:flex">
+        <div className="items-center hidden lg:flex lg:gap-10">
           <SearchButton showSearchBar={showSearchBar} setShowSearchBar={setShowSearchBar} />
           <SearchForm
             showSearchBar={showSearchBar}
@@ -120,13 +120,7 @@ function LogoSection({ logo }: { logo?: Logo }) {
       href={logoLink(logo)}
       target={logo?.linkTarget}
       rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
-      <Image
-        src={logo?.image}
-        alt={logo?.alt ?? "navigation-logo"}
-        width={48}
-        height={48}
-        className="text-3xl font-bold leading-none"
-      />
+      <Image src={logo?.image} width={48} height={48} alt={logo?.alt ?? "navigation-logo"} />
     </Link>
   );
 }
@@ -135,7 +129,7 @@ function NavLinks({ links }: { links?: LabeledRouteWithKey[] }) {
   if (!links) return null;
   return (
-    <ul className="hidden lg:flex lg:w-auto lg:items-center lg:space-x-5">
+    <ul className="hidden transform main-nav top-1/2 lg:flex lg:gap-10 lg:justify-center lg:items-center">
       {links.map((link, index) => (
         <Fragment key={index}>
           <NavItem link={link} />
@@ -180,13 +174,8 @@ function SearchButton({
       ariaLabel="Search button"
       type="button"
       onClick={() => setShowSearchBar(!showSearchBar)}>
-      <svg
-        width={24}
-        height={24}
-        xmlns="http://www.w3.org/2000/svg"
-        fillRule="evenodd"
-        clipRule="evenodd">
-        <path d="M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5 4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5 8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z" />
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M23.809 21.646l-6.205-6.205c1.167-1.605 1.857-3.579 1.857-5.711 0-5.365-4.365-9.73-9.731-9.73-5.365 0-9.73 4.365-9.73 9.73 0 5.366 4.365 9.73 9.73 9.73 2.034 0 3.923-.627 5.487-1.698l6.238 6.238 2.354-2.354zm-20.955-11.916c0-3.792 3.085-6.877 6.877-6.877s6.877 3.085 6.877 6.877-3.085 6.877-6.877 6.877c-3.793 0-6.877-3.085-6.877-6.877z" />
       </svg>
     </Button>
   );
@@ -234,16 +223,8 @@ function SearchForm({
         }`}
         disabled={productQuery === ""}
         type="submit">
-        <svg
-          width={7}
-          height={12}
-          viewBox="0 0 7 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M4.125 6.00252L0 1.87752L1.17801 0.699219L6.48102 6.00252L1.17801 11.3058L0 10.1275L4.125 6.00252Z"
-            fill="white"
-          />
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+          <path d="M23.809 21.646l-6.205-6.205c1.167-1.605 1.857-3.579 1.857-5.711 0-5.365-4.365-9.73-9.731-9.73-5.365 0-9.73 4.365-9.73 9.73 0 5.366 4.365 9.73 9.73 9.73 2.034 0 3.923-.627 5.487-1.698l6.238 6.238 2.354-2.354zm-20.955-11.916c0-3.792 3.085-6.877 6.877-6.877s6.877 3.085 6.877 6.877-3.085 6.877-6.877 6.877c-3.793 0-6.877-3.085-6.877-6.877z" />
         </svg>
       </Button>
     </form>
@@ -275,8 +256,16 @@ function MenuIcon({ showMenu }: { showMenu: () => void }) {
 function CartIcon() {
   return (
-    <div className="mx-10 cart-icon cart-link">
-      <div data-icon="BAG" className="ec-cart-widget" />
+    <div className="cart-icon cart-link">
+      <svg
+        data-icon="BAG"
+        className="ec-minicart__icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24">
+        <path d="M20 7h-4v-3c0-2.209-1.791-4-4-4s-4 1.791-4 4v3h-4l-2 17h20l-2-17zm-11-3c0-1.654 1.346-3 3-3s3 1.346 3 3v3h-6v-3zm-4.751 18l1.529-13h2.222v1.5c0 .276.224.5.5.5s.5-.224.5-.5v-1.5h6v1.5c0 .276.224.5.5.5s.5-.224.5-.5v-1.5h2.222l1.529 13h-15.502z" />
+      </svg>
       <a className="cart-link" href="/cart?store-page=cart" aria-label="Cart" />
     </div>
   );
@@ -284,27 +273,9 @@ function CartIcon() {
 function AccountIcon() {
   return (
-    <a href="/cart?store-page=account">
-      <svg
-        width={32}
-        height={31}
-        viewBox="0 0 32 31"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
+    <a aria-label="Account" href="/cart?store-page=account">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M12 2c2.757 0 5 2.243 5 5.001 0 2.756-2.243 5-5 5s-5-2.244-5-5c0-2.758 2.243-5.001 5-5.001zm0-2c-3.866 0-7 3.134-7 7.001 0 3.865 3.134 7 7 7s7-3.135 7-7c0-3.867-3.134-7.001-7-7.001zm6.369 13.353c-.497.498-1.057.931-1.658 1.302 2.872 1.874 4.378 5.083 4.972 7.346h-19.387c.572-2.29 2.058-5.503 4.973-7.358-.603-.374-1.162-.811-1.658-1.312-4.258 3.072-5.611 8.506-5.611 10.669h24c0-2.142-1.44-7.557-5.631-10.647z" />
       </svg>
     </a>
   );