aural-ui 2.1.13 → 2.1.16

package/dist/icons/head-icon/index.tsx

@@ -1,26 +1,34 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const HeadIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => {
-  return (
-    <AccessibleIcon label="Head Icon">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="17"
-        viewBox="0 0 16 17"
-        fill="none"
-        {...props}
-      >
-        <path
-          d="M12.1667 12.6112H9.5V14.6667H4.5C4.5 12.9371 4.65313 11.5249 3.52284 10.0875C2.88207 9.27259 2.5 8.24564 2.5 7.12967C2.5 4.48075 4.65265 2.33337 7.30808 2.33337C9.26557 2.33337 11.0679 3.2706 11.8108 5.1651C12.3315 6.49261 13.0353 7.47263 13.8333 8.66671L12.1667 9.52782V12.6112Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="square"
-        />
-      </svg>
-    </AccessibleIcon>
+export interface HeadIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const HeadIcon = (props: HeadIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      {...svgProps}
+    >
+      <path
+        d="M12.1667 12.6112H9.5V14.6667H4.5C4.5 12.9371 4.65313 11.5249 3.52284 10.0875C2.88207 9.27259 2.5 8.24564 2.5 7.12967C2.5 4.48075 4.65265 2.33337 7.30808 2.33337C9.26557 2.33337 11.0679 3.2706 11.8108 5.1651C12.3315 6.49261 13.0353 7.47263 13.8333 8.66671L12.1667 9.52782V12.6112Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="square"
+      />
+    </svg>
   )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Head Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
 }

package/dist/icons/heart-icon/HeartIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { HeartIcon } from "."
 
@@ -195,16 +195,19 @@ function MyComponent() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-red-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">20</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -858,6 +861,10 @@ function CustomHeartIcon({ label = "Like", ...props }) {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -892,6 +899,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-red-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/heart-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const HeartIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Heart icon">
+export interface HeartIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const HeartIcon = (props: HeartIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="20"
@@ -13,9 +17,15 @@ export const HeartIcon = (
       fill="none"
       stroke="currentColor"
       strokeWidth="1.25"
-      {...props}
+      {...svgProps}
     >
       <path d="M10.0001 4.64328C15.2776 -0.723042 24.3249 9.24299 10.0001 17.2917C-4.32477 9.24302 4.72247 -0.723043 10.0001 4.64328Z" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Heart icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/image-icon/ImageIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { ImageIcon } from "."
 
@@ -210,16 +210,19 @@ function MediaUpload() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
+                      {" "}
+                      <tr className="!bg-black/10">
                         <td className="px-6 py-4 font-mono text-sm !text-blue-300">
-                          width
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">24</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -905,6 +908,10 @@ function MediaUpload() {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -945,6 +952,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-6 w-6 text-blue-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/image-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const ImageIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Image icon">
+export interface ImageIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const ImageIcon = (props: ImageIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="24"
       height="24"
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M19.75 19.75L14 14L12 16L8 12L4.25 15.75M3.75 3.75H20.25V20.25H3.75V3.75ZM15.75 9C15.75 9.82843 15.0784 10.5 14.25 10.5C13.4216 10.5 12.75 9.82843 12.75 9C12.75 8.17157 13.4216 7.5 14.25 7.5C15.0784 7.5 15.75 8.17157 15.75 9Z"
@@ -20,5 +24,11 @@ export const ImageIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Image icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/import-folder-icon/ImportFolderIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { ImportFolderIcon } from "."
 
@@ -211,16 +211,19 @@ function FileImport() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-green-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">24</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -944,6 +947,10 @@ function FileImport() {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -984,6 +991,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-6 w-6 text-green-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/import-folder-icon/index.tsx

@@ -1,16 +1,20 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const ImportFolderIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Import Folder icon">
+export interface ImportFolderIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const ImportFolderIcon = (props: ImportFolderIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       stroke="currentColor"
-      {...props}
+      {...svgProps}
     >
       <path d="M21.25 8.75V19.25H2.75V4.75H8.25" strokeLinecap="square" />
       <path
@@ -18,5 +22,11 @@ export const ImportFolderIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Import Folder icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/import-left-arrow-folder-icon/ImportLeftArrowFolderIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { ImportLeftArrowFolderIcon } from "."
 
@@ -221,16 +221,19 @@ function ImportButton() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-indigo-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">24</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -1015,6 +1018,10 @@ function ImportButton() {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -1058,6 +1065,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-indigo-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/import-left-arrow-folder-icon/index.tsx

@@ -1,16 +1,22 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
+export interface ImportLeftArrowFolderIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
 export const ImportLeftArrowFolderIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Import Left Arrow Folder Icon">
+  props: ImportLeftArrowFolderIconProps
+) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       stroke="currentColor"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M1.8335 5.83268V12.8327H14.1668V3.16602H10.5002"
@@ -21,5 +27,15 @@ export const ImportLeftArrowFolderIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return (
+      <AccessibleIcon label="Import Left Arrow Folder Icon">
+        {svg}
+      </AccessibleIcon>
+    )
+  }
+
+  return svg
+}

package/dist/icons/index.ts

@@ -41,6 +41,7 @@ export * from "./filter-bar-row-icon"
 export * from "./forward-ten-seconds-icon"
 export * from "./git-branch-icon"
 export * from "./git-fork-icon"
+export * from "./globe-icon"
 export * from "./google-logo-icon"
 export * from "./grip-vertical-icon"
 export * from "./head-icon"

package/dist/icons/indian-flag-icon/IndianFlagIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { IndianFlagIcon } from "."
 
@@ -202,16 +202,19 @@ function CountrySelector() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-orange-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
+                        </td>
+                        <td className="px-6 py-4 text-sm !text-white/50">
+                          true
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/50">22</td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon in pixels
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -786,6 +789,10 @@ function CustomIndianFlagIcon({ label = "India", ...props }) {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon in pixels",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon in pixels",
@@ -816,6 +823,7 @@ export const Default: Story = {
     width: 22,
     height: 15,
     className: "",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/indian-flag-icon/index.tsx

@@ -1,10 +1,14 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const IndianFlagIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Indian Flag icon">
+export interface IndianFlagIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const IndianFlagIcon = (props: IndianFlagIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       width="22"
       height="15"
@@ -12,7 +16,7 @@ export const IndianFlagIcon = (
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
-      {...props}
+      {...svgProps}
     >
       <rect
         y="0.5"
@@ -42,5 +46,11 @@ export const IndianFlagIcon = (
         />
       </defs>
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Indian Flag icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/instagram-icon/InstagramIcon.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import type { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
 
 import { InstagramIcon } from "."
 
@@ -211,18 +211,19 @@ function SocialLinks() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-pink-300">
-                          width
+                      {" "}
+                      <tr className="!bg-black/10">
+                        <td className="px-6 py-4 font-mono text-sm !text-blue-300">
+                          withAccessibility
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          number | string
+                          boolean
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/50">
-                          auto
+                          true
                         </td>
                         <td className="px-6 py-4 text-sm !text-white/70">
-                          Width of the icon (maintains aspect ratio)
+                          Whether to wrap the icon with accessibility feature
                         </td>
                       </tr>
                       <tr className="border-b border-white/5 !bg-black/10">
@@ -1191,6 +1192,10 @@ function SocialLinks() {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Width of the icon (maintains aspect ratio)",
     },
+    withAccessibility: {
+      control: "boolean",
+      description: "Whether to wrap the icon with accessibility features",
+    },
     height: {
       control: { type: "range", min: 8, max: 96, step: 2 },
       description: "Height of the icon (maintains aspect ratio)",
@@ -1227,6 +1232,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-pink-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/instagram-icon/index.tsx

@@ -1,17 +1,27 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const InstagramIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Instagram icon">
+export interface InstagramIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const InstagramIcon = (props: InstagramIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       viewBox="0 0 20 20"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <path d="M10 2.21173C12.5365 2.21173 12.837 2.22123 13.8389 2.267C14.4411 2.27427 15.0377 2.38499 15.6024 2.59432C16.0151 2.74662 16.3884 2.9895 16.6949 3.30509C17.0105 3.61156 17.2534 3.98488 17.4057 4.39759C17.615 4.96235 17.7257 5.55888 17.733 6.16114C17.7788 7.16295 17.7883 7.4635 17.7883 10C17.7883 12.5365 17.7788 12.837 17.733 13.8389C17.7257 14.4411 17.615 15.0377 17.4057 15.6024C17.2476 16.0122 17.0055 16.3844 16.6949 16.6949C16.3844 17.0055 16.0122 17.2476 15.6024 17.4057C15.0377 17.615 14.4411 17.7257 13.8389 17.733C12.837 17.7788 12.5365 17.7883 10 17.7883C7.4635 17.7883 7.16295 17.7788 6.16114 17.733C5.55859 17.7258 4.96176 17.6151 4.39673 17.4057C3.98433 17.2533 3.61132 17.0104 3.30509 16.6949C2.9895 16.3884 2.74662 16.0151 2.59432 15.6024C2.38499 15.0377 2.27427 14.4411 2.267 13.8389C2.22123 12.837 2.21173 12.5365 2.21173 10C2.21173 7.4635 2.22123 7.16295 2.267 6.16114C2.27427 5.55888 2.38499 4.96235 2.59432 4.39759C2.74662 3.98488 2.9895 3.61156 3.30509 3.30509C3.61156 2.9895 3.98488 2.74662 4.39759 2.59432C4.96235 2.38499 5.55888 2.27427 6.16114 2.267C7.16295 2.22123 7.4635 2.21173 10 2.21173ZM10 0.5C7.42032 0.5 7.09645 0.511227 6.08341 0.557C5.29535 0.572721 4.51567 0.721942 3.7775 0.998318C3.1433 1.2371 2.56886 1.61141 2.09427 2.09514C1.61096 2.56956 1.23695 3.14369 0.998318 3.7775C0.722237 4.51572 0.573309 5.2954 0.557864 6.08341C0.510364 7.09645 0.5 7.42032 0.5 10C0.5 12.5797 0.511227 12.9035 0.557 13.9166C0.572721 14.7046 0.721942 15.4843 0.998318 16.2225C1.2371 16.8567 1.61141 17.4311 2.09514 17.9057C2.56956 18.389 3.14369 18.763 3.7775 19.0017C4.51572 19.2778 5.2954 19.4267 6.08341 19.4421C7.09645 19.4896 7.42032 19.5 10 19.5C12.5797 19.5 12.9035 19.4888 13.9166 19.443C14.7046 19.4273 15.4843 19.2781 16.2225 19.0017C16.8538 18.7576 17.4271 18.3843 17.9057 17.9057C18.3843 17.4271 18.7576 16.8538 19.0017 16.2225C19.2778 15.4843 19.4267 14.7046 19.4421 13.9166C19.4896 12.9035 19.5 12.5797 19.5 10C19.5 7.42032 19.4888 7.09645 19.443 6.08341C19.4273 5.29535 19.2781 4.51567 19.0017 3.7775C18.7629 3.1433 18.3886 2.56886 17.9049 2.09427C17.4304 1.61096 16.8563 1.23695 16.2225 0.998318C15.4843 0.722237 14.7046 0.573309 13.9166 0.557864C12.9035 0.510364 12.5797 0.5 10 0.5ZM10 5.12132C9.03509 5.12132 8.09185 5.40745 7.28955 5.94352C6.48725 6.4796 5.86194 7.24155 5.49269 8.13301C5.12343 9.02447 5.02682 10.0054 5.21506 10.9518C5.40331 11.8982 5.86796 12.7675 6.55025 13.4497C7.23255 14.132 8.10185 14.5967 9.04822 14.7849C9.99459 14.9732 10.9755 14.8766 11.867 14.5073C12.7585 14.1381 13.5204 13.5127 14.0565 12.7105C14.5926 11.9082 14.8787 10.9649 14.8787 10C14.8787 8.70609 14.3647 7.46518 13.4497 6.55025C12.5348 5.63532 11.2939 5.12132 10 5.12132ZM10 13.167C9.37364 13.167 8.76134 12.9812 8.24053 12.6332C7.71973 12.2852 7.31382 11.7906 7.07412 11.2119C6.83442 10.6333 6.7717 9.99649 6.8939 9.38216C7.0161 8.76783 7.31772 8.20353 7.76063 7.76063C8.20353 7.31772 8.76783 7.0161 9.38216 6.8939C9.99649 6.7717 10.6333 6.83442 11.2119 7.07412C11.7906 7.31382 12.2852 7.71973 12.6332 8.24053C12.9812 8.76134 13.167 9.37364 13.167 10C13.167 10.8399 12.8333 11.6455 12.2394 12.2394C11.6455 12.8333 10.8399 13.167 10 13.167ZM15.0713 3.78873C14.8458 3.78873 14.6254 3.85559 14.4379 3.98085C14.2505 4.10612 14.1043 4.28416 14.0181 4.49247C13.9318 4.70078 13.9092 4.92999 13.9532 5.15113C13.9972 5.37227 14.1057 5.5754 14.2652 5.73483C14.4246 5.89426 14.6277 6.00284 14.8489 6.04682C15.07 6.09081 15.2992 6.06823 15.5075 5.98195C15.7158 5.89567 15.8939 5.74955 16.0191 5.56208C16.1444 5.37461 16.2113 5.1542 16.2113 4.92873C16.2113 4.62638 16.0912 4.33642 15.8774 4.12263C15.6636 3.90883 15.3736 3.78873 15.0713 3.78873Z" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Instagram icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}