@acmekit/docs-ui 2.13.41

package/src/components/Icons/NavigationDropdown/Resources/index.tsx

@@ -0,0 +1,37 @@
+import { IconProps } from "@acmekit/icons/dist/types"
+import React from "react"
+
+export const NavigationDropdownResourcesIcon = (props: IconProps) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="20" height="20" className="fill-acmekit-tag-orange-icon" />
+      <g clipPath="url(#clip0_9988_95555)">
+        <path
+          d="M15.25 12C14.836 12 14.5 11.664 14.5 11.25V8.75C14.5 8.061 13.939 7.5 13.25 7.5H10.614C10.386 7.5 10.172 7.397 10.029 7.219L9.425 6.467C9.187 6.17 8.831 6 8.45 6H6.749C6.06 6 5.499 6.561 5.499 7.25V11.25C5.499 11.664 5.163 12 4.749 12C4.335 12 3.999 11.664 3.999 11.25V7.25C4 5.733 5.233 4.5 6.75 4.5H8.451C9.289 4.5 10.07 4.875 10.596 5.528L10.974 6H13.25C14.767 6 16 7.233 16 8.75V11.25C16 11.664 15.664 12 15.25 12Z"
+          className="fill-acmekit-fg-on-color"
+        />
+        <path
+          d="M13.25 8.5H6.75C5.23122 8.5 4 9.73122 4 11.25V12.75C4 14.2688 5.23122 15.5 6.75 15.5H13.25C14.7688 15.5 16 14.2688 16 12.75V11.25C16 9.73122 14.7688 8.5 13.25 8.5Z"
+          className="fill-acmekit-fg-on-color"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_9988_95555">
+          <rect
+            width="12"
+            height="12"
+            className="fill-acmekit-fg-on-color"
+            transform="translate(4 4)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/Icons/NavigationDropdown/Store/index.tsx

@@ -0,0 +1,37 @@
+import { IconProps } from "@acmekit/icons/dist/types"
+import React from "react"
+
+export const NavigationDropdownStoreIcon = (props: IconProps) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="20" height="20" className="fill-acmekit-tag-purple-icon" />
+      <g clipPath="url(#clip0_9988_95563)">
+        <path
+          d="M15.25 8.548C15.122 8.548 14.993 8.515 14.874 8.446L10 5.617L5.126 8.446C4.77 8.654 4.309 8.532 4.101 8.174C3.893 7.816 4.015 7.357 4.373 7.149L9.624 4.102C9.856 3.966 10.145 3.966 10.377 4.102L15.627 7.15C15.985 7.358 16.107 7.817 15.899 8.175C15.76 8.415 15.508 8.548 15.25 8.548Z"
+          className="fill-acmekit-fg-on-color"
+        />
+        <path
+          d="M10 7.35195L5 10.254V13.75C5 14.715 5.785 15.5 6.75 15.5H9.25V13.25C9.25 12.836 9.586 12.5 10 12.5C10.414 12.5 10.75 12.836 10.75 13.25V15.5H13.25C14.215 15.5 15 14.715 15 13.75V10.254L10 7.35195Z"
+          className="fill-acmekit-fg-on-color"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_9988_95563">
+          <rect
+            width="12"
+            height="12"
+            className="fill-acmekit-fg-on-color"
+            transform="translate(4 4)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/Icons/NavigationDropdown/Ui/index.tsx

@@ -0,0 +1,37 @@
+import { IconProps } from "@acmekit/icons/dist/types"
+import React from "react"
+
+export const NavigationDropdownUiIcon = (props: IconProps) => {
+  return (
+    <svg
+      width={props.width || 20}
+      height={props.height || 20}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="20" height="20" className="fill-acmekit-tag-blue-icon" />
+      <g clipPath="url(#clip0_9988_95578)">
+        <path
+          d="M14.18 10.472L9.28899 8.685C8.82599 8.518 8.32399 8.627 7.97699 8.975C7.62799 9.323 7.51699 9.826 7.68599 10.288L9.47199 15.178C9.65599 15.679 10.114 16 10.645 16C10.654 16 10.664 16 10.672 16C11.215 15.989 11.672 15.648 11.836 15.132L12.394 13.394L14.131 12.838C14.648 12.673 14.988 12.216 15 11.673C15.011 11.131 14.689 10.658 14.18 10.472Z"
+          className="fill-acmekit-fg-on-color"
+        />
+        <path
+          d="M6.13499 11.894C6.05799 11.894 5.97999 11.882 5.90299 11.857C4.76499 11.487 4.00099 10.439 4.00099 9.25V7.75C3.99999 6.234 5.23299 5 6.74999 5H13.25C14.767 5 16 6.234 16 7.75V9.052C16 9.466 15.664 9.802 15.25 9.802C14.836 9.802 14.5 9.466 14.5 9.052V7.75C14.5 7.061 13.939 6.5 13.25 6.5H6.74999C6.06099 6.5 5.49999 7.061 5.49999 7.75V9.25C5.49999 9.788 5.84899 10.262 6.36699 10.43C6.76099 10.558 6.97599 10.981 6.84699 11.375C6.74399 11.692 6.45099 11.893 6.13399 11.893L6.13499 11.894Z"
+          className="fill-acmekit-fg-on-color"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_9988_95578">
+          <rect
+            width="12"
+            height="12"
+            className="fill-acmekit-fg-on-color"
+            transform="translate(4 4)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/Icons/NavigationDropdown/User/index.tsx

@@ -0,0 +1,37 @@
+import { IconProps } from "@acmekit/icons/dist/types"
+import React from "react"
+
+export const NavigationDropdownUserIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="20" height="20" className="fill-acmekit-tag-red-icon" />
+      <g clipPath="url(#clip0_10088_101526)">
+        <path
+          d="M10 8.99097C11.3807 8.99097 12.5 7.87168 12.5 6.49097C12.5 5.11025 11.3807 3.99097 10 3.99097C8.61929 3.99097 7.5 5.11025 7.5 6.49097C7.5 7.87168 8.61929 8.99097 10 8.99097Z"
+          className="fill-acmekit-fg-on-color"
+        />
+        <path
+          d="M14.533 12.639C13.601 11.011 11.864 10 10 10C8.136 10 6.398 11.011 5.467 12.639C5.218 13.073 5.162 13.593 5.313 14.067C5.463 14.539 5.809 14.93 6.26 15.139C7.501 15.713 8.75 16 10 16C11.25 16 12.499 15.713 13.74 15.139C14.191 14.93 14.536 14.539 14.687 14.067C14.838 13.593 14.782 13.073 14.533 12.64V12.639Z"
+          className="fill-acmekit-fg-on-color"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10088_101526">
+          <rect
+            width="12"
+            height="12"
+            className="fill-acmekit-fg-on-color"
+            transform="translate(4 4)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/Icons/PuzzleColored/index.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { IconProps } from "@acmekit/icons/dist/types"
+
+export const PuzzleColoredIcon = (props: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10683_56033)">
+        <path
+          opacity="0.3"
+          d="M13.1111 7.33325C13.4418 7.33325 13.7476 7.43814 14 7.61503V5.55547C14 4.57414 13.2044 3.7777 12.2222 3.7777H10.1627C10.3387 3.52525 10.4444 3.22036 10.4444 2.88881C10.4444 2.02925 9.74755 1.33325 8.88888 1.33325C8.03022 1.33325 7.33333 2.02925 7.33333 2.88881C7.33333 3.22036 7.43822 3.52525 7.61511 3.7777H5.55555C4.57333 3.7777 3.77777 4.57414 3.77777 5.55547V7.61503C3.52533 7.43903 3.21955 7.33325 2.88888 7.33325C2.03022 7.33325 1.33333 8.02925 1.33333 8.88881C1.33333 9.74836 2.03022 10.4444 2.88888 10.4444C3.21955 10.4444 3.52533 10.3395 3.77777 10.1626V12.2221C3.77777 13.2035 4.57333 13.9999 5.55555 13.9999H7.61511C7.43911 13.7475 7.33333 13.4426 7.33333 13.111C7.33333 12.2515 8.03022 11.5555 8.88888 11.5555C9.74755 11.5555 10.4444 12.2515 10.4444 13.111C10.4444 13.4426 10.3396 13.7475 10.1627 13.9999H12.2222C13.2044 13.9999 14 13.2035 14 12.2221V10.1626C13.7476 10.3386 13.4418 10.4444 13.1111 10.4444C12.2524 10.4444 11.5556 9.74836 11.5556 8.88881C11.5556 8.02925 12.2524 7.33325 13.1111 7.33325Z"
+          fill="currentColor"
+        />
+        <path
+          d="M13.1111 7.33325C13.4418 7.33325 13.7476 7.43814 14 7.61503V5.55547C14 4.57414 13.2044 3.7777 12.2222 3.7777H10.1627C10.3387 3.52525 10.4444 3.22036 10.4444 2.88881C10.4444 2.02925 9.74755 1.33325 8.88888 1.33325C8.03022 1.33325 7.33333 2.02925 7.33333 2.88881C7.33333 3.22036 7.43822 3.52525 7.61511 3.7777H5.55555C4.57333 3.7777 3.77777 4.57414 3.77777 5.55547V7.61503C3.52533 7.43903 3.21955 7.33325 2.88888 7.33325C2.03022 7.33325 1.33333 8.02925 1.33333 8.88881C1.33333 9.74836 2.03022 10.4444 2.88888 10.4444C3.21955 10.4444 3.52533 10.3395 3.77777 10.1626V12.2221C3.77777 13.2035 4.57333 13.9999 5.55555 13.9999H7.61511C7.43911 13.7475 7.33333 13.4426 7.33333 13.111C7.33333 12.2515 8.03022 11.5555 8.88888 11.5555C9.74755 11.5555 10.4444 12.2515 10.4444 13.111C10.4444 13.4426 10.3396 13.7475 10.1627 13.9999H12.2222C13.2044 13.9999 14 13.2035 14 12.2221V10.1626C13.7476 10.3386 13.4418 10.4444 13.1111 10.4444C12.2524 10.4444 11.5556 9.74836 11.5556 8.88881C11.5556 8.02925 12.2524 7.33325 13.1111 7.33325Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10683_56033">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/Icons/QuestionMark/index.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { IconProps } from "@acmekit/icons/dist/types"
+
+export const QuestionMarkIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.43951 5.51484C8.61051 4.48984 10.5105 4.48984 11.6815 5.51484C12.8535 6.53984 12.8535 8.20184 11.6815 9.22684C11.4785 9.40584 11.2515 9.55284 11.0115 9.66884C10.2665 10.0298 9.56151 10.6678 9.56151 11.4958V12.2458M9.56051 15.2458H9.56851V15.2538H9.56051V15.2458Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

package/src/components/Icons/Restock/index.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { IconProps } from "@acmekit/icons/dist/types"
+
+export const RestockIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="26"
+      height="30"
+      viewBox="0 0 26 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        opacity="0.3"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.44447 7.33325H20.5556C22.5193 7.33325 24.1111 8.92513 24.1111 10.8888V21.5555C24.1111 22.6783 23.5906 23.6796 22.7778 24.3311V19.7777C22.7778 17.5686 20.9869 15.7777 18.7778 15.7777C16.5687 15.7777 14.7778 17.5686 14.7778 19.7777V24.6666C14.7778 24.8168 14.7862 24.9651 14.8022 25.111H5.44447C3.48079 25.111 1.88892 23.5192 1.88892 21.5555V10.8888C1.88892 8.92513 3.48079 7.33325 5.44447 7.33325Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13 2V12.6667"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.33337 9.17156L4.90937 3.97689C5.51026 2.76622 6.74404 2 8.09515 2H17.9049C19.256 2 20.4898 2.76622 21.0907 3.97689L23.6667 9.17333"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M23.2222 23.8844C23.768 23.2586 24.1111 22.4515 24.1111 21.5555V10.8888C24.1111 8.92614 22.52 7.33325 20.5556 7.33325H5.44447C3.48003 7.33325 1.88892 8.92614 1.88892 10.8888V21.5555C1.88892 23.5181 3.48003 25.111 5.44447 25.111H14.3334"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.7778 24.6667V19.7778"
+        stroke="currentColor"
+        strokeWidth="2.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.7778 29.9999C19.5141 29.9999 20.1111 29.4029 20.1111 28.6666C20.1111 27.9302 19.5141 27.3333 18.7778 27.3333C18.0414 27.3333 17.4445 27.9302 17.4445 28.6666C17.4445 29.4029 18.0414 29.9999 18.7778 29.9999Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/Icons/ScrollText/index.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { IconProps } from "@acmekit/icons/dist/types"
+
+export const ScrollTextIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10703_107758)">
+        <path
+          opacity="0.3"
+          d="M1.55556 3.33333C1.55556 2.59695 2.15251 2 2.88889 2C3.62527 2 4.22222 2.59695 4.22222 3.33333V6H1.74604C1.64084 6 1.55556 5.91472 1.55556 5.80952V3.33333Z"
+          fill="currentColor"
+        />
+        <path
+          opacity="0.3"
+          d="M6.90213 11.3335H14.4444V13.1113C14.4444 13.6022 14.0465 14.0002 13.5556 14.0002H6.90213V11.3335Z"
+          fill="currentColor"
+        />
+        <path
+          d="M13.1111 14C13.8471 14 14.4444 13.4027 14.4444 12.6667V11.7778C14.4444 11.5324 14.2453 11.3333 14 11.3333H7.33334C7.088 11.3333 6.88889 11.5324 6.88889 11.7778V12.6667C6.88889 13.4027 6.29156 14 5.55556 14C4.81956 14 4.22222 13.4027 4.22222 12.6667V3.33333C4.22222 2.59733 3.62489 2 2.88889 2C2.15289 2 1.55556 2.59733 1.55556 3.33333V5.11111C1.55556 5.60178 1.95378 6 2.44445 6H4.22222"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M13.1111 14H5.55556"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2.88889 2H11.3333C12.0693 2 12.6667 2.59733 12.6667 3.33333V9.11111"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.66666 5.11108H10.2222"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.66666 7.77783H10.2222"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10703_107758">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/Icons/ShadedBg/index.tsx

@@ -0,0 +1,334 @@
+
+import React, { useMemo } from "react"
+import { IconProps } from "@acmekit/icons/dist/types"
+import { BadgeVariant } from "../../.."
+
+type ShadedBgIconProps = IconProps & {
+  variant?: BadgeVariant
+}
+
+export const ShadedBgIcon = ({
+  variant = "blue",
+  ...props
+}: ShadedBgIconProps) => {
+  const color = useMemo(() => {
+    switch (variant) {
+      case "neutral":
+      case "code":
+        return "var(--docs-tags-neutral-border)"
+      case "blue":
+        return "var(--docs-tags-blue-border)"
+      case "purple":
+        return "var(--docs-tags-purple-border)"
+      case "green":
+        return "var(--docs-tags-green-border)"
+      case "orange":
+        return "var(--docs-tags-orange-border)"
+      case "red":
+        return "var(--docs-tags-red-border)"
+    }
+  }, [variant])
+
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      height="100%"
+      width="100%"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10402_37468)">
+        <rect
+          x="32.3379"
+          y="-66.5442"
+          width="1.5"
+          height="96"
+          transform="rotate(45 32.3379 -66.5442)"
+          fill={color}
+        />
+        <rect
+          x="34.813"
+          y="-64.0694"
+          width="1.5"
+          height="96"
+          transform="rotate(45 34.813 -64.0694)"
+          fill={color}
+        />
+        <rect
+          x="37.2876"
+          y="-61.5945"
+          width="1.5"
+          height="96"
+          transform="rotate(45 37.2876 -61.5945)"
+          fill={color}
+        />
+        <rect
+          x="39.7627"
+          y="-59.1196"
+          width="1.5"
+          height="96"
+          transform="rotate(45 39.7627 -59.1196)"
+          fill={color}
+        />
+        <rect
+          x="42.2373"
+          y="-56.6447"
+          width="1.5"
+          height="96"
+          transform="rotate(45 42.2373 -56.6447)"
+          fill={color}
+        />
+        <rect
+          x="44.7124"
+          y="-54.1699"
+          width="1.5"
+          height="96"
+          transform="rotate(45 44.7124 -54.1699)"
+          fill={color}
+        />
+        <rect
+          x="47.187"
+          y="-51.695"
+          width="1.5"
+          height="96"
+          transform="rotate(45 47.187 -51.695)"
+          fill={color}
+        />
+        <rect
+          x="49.6621"
+          y="-49.2201"
+          width="1.5"
+          height="96"
+          transform="rotate(45 49.6621 -49.2201)"
+          fill={color}
+        />
+        <rect
+          x="52.1367"
+          y="-46.7452"
+          width="1.5"
+          height="96"
+          transform="rotate(45 52.1367 -46.7452)"
+          fill={color}
+        />
+        <rect
+          x="54.6118"
+          y="-44.2704"
+          width="1.5"
+          height="96"
+          transform="rotate(45 54.6118 -44.2704)"
+          fill={color}
+        />
+        <rect
+          x="57.0869"
+          y="-41.7955"
+          width="1.5"
+          height="96"
+          transform="rotate(45 57.0869 -41.7955)"
+          fill={color}
+        />
+        <rect
+          x="59.5615"
+          y="-39.3206"
+          width="1.5"
+          height="96"
+          transform="rotate(45 59.5615 -39.3206)"
+          fill={color}
+        />
+        <rect
+          x="62.0366"
+          y="-36.8458"
+          width="1.5"
+          height="96"
+          transform="rotate(45 62.0366 -36.8458)"
+          fill={color}
+        />
+        <rect
+          x="64.5112"
+          y="-34.3709"
+          width="1.5"
+          height="96"
+          transform="rotate(45 64.5112 -34.3709)"
+          fill={color}
+        />
+        <rect
+          x="66.9863"
+          y="-31.896"
+          width="1.5"
+          height="96"
+          transform="rotate(45 66.9863 -31.896)"
+          fill={color}
+        />
+        <rect
+          x="69.4609"
+          y="-29.4211"
+          width="1.5"
+          height="96"
+          transform="rotate(45 69.4609 -29.4211)"
+          fill={color}
+        />
+        <rect
+          x="71.936"
+          y="-26.9463"
+          width="1.5"
+          height="96"
+          transform="rotate(45 71.936 -26.9463)"
+          fill={color}
+        />
+        <rect
+          x="74.4106"
+          y="-24.4714"
+          width="1.5"
+          height="96"
+          transform="rotate(45 74.4106 -24.4714)"
+          fill={color}
+        />
+        <rect
+          x="76.8857"
+          y="-21.9965"
+          width="1.5"
+          height="96"
+          transform="rotate(45 76.8857 -21.9965)"
+          fill={color}
+        />
+        <rect
+          x="79.3604"
+          y="-19.5216"
+          width="1.5"
+          height="96"
+          transform="rotate(45 79.3604 -19.5216)"
+          fill={color}
+        />
+        <rect
+          x="81.8354"
+          y="-17.0468"
+          width="1.5"
+          height="96"
+          transform="rotate(45 81.8354 -17.0468)"
+          fill={color}
+        />
+        <rect
+          x="84.3105"
+          y="-14.5719"
+          width="1.5"
+          height="96"
+          transform="rotate(45 84.3105 -14.5719)"
+          fill={color}
+        />
+        <rect
+          x="86.7852"
+          y="-12.097"
+          width="1.5"
+          height="96"
+          transform="rotate(45 86.7852 -12.097)"
+          fill={color}
+        />
+        <rect
+          x="89.2603"
+          y="-9.62215"
+          width="1.5"
+          height="96"
+          transform="rotate(45 89.2603 -9.62215)"
+          fill={color}
+        />
+        <rect
+          x="91.7349"
+          y="-7.14726"
+          width="1.5"
+          height="96"
+          transform="rotate(45 91.7349 -7.14726)"
+          fill={color}
+        />
+        <rect
+          x="94.21"
+          y="-4.67239"
+          width="1.5"
+          height="96"
+          transform="rotate(45 94.21 -4.67239)"
+          fill={color}
+        />
+        <rect
+          x="96.6846"
+          y="-2.19753"
+          width="1.5"
+          height="96"
+          transform="rotate(45 96.6846 -2.19753)"
+          fill={color}
+        />
+        <rect
+          x="99.1597"
+          y="0.277344"
+          width="1.5"
+          height="96"
+          transform="rotate(45 99.1597 0.277344)"
+          fill={color}
+        />
+        <rect
+          x="101.634"
+          y="2.75223"
+          width="1.5"
+          height="96"
+          transform="rotate(45 101.634 2.75223)"
+          fill={color}
+        />
+        <rect
+          x="104.109"
+          y="5.2271"
+          width="1.5"
+          height="96"
+          transform="rotate(45 104.109 5.2271)"
+          fill={color}
+        />
+        <rect
+          x="106.584"
+          y="7.70197"
+          width="1.5"
+          height="96"
+          transform="rotate(45 106.584 7.70197)"
+          fill={color}
+        />
+        <rect
+          x="109.059"
+          y="10.1768"
+          width="1.5"
+          height="96"
+          transform="rotate(45 109.059 10.1768)"
+          fill={color}
+        />
+        <rect
+          x="111.534"
+          y="12.6517"
+          width="1.5"
+          height="96"
+          transform="rotate(45 111.534 12.6517)"
+          fill={color}
+        />
+        <rect
+          x="114.009"
+          y="15.1266"
+          width="1.5"
+          height="96"
+          transform="rotate(45 114.009 15.1266)"
+          fill={color}
+        />
+        <rect
+          x="116.484"
+          y="17.6015"
+          width="1.5"
+          height="96"
+          transform="rotate(45 116.484 17.6015)"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10402_37468">
+          <rect
+            width="148.5"
+            height="96"
+            fill="white"
+            transform="translate(22.4385 -76.4437) rotate(45)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}