@proyecto-viviana/ui 0.6.3 → 0.8.0-rc.0

package/src/icon/s2wf-icons/SocialNetworkIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/SocialNetwork.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/SocialNetwork.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function SocialNetworkIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,85 +18,84 @@ function SocialNetworkIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.E
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="m17.95544,8.12915c.02747-.22266-.0592-.44727-.24548-.58276l-7.34277-5.3335c-.02917-.02124-.0625-.03223-.09412-.04785-.02063-.01062-.03931-.02271-.06116-.03101-.05188-.0188-.10522-.02759-.15942-.0321-.02148-.00232-.04028-.01257-.06226-.01257h-.00098c-.04663,0-.08789.01697-.13159.02686-.01868.00439-.0376.00513-.05591.01123-.05713.01843-.10693.04602-.15552.0791-.00415.00293-.00928.00378-.01343.00684l-.04541.03296c-.01318.01147-.02979.01807-.04199.03052L2.29102,7.54883c-.02417.01746-.04041.04126-.06128.0614-.0199.01904-.04016.03577-.05737.0575-.04614.05786-.08398.12109-.10693.19031-.00049.00134-.00146.00208-.00195.0033-.00049.00171,0,.0033-.00049.00488-.02197.0697-.02832.14294-.02502.21704.00122.02588.0072.04956.0116.07495.00513.02979.00439.05981.01392.08936l2.80566,8.63086c.00977.03003.02832.05457.04224.08228.01099.02197.01953.04382.0332.0647.04175.06348.09082.12073.15137.16479l.00073.00073c.00879.00635.01904.00842.02808.01428.04565.02966.09326.05676.14563.07385.06287.02051.12781.03101.1925.03101.00012,0,.00024-.00012.00037-.00012s.00037.00012.00061.00012l9.0752-.00098c.02905,0,.05566-.00952.08386-.01343.02783-.00378.05457-.00549.08191-.01318.14587-.04041.27026-.13135.35352-.25818.01379-.02112.02246-.04333.03357-.06567.01379-.02747.0321-.05188.04187-.08167l2.80371-8.63184c.00977-.03027.00916-.06104.01416-.0918.00098-.0083.00317-.01587.00378-.02417Zm-3.63171,7.19519l-3.30957-4.55432,5.34717-1.71863-2.0376,6.27295ZM3.63135,9.02734l5.3584,1.74023-3.31067,4.55762-2.04773-6.29785Zm6.9856-5.08801l5.38782,3.91321-5.37976,1.72949-.00806-5.6427Zm-1.24219,5.63928l-5.35706-1.73999,5.34924-3.88745.00781,5.62744Zm.62622,1.92383l3.31128,4.55676-6.62183.00073,3.31055-4.5575Z"
-        fill="var(--iconPrimary, #222)"
-        opacity=".6"
-        stroke-width="0"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="M17.955 8.13c.028-.224-.059-.448-.245-.584l-7.343-5.333c-.029-.021-.062-.032-.094-.048-.02-.01-.04-.023-.061-.031q-.078-.027-.16-.032c-.021-.002-.04-.013-.062-.013-.047 0-.089.017-.132.027-.019.005-.038.005-.056.011q-.084.029-.156.08-.007.002-.013.006l-.046.033c-.013.012-.03.018-.042.03L2.291 7.55c-.024.017-.04.041-.061.061s-.04.036-.058.058q-.07.086-.107.19l-.002.003v.005q-.031.106-.025.217.003.038.012.075c.005.03.004.06.013.09l2.806 8.63c.01.03.028.055.042.083q.015.034.034.064.06.097.151.165.015.009.029.015.067.047.145.074.095.03.193.031h9.076c.03 0 .056-.01.084-.014s.055-.006.082-.014c.146-.04.27-.13.353-.258q.02-.031.034-.065c.014-.028.032-.052.042-.082l2.804-8.632c.01-.03.009-.06.014-.092zm-3.631 7.194-3.31-4.554 5.347-1.719zM3.63 9.027l5.359 1.74-3.31 4.558zm6.986-5.088 5.388 3.914-5.38 1.729zM9.375 9.58l-5.357-1.74L9.367 3.95zM10 11.502l3.311 4.557H6.69z"
+        opacity="0.6"
       />
       <circle
-        cx="9.9972"
-        cy="2.60374"
-        r="1.49968"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        cx="9.997"
+        cy="2.604"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
       />
       <circle
-        cx="5.41642"
-        cy="16.74518"
-        r="1.49968"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        cx="5.416"
+        cy="16.745"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
       />
-      <circle cx="10" cy="10.34887" r="1.49968" fill="var(--iconPrimary, #222)" stroke-width="0" />
       <circle
-        cx="14.55749"
-        cy="16.71049"
-        r="1.49968"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        cx="10"
+        cy="10.349"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
       />
       <circle
-        cx="17.40009"
-        cy="8.08823"
-        r="1.49968"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        cx="14.557"
+        cy="16.71"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
       />
       <circle
-        cx="2.59991"
-        cy="8.08069"
-        r="1.49968"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        cx="17.4"
+        cy="8.088"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
       />
       <circle
-        cx="9.9972"
-        cy="2.60374"
-        r="1.49968"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        cx="2.6"
+        cy="8.081"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
       />
       <circle
-        cx="5.41642"
-        cy="16.74518"
-        r="1.49968"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        cx="9.997"
+        cy="2.604"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
       />
-      <circle cx="10" cy="10.34887" r="1.49968" fill="var(--iconPrimary, #222)" stroke-width="0" />
       <circle
-        cx="14.55749"
-        cy="16.71049"
-        r="1.49968"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        cx="5.416"
+        cy="16.745"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
       />
       <circle
-        cx="17.40009"
-        cy="8.08823"
-        r="1.49968"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        cx="10"
+        cy="10.349"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
       />
       <circle
-        cx="2.59991"
-        cy="8.08069"
-        r="1.49968"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        cx="14.557"
+        cy="16.71"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+      />
+      <circle
+        cx="17.4"
+        cy="8.088"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+      />
+      <circle
+        cx="2.6"
+        cy="8.081"
+        r="1.5"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
       />
     </svg>
   );

package/src/icon/s2wf-icons/SortDownIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/SortDown.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/SortDown.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function SortDownIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,23 +18,11 @@ function SortDownIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elemen
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="m18.28027,13.21973c-.29297-.29297-.76758-.29297-1.06055,0l-1.21973,1.21973V3.75c0-.41406-.33594-.75-.75-.75s-.75.33594-.75.75v10.68945l-1.21973-1.21973c-.29297-.29297-.76758-.29297-1.06055,0s-.29297.76758,0,1.06055l2.5,2.5c.06909.06909.15186.12354.24341.16162s.18896.05811.28687.05811.19531-.02002.28687-.05811.17432-.09253.24341-.16162l2.5-2.5c.29297-.29297.29297-.76758,0-1.06055Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="m7.25,14.5H2.75c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h4.5c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="m9.25,10.5H2.75c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h6.5c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="m11.25,6.5H2.75c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h8.5c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
-        fill="var(--iconPrimary, #222)"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="M18.28 13.22c-.293-.293-.767-.293-1.06 0L16 14.44V3.75c0-.414-.336-.75-.75-.75s-.75.336-.75.75v10.69l-1.22-1.22c-.293-.293-.767-.293-1.06 0s-.293.767 0 1.06l2.5 2.5q.105.105.243.162c.138.057.19.058.287.058s.195-.02.287-.058.174-.093.243-.162l2.5-2.5c.293-.293.293-.767 0-1.06M7.25 14.5h-4.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h4.5c.414 0 .75.336.75.75s-.336.75-.75.75M9.25 10.5h-6.5c-.414 0-.75-.336-.75-.75S2.336 9 2.75 9h6.5c.414 0 .75.336.75.75s-.336.75-.75.75M11.25 6.5h-8.5c-.414 0-.75-.336-.75-.75S2.336 5 2.75 5h8.5c.414 0 .75.336.75.75s-.336.75-.75.75"
       />
     </svg>
   );

package/src/icon/s2wf-icons/SortIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/Sort.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/Sort.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function SortIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,22 +18,11 @@ function SortIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="m9.25,15.5H2.75c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h6.5c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
-      />
-      <path
-        d="m13.25,10.5H2.75c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h10.5c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
-      />
-      <path
-        d="m17.25,5.5H2.75c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h14.5c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
-        fill="var(--iconPrimary, #222)"
-        stroke-width="0"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="M9.25 15.5h-6.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h6.5c.414 0 .75.336.75.75s-.336.75-.75.75M13.25 10.5H2.75c-.414 0-.75-.336-.75-.75S2.336 9 2.75 9h10.5c.414 0 .75.336.75.75s-.336.75-.75.75M17.25 5.5H2.75c-.414 0-.75-.336-.75-.75S2.336 4 2.75 4h14.5c.414 0 .75.336.75.75s-.336.75-.75.75"
       />
     </svg>
   );

package/src/icon/s2wf-icons/SortUpIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/SortUp.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/SortUp.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function SortUpIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,23 +18,11 @@ function SortUpIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="m18.28027,5.71973l-2.5-2.5c-.06909-.06909-.15198-.12378-.24365-.16187-.18335-.07593-.38989-.07593-.57324,0-.09155.03809-.17456.09277-.24365.16187l-2.5,2.5c-.29297.29297-.29297.76758,0,1.06055s.76758.29297,1.06055,0l1.21973-1.21973v10.68945c0,.41406.33594.75.75.75s.75-.33594.75-.75V5.56055l1.21973,1.21973c.14648.14648.33789.21973.53027.21973s.38379-.07324.53027-.21973c.29297-.29297.29297-.76758,0-1.06055Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="m7.25,6.5H2.75c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h4.5c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="m9.25,10.5H2.75c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h6.5c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="m11.25,14.5H2.75c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h8.5c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
-        fill="var(--iconPrimary, #222)"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="m18.28 5.72-2.5-2.5q-.105-.105-.243-.162c-.184-.076-.39-.076-.574 0q-.138.058-.243.162l-2.5 2.5c-.293.293-.293.767 0 1.06s.767.293 1.06 0l1.22-1.22v10.69c0 .414.336.75.75.75s.75-.336.75-.75V5.56l1.22 1.22c.146.147.338.22.53.22s.384-.073.53-.22c.293-.293.293-.767 0-1.06M7.25 6.5h-4.5c-.414 0-.75-.336-.75-.75S2.336 5 2.75 5h4.5c.414 0 .75.336.75.75s-.336.75-.75.75M9.25 10.5h-6.5c-.414 0-.75-.336-.75-.75S2.336 9 2.75 9h6.5c.414 0 .75.336.75.75s-.336.75-.75.75M11.25 14.5h-8.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h8.5c.414 0 .75.336.75.75s-.336.75-.75.75"
       />
     </svg>
   );

package/src/icon/s2wf-icons/SpeedFastIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/SpeedFast.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/SpeedFast.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function SpeedFastIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,19 +18,11 @@ function SpeedFastIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Eleme
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="M17.20316,5.29927c-.24425-.24425-.62229-.27212-.87299-.06002-1.38972,1.17572-6.84646,5.98684-7.16766,6.30804-.46196.47765-.42965,1.25957.07216,1.74647.49058.476,1.25108.49536,1.71804.04374.32046-.3212,5.13355-5.77564,6.31026-7.16497.21232-.25068.18454-.62891-.05981-.87325h0Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="M16.48779,15.25c-.12793,0-.25732-.03223-.37549-.10156-.3584-.20703-.48047-.66602-.27295-1.02441.5957-1.02832.91064-2.19434.91064-3.37402,0-.36035-.03467-.7373-.10645-1.1543-.06982-.4082.2041-.7959.6123-.86621.4126-.06543.79639.2041.86621.6123.08594.50195.12793.96191.12793,1.4082,0,1.44336-.38477,2.87012-1.11279,4.12598-.13916.24023-.39111.37402-.64941.37402Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="M3.51221,15.25c-.25879,0-.51025-.13379-.64941-.37402-.72803-1.25586-1.11279-2.68262-1.11279-4.12598C1.75,6.20117,5.45117,2.5,10,2.5c1.5127,0,2.99902.4209,4.29932,1.21777.35303.2168.46387.67871.24756,1.03125-.21631.35352-.67773.46387-1.03174.24805-1.06396-.65234-2.2793-.99707-3.51514-.99707-3.72217,0-6.75,3.02832-6.75,6.75,0,1.17969.31494,2.3457.91064,3.37402.20752.3584.08545.81738-.27295,1.02441-.11816.06934-.24756.10156-.37549.10156Z"
-        fill="var(--iconPrimary, #222)"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="M17.203 5.3c-.244-.245-.622-.273-.873-.06-1.39 1.175-6.846 5.986-7.167 6.307-.462.478-.43 1.26.072 1.747.49.476 1.25.495 1.718.044.32-.322 5.133-5.776 6.31-7.165.212-.251.185-.63-.06-.874M16.488 15.25c-.128 0-.258-.032-.376-.102-.358-.207-.48-.666-.273-1.024.596-1.028.911-2.194.911-3.374 0-.36-.035-.737-.106-1.154-.07-.408.204-.796.612-.866.412-.066.796.204.866.612.086.502.128.962.128 1.408 0 1.443-.385 2.87-1.113 4.126-.139.24-.39.374-.65.374M3.512 15.25c-.259 0-.51-.134-.65-.374-.727-1.256-1.112-2.683-1.112-4.126C1.75 6.201 5.451 2.5 10 2.5c1.513 0 2.999.42 4.3 1.218.352.217.463.678.247 1.031-.216.354-.678.464-1.032.248C12.451 4.345 11.235 4 10 4c-3.722 0-6.75 3.028-6.75 6.75 0 1.18.315 2.346.91 3.374.208.358.086.817-.272 1.024-.118.07-.248.102-.376.102"
       />
     </svg>
   );

package/src/icon/s2wf-icons/StampCloneIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/StampClone.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/StampClone.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function StampCloneIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,15 +18,11 @@ function StampCloneIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elem
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="m16,18H4c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h12c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="m17.25,15H2.75c-.41406,0-.75-.33594-.75-.75v-2c0-1.24023,1.00977-2.25,2.25-2.25h3.19922l.50098-2.3623c-1.04883-.68555-1.7002-1.86035-1.7002-3.1377,0-2.06738,1.68262-3.75,3.75-3.75s3.75,1.68262,3.75,3.75c0,1.27734-.65137,2.45215-1.7002,3.1377l.50098,2.3623h3.19922c1.24023,0,2.25,1.00977,2.25,2.25v2c0,.41406-.33594.75-.75.75Zm-13.75-1.5h13v-1.25c0-.41309-.33691-.75-.75-.75h-3.80664c-.35449,0-.66016-.24805-.7334-.59473l-.74316-3.50293c-.07422-.34766.10645-.69922.43262-.8418.82031-.36035,1.35059-1.16895,1.35059-2.06055,0-1.24023-1.00977-2.25-2.25-2.25s-2.25,1.00977-2.25,2.25c0,.8916.53027,1.7002,1.35059,2.06055.32617.14258.50684.49414.43262.8418l-.74316,3.50293c-.07324.34668-.37891.59473-.7334.59473h-3.80664c-.41309,0-.75.33691-.75.75v1.25Z"
-        fill="var(--iconPrimary, #222)"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="M16 18H4c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h12c.414 0 .75.336.75.75s-.336.75-.75.75M17.25 15H2.75c-.414 0-.75-.336-.75-.75v-2C2 11.01 3.01 10 4.25 10h3.2l.5-2.362c-1.049-.686-1.7-1.86-1.7-3.138C6.25 2.433 7.933.75 10 .75s3.75 1.683 3.75 3.75c0 1.277-.651 2.452-1.7 3.138l.5 2.362h3.2c1.24 0 2.25 1.01 2.25 2.25v2c0 .414-.336.75-.75.75M3.5 13.5h13v-1.25c0-.413-.337-.75-.75-.75h-3.807c-.354 0-.66-.248-.733-.595l-.743-3.503c-.074-.347.106-.699.432-.841.82-.36 1.351-1.17 1.351-2.061 0-1.24-1.01-2.25-2.25-2.25S7.75 3.26 7.75 4.5c0 .892.53 1.7 1.35 2.06.327.143.507.495.433.842l-.743 3.503c-.073.347-.379.595-.733.595H4.25c-.413 0-.75.337-.75.75z"
       />
     </svg>
   );

package/src/icon/s2wf-icons/StarFilledIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/StarFilled.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/StarFilled.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function StarFilledIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,11 +18,11 @@ function StarFilledIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elem
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="M11.49541,2.41401l1.20352,3.18317c.21146.55928.73487.93956,1.33211.96784l3.39952.16098c1.49264.07068,2.10363,1.95114.9376,2.88567l-2.6558,2.12853c-.46708.37435-.66689.99056-.50834,1.56776l.8957,3.26096c.3964,1.44316-1.20676,2.60738-2.45643,1.78386l-2.81918-1.85781c-.49979-.32936-1.14755-.33006-1.64806-.00178l-2.86668,1.88025c-1.24918.81934-2.84794-.34282-2.45403-1.78386l.89758-3.2836c.15766-.57675-.04227-1.19206-.50883-1.56599l-2.65557-2.12834c-1.16603-.93453-.55503-2.81498.9376-2.88567l3.39945-.16098c.59724-.02828,1.12065-.40856,1.33211-.96782l1.20357-3.1832c.52848-1.39773,2.50569-1.39772,3.03416.00001Z"
-        fill="var(--iconPrimary, #222)"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="M11.495 2.414 12.7 5.597c.211.56.735.94 1.332.968l3.4.161c1.492.07 2.103 1.951.937 2.886l-2.656 2.128c-.467.375-.667.99-.508 1.568l.896 3.26c.396 1.444-1.207 2.608-2.457 1.785l-2.819-1.858c-.5-.33-1.147-.33-1.648-.002l-2.867 1.88c-1.249.82-2.848-.342-2.454-1.783l.898-3.284c.158-.577-.042-1.192-.509-1.566L1.59 9.612c-1.167-.935-.556-2.815.937-2.886l3.4-.161c.597-.028 1.12-.409 1.332-.968L8.46 2.414c.529-1.398 2.506-1.398 3.034 0"
       />
     </svg>
   );

package/src/icon/s2wf-icons/StarIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/Star.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/Star.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function StarIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,11 +18,11 @@ function StarIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="M5.50586,18.63037c-.35938.00049-.71875-.1123-1.02734-.33691-.59375-.43164-.85352-1.16797-.66016-1.87646l.97754-3.57715c.0791-.28906-.02051-.5957-.25391-.78271l-2.89258-2.31934c-.57324-.45947-.79688-1.20801-.57031-1.90674.22754-.69824.84766-1.17188,1.58203-1.20654l3.70312-.17529c.29883-.01416.55957-.2041.66504-.4834l1.3125-3.46875c.25977-.6875.90234-1.13135,1.63672-1.13135s1.37695.44385,1.63672,1.13086v.00049l1.31055,3.46826c.10645.2793.36816.46973.66602.48389l3.7041.17529c.7334.03467,1.35449.5083,1.58203,1.20703.22656.69873.00293,1.44727-.57031,1.90625l-2.89355,2.31934c-.23242.18652-.33301.49414-.25391.78271l.97656,3.57422c.19336.70996-.06641,1.44775-.66211,1.87891-.59766.43359-1.37891.44727-1.99316.0415l-3.07129-2.03662c-.25098-.16553-.5752-.16602-.82617-.00146l-3.11719,2.04443c-.29492.19336-.62793.28955-.96094.28955ZM9.97852,2.86572c-.0791,0-.18359.02832-.23438.16211l-1.31152,3.46777c-.31641.83936-1.10059,1.40918-1.99805,1.45166l-3.70312.17529c-.14258.00684-.20117.09766-.22559.17236-.02441.0752-.03027.18311.08105.27295l2.89258,2.31885c.70117.56055,1.00098,1.48291.76367,2.34912l-.97754,3.57617c-.03809.13721.03027.22168.09473.26807.0625.04492.16211.08545.28418.00684l3.11719-2.04492c.75293-.49316,1.72559-.4917,2.47656.00537l3.07129,2.03662c.12109.0791.22168.04004.28516-.00635.06445-.04639.13281-.13037.09473-.26807l-.97656-3.57471c-.23633-.86572.06348-1.78711.76367-2.34814l2.89355-2.31934c.11133-.08887.10547-.19727.08105-.27197-.02441-.0752-.08301-.16602-.22559-.17285l-3.7041-.17529c-.89551-.04248-1.67969-.61182-1.99805-1.45117l-1.31055-3.46826c-.05078-.13379-.15527-.16211-.23438-.16211Z"
-        fill="var(--iconPrimary, #222)"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="M5.506 18.63c-.36 0-.719-.112-1.027-.337-.594-.431-.854-1.168-.66-1.876l.977-3.577c.079-.29-.02-.596-.254-.783l-2.893-2.32c-.573-.459-.796-1.207-.57-1.906.228-.698.848-1.172 1.582-1.206l3.703-.176c.3-.014.56-.204.665-.483l1.313-3.469c.26-.687.902-1.131 1.637-1.131s1.376.444 1.636 1.13v.001l1.31 3.468c.107.28.369.47.667.484l3.704.176c.733.034 1.354.508 1.582 1.207.226.698.003 1.447-.57 1.906l-2.894 2.32c-.232.186-.333.493-.254.782l.977 3.574c.193.71-.067 1.448-.662 1.879-.598.434-1.38.447-1.994.041l-3.07-2.036c-.252-.166-.576-.166-.827-.002l-3.117 2.045c-.295.193-.628.29-.961.29M9.979 2.866c-.08 0-.184.028-.235.162L8.433 6.496c-.317.839-1.101 1.409-1.998 1.451l-3.704.176c-.142.006-.2.097-.225.172s-.03.183.08.273l2.893 2.319c.702.56 1.001 1.483.764 2.349l-.977 3.576c-.038.137.03.222.094.268.063.045.162.086.285.007l3.117-2.045c.753-.493 1.725-.492 2.476.005l3.072 2.037c.12.08.221.04.285-.006.064-.047.133-.13.094-.268l-.976-3.575c-.236-.866.063-1.787.764-2.348l2.893-2.32c.111-.088.106-.197.081-.272s-.083-.166-.225-.172l-3.705-.176c-.895-.042-1.68-.612-1.998-1.45l-1.31-3.47c-.05-.133-.155-.161-.234-.161"
       />
     </svg>
   );

package/src/icon/s2wf-icons/StepBackwardIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/StepBackward.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/StepBackward.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function StepBackwardIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,15 +18,11 @@ function StepBackwardIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.El
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="m9.74902,15.95508c-.39404,0-.78711-.10645-1.14453-.31738l-6.25439-3.70117c-.69189-.40918-1.10449-1.13281-1.10449-1.93652s.4126-1.52734,1.10449-1.93652l6.25439-3.70117c.70508-.41602,1.55029-.42188,2.26025-.01758.71094.40625,1.13525,1.13574,1.13525,1.9541v7.40234c0,.81836-.42432,1.54785-1.13525,1.9541-.3501.19922-.7334.2998-1.11572.2998Zm-.00391-10.4082c-.11328,0-.24219.02734-.37695.10645l-6.25439,3.70117c-.33252.19629-.36816.5166-.36816.64551s.03564.44922.36816.64551l6.25439,3.70117c.3374.2002.63965.07031.75342.00586.11377-.06543.37842-.25879.37842-.65137v-7.40234c0-.39258-.26465-.58594-.37842-.65137-.06836-.03906-.20508-.10059-.37646-.10059Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="m16.75,16h-.5c-1.24072,0-2.25-1.00977-2.25-2.25v-7.5c0-1.24023,1.00928-2.25,2.25-2.25h.5c1.24072,0,2.25,1.00977,2.25,2.25v7.5c0,1.24023-1.00928,2.25-2.25,2.25Zm-.5-10.5c-.41357,0-.75.33691-.75.75v7.5c0,.41309.33643.75.75.75h.5c.41357,0,.75-.33691.75-.75v-7.5c0-.41309-.33643-.75-.75-.75h-.5Z"
-        fill="var(--iconPrimary, #222)"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="M9.749 15.955c-.394 0-.787-.106-1.145-.317L2.35 11.937c-.692-.41-1.104-1.133-1.104-1.937s.412-1.527 1.104-1.937l6.254-3.7c.706-.417 1.55-.423 2.26-.018C11.577 4.75 12 5.48 12 6.299V13.7c0 .819-.424 1.548-1.135 1.954-.35.2-.734.3-1.116.3M9.745 5.547c-.113 0-.242.027-.377.106L3.114 9.355c-.333.196-.368.516-.368.645s.035.45.368.646l6.254 3.7c.338.2.64.071.754.007.113-.066.378-.26.378-.652V6.3c0-.393-.265-.586-.378-.652-.069-.039-.206-.1-.377-.1M16.75 16h-.5C15.01 16 14 14.99 14 13.75v-7.5C14 5.01 15.01 4 16.25 4h.5C17.99 4 19 5.01 19 6.25v7.5c0 1.24-1.01 2.25-2.25 2.25m-.5-10.5c-.414 0-.75.337-.75.75v7.5c0 .413.336.75.75.75h.5c.414 0 .75-.337.75-.75v-7.5c0-.413-.336-.75-.75-.75z"
       />
     </svg>
   );

package/src/icon/s2wf-icons/StepForwardIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/StepForward.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/StepForward.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function StepForwardIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,15 +18,11 @@ function StepForwardIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Ele
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="m10.25098,15.95508c-.38281,0-.76562-.10059-1.11572-.2998-.71094-.40625-1.13525-1.13574-1.13525-1.9541v-7.40234c0-.81836.42432-1.54785,1.13525-1.9541.71143-.40332,1.55615-.39746,2.26025.01758l6.25439,3.70117c.69189.40918,1.10449,1.13281,1.10449,1.93652s-.4126,1.52734-1.10449,1.93652l-6.25439,3.70117c-.35742.21094-.75098.31738-1.14453.31738Zm.00391-10.40918c-.17139,0-.30811.0625-.37646.10156-.11377.06543-.37842.25879-.37842.65137v7.40234c0,.39258.26465.58594.37842.65137.11377.06445.41406.19141.75342-.00586l6.25439-3.70117c.33252-.19629.36816-.5166.36816-.64551s-.03564-.44922-.36816-.64551l-6.25439-3.70117c-.13477-.08008-.26367-.10742-.37695-.10742Z"
-        fill="var(--iconPrimary, #222)"
-      />
-      <path
-        d="m3.75,16h-.5c-1.24072,0-2.25-1.00977-2.25-2.25v-7.5c0-1.24023,1.00928-2.25,2.25-2.25h.5c1.24072,0,2.25,1.00977,2.25,2.25v7.5c0,1.24023-1.00928,2.25-2.25,2.25Zm-.5-10.5c-.41357,0-.75.33691-.75.75v7.5c0,.41309.33643.75.75.75h.5c.41357,0,.75-.33691.75-.75v-7.5c0-.41309-.33643-.75-.75-.75h-.5Z"
-        fill="var(--iconPrimary, #222)"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="M10.251 15.955c-.383 0-.766-.1-1.116-.3C8.425 15.25 8 14.52 8 13.701V6.3c0-.819.424-1.548 1.135-1.954.712-.404 1.556-.398 2.26.017l6.255 3.701c.692.41 1.104 1.133 1.104 1.937s-.412 1.527-1.104 1.937l-6.254 3.7c-.358.212-.751.318-1.145.318m.004-10.41c-.172 0-.308.063-.377.102-.113.066-.378.26-.378.652V13.7c0 .393.265.586.378.652.114.064.414.191.754-.006l6.254-3.701c.333-.197.368-.517.368-.646s-.035-.45-.368-.646l-6.254-3.7c-.135-.08-.264-.108-.377-.108M3.75 16h-.5C2.01 16 1 14.99 1 13.75v-7.5C1 5.01 2.01 4 3.25 4h.5C4.99 4 6 5.01 6 6.25v7.5C6 14.99 4.99 16 3.75 16m-.5-10.5c-.414 0-.75.337-.75.75v7.5c0 .413.336.75.75.75h.5c.414 0 .75-.337.75-.75v-7.5c0-.413-.336-.75-.75-.75z"
       />
     </svg>
   );

package/src/icon/s2wf-icons/StickyNoteIcon.tsx

@@ -1,13 +1,16 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/StickyNote.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/StickyNote.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function StickyNoteIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,11 +18,11 @@ function StickyNoteIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elem
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
-        d="m15.75,2H4.25c-1.24072,0-2.25,1.00977-2.25,2.25v11.5c0,1.24023,1.00928,2.25,2.25,2.25h7.87891c.59229,0,1.17188-.24023,1.59082-.65918l3.62109-3.62109c.41895-.41895.65918-.99902.65918-1.59082v-7.87891c0-1.24023-1.00928-2.25-2.25-2.25ZM3.5,15.75V4.25c0-.41309.33643-.75.75-.75h11.5c.41357,0,.75.33691.75.75v6.75h-3.25c-1.24072,0-2.25,1.00977-2.25,2.25v3.25h-6.75c-.41357,0-.75-.33691-.75-.75Zm9.15918.53027c-.04565.04565-.10382.07385-.15918.10596v-3.13623c0-.41309.33643-.75.75-.75h3.13629c-.03217.05542-.06036.11353-.10602.15918l-3.62109,3.62109Z"
-        fill="var(--iconPrimary, #222)"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
+        d="M15.75 2H4.25C3.01 2 2 3.01 2 4.25v11.5C2 16.99 3.01 18 4.25 18h7.879c.592 0 1.172-.24 1.59-.66l3.622-3.62c.419-.42.659-1 .659-1.591V4.25C18 3.01 16.99 2 15.75 2M3.5 15.75V4.25c0-.413.336-.75.75-.75h11.5c.414 0 .75.337.75.75V11h-3.25C12.01 11 11 12.01 11 13.25v3.25H4.25c-.414 0-.75-.337-.75-.75m9.16.53c-.046.046-.105.074-.16.106V13.25c0-.413.336-.75.75-.75h3.136c-.032.055-.06.114-.106.16z"
       />
     </svg>
   );

package/src/icon/s2wf-icons/StopProcessingIcon.tsx

@@ -1,32 +1,33 @@
 /*
- * Auto-generated from vendored React Spectrum S2 icon sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: @react-spectrum/s2@1.7.0/icons/StopProcessing.mjs
+// Generator input: @react-spectrum/s2@1.7.0/icons/StopProcessing.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createIcon } from "../spectrum-icon";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 function StopProcessingIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class"]);
   return (
     <svg
-      id="f"
-      data-name="ICONS"
       xmlns="http://www.w3.org/2000/svg"
       width="20"
       height="20"
       viewBox="0 0 20 20"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <rect
-        x="4"
-        y="4"
         width="12"
         height="12"
+        x="4"
+        y="4"
+        fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"
         rx="2.25"
         ry="2.25"
-        fill="var(--iconPrimary, #222)"
       />
     </svg>
   );