aural-ui 2.1.13 → 2.1.16

package/dist/icons/layout-column-icon/LayoutColumnIcon.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 { LayoutColumnIcon } from "."
 
@@ -203,16 +203,19 @@ function MyComponent() {
                       </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">18</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">
@@ -804,6 +807,10 @@ function CustomLayoutColumnIcon({ label = "Switch to two column layout", ...prop
       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",
@@ -838,6 +845,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-blue-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/layout-column-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const LayoutColumnIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Layout Column Icon">
+export interface LayoutColumnIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const LayoutColumnIcon = (props: LayoutColumnIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="18"
       height="18"
       viewBox="0 0 18 18"
       fill="none"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M15.1875 2.8125H15.9375V2.0625H15.1875V2.8125ZM15.1875 15.1875V15.9375H15.9375V15.1875H15.1875ZM2.8125 15.1875H2.0625V15.9375H2.8125V15.1875ZM2.8125 2.8125V2.0625H2.0625V2.8125H2.8125ZM15.1875 2.8125H14.4375V15.1875H15.1875H15.9375V2.8125H15.1875ZM15.1875 15.1875V14.4375H2.8125V15.1875V15.9375H15.1875V15.1875ZM2.8125 15.1875H3.5625V2.8125H2.8125H2.0625V15.1875H2.8125ZM2.8125 2.8125V3.5625H15.1875V2.8125V2.0625H2.8125V2.8125Z"
@@ -19,5 +23,11 @@ export const LayoutColumnIcon = (
       />
       <path d="M9 2.8125H8.25V15.1875H9H9.75V2.8125H9Z" fill="currentColor" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Layout Column Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/layout-left-icon/LayoutLeftIcon.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 { LayoutLeftIcon } from "."
 
@@ -203,16 +203,19 @@ function MyComponent() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-cyan-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">16</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">
@@ -778,6 +781,10 @@ function CustomLayoutLeftIcon({ label = "Toggle left sidebar", ...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",
@@ -812,6 +819,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-cyan-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/layout-left-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const LayoutLeftIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Layout Left Icon">
+export interface LayoutLeftIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const LayoutLeftIcon = (props: LayoutLeftIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
       height="16"
       viewBox="0 0 16 16"
       fill="none"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M2.5 2.5L2.5 1.75L1.75 1.75V2.5H2.5ZM13.5 2.5H14.25V1.75L13.5 1.75V2.5ZM13.5 13.5V14.25H14.25V13.5H13.5ZM2.5 13.5H1.75V14.25H2.5V13.5ZM2.5 2.5L2.5 3.25L13.5 3.25V2.5V1.75L2.5 1.75L2.5 2.5ZM13.5 2.5H12.75V13.5H13.5H14.25V2.5H13.5ZM13.5 13.5V12.75H2.5V13.5V14.25H13.5V13.5ZM2.5 13.5H3.25V2.5H2.5H1.75V13.5H2.5Z"
@@ -22,5 +26,11 @@ export const LayoutLeftIcon = (
         fill="currentColor"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Layout Left Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/layout-right-icon/LayoutRightIcon.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 { LayoutRightIcon } from "."
 
@@ -203,16 +203,19 @@ function MyComponent() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-emerald-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">16</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">
@@ -771,6 +774,10 @@ function CustomLayoutRightIcon({ label = "Toggle right sidebar", ...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",
@@ -805,6 +812,7 @@ export const Default: Story = {
     width: 24,
     height: 24,
     className: "text-emerald-400",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/layout-right-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const LayoutRightIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Layout Right Icon">
+export interface LayoutRightIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const LayoutRightIcon = (props: LayoutRightIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
       height="16"
       viewBox="0 0 16 16"
       fill="none"
-      {...props}
+      {...svgProps}
     >
       <path
         d="M13.5 2.5H14.25V1.75L13.5 1.75V2.5ZM2.5 2.5L2.5 1.75L1.75 1.75L1.75 2.5L2.5 2.5ZM2.5 13.5H1.75L1.75 14.25H2.5V13.5ZM13.5 13.5V14.25H14.25V13.5H13.5ZM13.5 2.5V1.75L2.5 1.75L2.5 2.5L2.5 3.25L13.5 3.25V2.5ZM2.5 2.5L1.75 2.5L1.75 13.5H2.5H3.25L3.25 2.5L2.5 2.5ZM2.5 13.5V14.25H13.5V13.5V12.75H2.5V13.5ZM13.5 13.5H14.25V2.5H13.5H12.75V13.5H13.5Z"
@@ -22,5 +26,11 @@ export const LayoutRightIcon = (
         fill="currentColor"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Layout Right Icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/light-bulb-simple-icon/LightBulbSimpleIcon.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 { LightBulbSimpleIcon } from "."
 
@@ -217,16 +217,19 @@ function FeatureCard() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-yellow-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">
@@ -972,6 +975,10 @@ function FeatureCard() {
       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",
@@ -1012,6 +1019,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-6 w-6 text-yellow-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/light-bulb-simple-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const LightBulbSimpleIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Light bulb icon">
+export interface LightBulbSimpleIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const LightBulbSimpleIcon = (props: LightBulbSimpleIconProps) => {
+  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="M8.74775 17.75V16.4838C8.33524 16.2765 7.94523 16.031 7.58239 15.7519C5.85882 14.4264 4.74805 12.3433 4.74805 10.0009C4.74805 5.99633 7.99438 2.75 11.9989 2.75C16.0035 2.75 19.2498 5.99633 19.2498 10.0009C19.2498 12.3433 18.139 14.4264 16.4155 15.7519C16.0526 16.031 15.6626 16.2765 15.2501 16.4838V17.75M8.74775 17.75V18.9988C8.74775 20.7944 10.2034 22.25 11.9989 22.25C13.7945 22.25 15.2501 20.7944 15.2501 18.9988V17.75M8.74775 17.75H15.2501"
@@ -20,5 +24,11 @@ export const LightBulbSimpleIcon = (
         strokeLinecap="square"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Light bulb icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/linked-in-icon/LinkedInIcon.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 { LinkedInIcon } from "."
 
@@ -215,18 +215,19 @@ function ProfessionalProfile() {
                       </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">
-                          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">
@@ -1332,6 +1333,10 @@ function ProfessionalProfile() {
       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)",
@@ -1368,6 +1373,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-8 w-8 text-blue-500",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/linked-in-icon/index.tsx

@@ -1,17 +1,27 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const LinkedInIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="LinkedIn icon">
+export interface LinkedInIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const LinkedInIcon = (props: LinkedInIconProps) => {
+  const { withAccessibility = true, ...svgProps } = props
+
+  const svg = (
     <svg
       viewBox="0 0 18 18"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...svgProps}
     >
       <path d="M16.65 0H1.35C0.991958 0 0.64858 0.142232 0.395406 0.395406C0.142232 0.64858 0 0.991958 0 1.35V16.65C0 17.008 0.142232 17.3514 0.395406 17.6046C0.64858 17.8578 0.991958 18 1.35 18H16.65C17.008 18 17.3514 17.8578 17.6046 17.6046C17.8578 17.3514 18 17.008 18 16.65V1.35C18 0.991958 17.8578 0.64858 17.6046 0.395406C17.3514 0.142232 17.008 0 16.65 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.625C3.74056 5.61616 3.4406 5.51632 3.18758 5.33797C2.93456 5.15962 2.7397 4.91066 2.62737 4.6222C2.51503 4.33374 2.49019 4.01857 2.55595 3.71607C2.6217 3.41358 2.77515 3.13716 2.9971 2.92138C3.21906 2.70559 3.49968 2.55999 3.80391 2.50278C4.10814 2.44556 4.42248 2.47927 4.70766 2.59969C4.99284 2.7201 5.23622 2.92189 5.40737 3.17983C5.57853 3.43778 5.66987 3.74044 5.67 4.05C5.66289 4.47331 5.4885 4.8766 5.18495 5.17173C4.88139 5.46685 4.47335 5.62982 4.05 5.625ZM15.3 15.3H12.6V11.034C12.6 9.756 12.06 9.297 11.358 9.297C11.1522 9.3107 10.9511 9.36493 10.7663 9.45658C10.5815 9.54822 10.4166 9.67547 10.2811 9.83102C10.1457 9.98657 10.0422 10.1674 9.97684 10.363C9.91143 10.5586 9.88532 10.7652 9.9 10.971C9.89553 11.0129 9.89553 11.0551 9.9 11.097V15.3H7.2V7.2H9.81V8.37C10.0733 7.9695 10.435 7.64331 10.8605 7.42269C11.286 7.20207 11.761 7.0944 12.24 7.11C13.635 7.11 15.264 7.884 15.264 10.404L15.3 15.3Z" />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="LinkedIn icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/magic-book-icon/MagicBookIcon.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 { MagicBookIcon } from "."
 
@@ -217,16 +217,19 @@ function FeatureCard() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-purple-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">
@@ -946,6 +949,10 @@ function FeatureCard() {
       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",
@@ -978,6 +985,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-6 w-6 text-purple-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

package/dist/icons/magic-book-icon/index.tsx

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const MagicBookIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Magic book icon">
+export interface MagicBookIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const MagicBookIcon = (props: MagicBookIconProps) => {
+  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
         fillRule="evenodd"
@@ -28,5 +32,11 @@ export const MagicBookIcon = (
         fill="currentColor"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Magic book icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}

package/dist/icons/maintenance-icon/MaintenanceIcon.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 { MaintenanceIcon } from "."
 
@@ -215,16 +215,19 @@ function StatusCard() {
                       </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">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">
@@ -956,6 +959,10 @@ function StatusCard() {
       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",
@@ -992,6 +999,7 @@ const storyParameters = {
 export const Default: Story = {
   args: {
     className: "h-6 w-6 text-orange-400 ",
+    withAccessibility: true,
   },
   parameters: storyParameters,
   render: (args) => (

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

@@ -1,17 +1,21 @@
 import React from "react"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 
-export const MaintenanceIcon = (
-  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
-) => (
-  <AccessibleIcon label="Maintenance icon">
+export interface MaintenanceIconProps extends React.SVGProps<SVGSVGElement> {
+  withAccessibility?: boolean
+}
+
+export const MaintenanceIcon = (props: MaintenanceIconProps) => {
+  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="M14.5694 16.1111C18.259 16.1111 21.25 13.1201 21.25 9.43056C21.25 8.66012 21.1196 7.92014 20.8796 7.23149L18.1667 9.94444C17.0314 11.0797 15.1908 11.0797 14.0556 9.94444C12.9203 8.80919 12.9203 6.96858 14.0556 5.83333L16.7685 3.12038C16.0799 2.88042 15.3399 2.75 14.5694 2.75C10.8799 2.75 7.88889 5.74099 7.88889 9.43056C7.88889 10.3416 8.07124 11.21 8.40145 12.0013L2.75 17.6528L6.34722 21.25L11.9987 15.5986C12.79 15.9288 13.6584 16.1111 14.5694 16.1111Z"
@@ -19,5 +23,11 @@ export const MaintenanceIcon = (
         strokeWidth="1.5"
       />
     </svg>
-  </AccessibleIcon>
-)
+  )
+
+  if (withAccessibility) {
+    return <AccessibleIcon label="Maintenance icon">{svg}</AccessibleIcon>
+  }
+
+  return svg
+}