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

package/src/icon/ui-icons/Cross.tsx

@@ -1,20 +1,59 @@
 /*
- * Auto-generated from the shipped @react-spectrum/s2 dist assets (SVGO-
- * optimized — pixel parity requires the shipped path data, not the raw
- * vendored .svg sources). Variants absent from the dist (Arrow, Gripper)
- * fall back to the vendored sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: react-spectrum/packages/@react-spectrum/s2/ui-icons/Cross.tsx
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize75.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize75.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize100.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize100.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize200.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize200.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize300.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize300.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize400.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize400.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize500.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize500.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize600.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_CrossSize600.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createUIIcon } from "../spectrum-icon";
+import { style } from "../../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+
+const styles = style({
+  width: {
+    size: {
+      M: 8,
+      L: 10,
+      XL: 12,
+      XXL: 12,
+      XXXL: 14,
+      XXXXL: 16,
+      S: 8,
+    },
+  },
+  height: {
+    size: {
+      M: 8,
+      L: 10,
+      XL: 12,
+      XXL: 12,
+      XXXL: 14,
+      XXXXL: 16,
+      S: 8,
+    },
+  },
+});
 
 export type CrossProps = JSX.SvgSVGAttributes<SVGSVGElement> & {
   size?: "S" | "M" | "L" | "XL" | "XXL" | "XXXL" | "XXXXL";
 };
 
 function Cross_SSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +61,7 @@ function Cross_SSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="8"
       viewBox="0 0 8 8"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -33,7 +72,7 @@ function Cross_SSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function Cross_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +80,7 @@ function Cross_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="8"
       viewBox="0 0 8 8"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -52,7 +91,7 @@ function Cross_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function Cross_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -60,7 +99,7 @@ function Cross_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="10"
       viewBox="0 0 10 10"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -71,7 +110,7 @@ function Cross_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function Cross_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -79,7 +118,7 @@ function Cross_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="12"
       viewBox="0 0 12 12"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -90,7 +129,7 @@ function Cross_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function Cross_XXLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -98,7 +137,7 @@ function Cross_XXLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="12"
       viewBox="0 0 12 12"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -109,7 +148,7 @@ function Cross_XXLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function Cross_XXXLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -117,7 +156,7 @@ function Cross_XXXLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element
       height="14"
       viewBox="0 0 14 14"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -128,7 +167,7 @@ function Cross_XXXLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element
 }
 
 function Cross_XXXXLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -136,7 +175,7 @@ function Cross_XXXXLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element
       height="16"
       viewBox="0 0 16 16"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -155,24 +194,26 @@ const Cross_XXXL = createUIIcon(Cross_XXXLSvg);
 const Cross_XXXXL = createUIIcon(Cross_XXXXLSvg);
 
 export default function Cross(props: CrossProps): JSX.Element {
-  const { size = "M", class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["size", "class", "width", "height"]);
+  const size = local.size ?? "M";
+  const mergedClass = () => `${local.class ?? ""}${styles({ size })}`;
   switch (size) {
     case "S":
-      return <Cross_S {...rest} class={className} />;
+      return <Cross_S {...rest} class={mergedClass()} />;
     case "M":
-      return <Cross_M {...rest} class={className} />;
+      return <Cross_M {...rest} class={mergedClass()} />;
     case "L":
-      return <Cross_L {...rest} class={className} />;
+      return <Cross_L {...rest} class={mergedClass()} />;
     case "XL":
-      return <Cross_XL {...rest} class={className} />;
+      return <Cross_XL {...rest} class={mergedClass()} />;
     case "XXL":
-      return <Cross_XXL {...rest} class={className} />;
+      return <Cross_XXL {...rest} class={mergedClass()} />;
     case "XXXL":
-      return <Cross_XXXL {...rest} class={className} />;
+      return <Cross_XXXL {...rest} class={mergedClass()} />;
     case "XXXXL":
-      return <Cross_XXXXL {...rest} class={className} />;
+      return <Cross_XXXXL {...rest} class={mergedClass()} />;
     default:
-      return <Cross_M {...rest} class={className} />;
+      return <Cross_M {...rest} class={mergedClass()} />;
   }
 }
 

package/src/icon/ui-icons/Dash.tsx

@@ -1,20 +1,51 @@
 /*
- * Auto-generated from the shipped @react-spectrum/s2 dist assets (SVGO-
- * optimized — pixel parity requires the shipped path data, not the raw
- * vendored .svg sources). Variants absent from the dist (Arrow, Gripper)
- * fall back to the vendored sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: react-spectrum/packages/@react-spectrum/s2/ui-icons/Dash.tsx
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DashSize50.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DashSize50.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DashSize75.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DashSize75.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DashSize100.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DashSize100.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DashSize200.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DashSize200.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DashSize300.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DashSize300.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createUIIcon } from "../spectrum-icon";
+import { style } from "../../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+
+const styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 12,
+      XS: 8,
+      S: 8,
+    },
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 12,
+      XS: 8,
+      S: 8,
+    },
+  },
+});
 
 export type DashProps = JSX.SvgSVGAttributes<SVGSVGElement> & {
   size?: "XS" | "S" | "M" | "L" | "XL";
 };
 
 function Dash_XSSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +53,7 @@ function Dash_XSSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="8"
       viewBox="0 0 8 8"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -33,7 +64,7 @@ function Dash_XSSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function Dash_SSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +72,7 @@ function Dash_SSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="8"
       viewBox="0 0 8 8"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -52,7 +83,7 @@ function Dash_SSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function Dash_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -60,7 +91,7 @@ function Dash_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="10"
       viewBox="0 0 10 10"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path fill="var(--iconPrimary, #222)" d="M8.5 6h-7a1 1 0 1 1 0-2h7a1 1 0 1 1 0 2" />
     </svg>
@@ -68,7 +99,7 @@ function Dash_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function Dash_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -76,7 +107,7 @@ function Dash_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="12"
       viewBox="0 0 12 12"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -87,7 +118,7 @@ function Dash_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 }
 
 function Dash_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -95,7 +126,7 @@ function Dash_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="12"
       viewBox="0 0 12 12"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         fill="var(--iconPrimary, #222)"
@@ -112,20 +143,22 @@ const Dash_L = createUIIcon(Dash_LSvg);
 const Dash_XL = createUIIcon(Dash_XLSvg);
 
 export default function Dash(props: DashProps): JSX.Element {
-  const { size = "M", class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["size", "class", "width", "height"]);
+  const size = local.size ?? "M";
+  const mergedClass = () => `${local.class ?? ""}${styles({ size })}`;
   switch (size) {
     case "XS":
-      return <Dash_XS {...rest} class={className} />;
+      return <Dash_XS {...rest} class={mergedClass()} />;
     case "S":
-      return <Dash_S {...rest} class={className} />;
+      return <Dash_S {...rest} class={mergedClass()} />;
     case "M":
-      return <Dash_M {...rest} class={className} />;
+      return <Dash_M {...rest} class={mergedClass()} />;
     case "L":
-      return <Dash_L {...rest} class={className} />;
+      return <Dash_L {...rest} class={mergedClass()} />;
     case "XL":
-      return <Dash_XL {...rest} class={className} />;
+      return <Dash_XL {...rest} class={mergedClass()} />;
     default:
-      return <Dash_M {...rest} class={className} />;
+      return <Dash_M {...rest} class={mergedClass()} />;
   }
 }
 

package/src/icon/ui-icons/DragHandle.tsx

@@ -1,20 +1,47 @@
 /*
- * Auto-generated from the shipped @react-spectrum/s2 dist assets (SVGO-
- * optimized — pixel parity requires the shipped path data, not the raw
- * vendored .svg sources). Variants absent from the dist (Arrow, Gripper)
- * fall back to the vendored sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: react-spectrum/packages/@react-spectrum/s2/ui-icons/DragHandle.tsx
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DragHandleSize75.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DragHandleSize75.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DragHandleSize100.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DragHandleSize100.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DragHandleSize200.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DragHandleSize200.cjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DragHandleSize300.mjs
+// Generator input: @react-spectrum/s2@1.7.0/dist/private/S2_DragHandleSize300.cjs
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createUIIcon } from "../spectrum-icon";
+import { style } from "../../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+
+const styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      S: 10,
+    },
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      S: 10,
+    },
+  },
+});
 
 export type DragHandleProps = JSX.SvgSVGAttributes<SVGSVGElement> & {
   size?: "S" | "M" | "L" | "XL";
 };
 
 function DragHandle_SSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +49,7 @@ function DragHandle_SSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elemen
       height="10"
       viewBox="0 0 10 10"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <circle cx="3.2" cy="8.6" r="0.9" fill="var(--iconPrimary, #222)" />
       <circle cx="3.2" cy="5" r="0.9" fill="var(--iconPrimary, #222)" />
@@ -35,7 +62,7 @@ function DragHandle_SSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elemen
 }
 
 function DragHandle_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +70,7 @@ function DragHandle_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elemen
       height="10"
       viewBox="0 0 10 10"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <circle cx="3" cy="9" r="1" fill="var(--iconPrimary, #222)" />
       <circle cx="3" cy="5" r="1" fill="var(--iconPrimary, #222)" />
@@ -56,7 +83,7 @@ function DragHandle_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elemen
 }
 
 function DragHandle_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -64,7 +91,7 @@ function DragHandle_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elemen
       height="12"
       viewBox="0 0 12 12"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <circle cx="3.8" cy="10.4" r="1.1" fill="var(--iconPrimary, #222)" />
       <circle cx="3.8" cy="6" r="1.1" fill="var(--iconPrimary, #222)" />
@@ -77,7 +104,7 @@ function DragHandle_LSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elemen
 }
 
 function DragHandle_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -85,7 +112,7 @@ function DragHandle_XLSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Eleme
       height="14"
       viewBox="0 0 14 14"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <circle cx="4.6" cy="11.8" r="1.2" fill="var(--iconPrimary, #222)" />
       <circle cx="4.6" cy="7" r="1.2" fill="var(--iconPrimary, #222)" />
@@ -103,18 +130,20 @@ const DragHandle_L = createUIIcon(DragHandle_LSvg);
 const DragHandle_XL = createUIIcon(DragHandle_XLSvg);
 
 export default function DragHandle(props: DragHandleProps): JSX.Element {
-  const { size = "M", class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["size", "class", "width", "height"]);
+  const size = local.size ?? "M";
+  const mergedClass = () => `${local.class ?? ""}${styles({ size })}`;
   switch (size) {
     case "S":
-      return <DragHandle_S {...rest} class={className} />;
+      return <DragHandle_S {...rest} class={mergedClass()} />;
     case "M":
-      return <DragHandle_M {...rest} class={className} />;
+      return <DragHandle_M {...rest} class={mergedClass()} />;
     case "L":
-      return <DragHandle_L {...rest} class={className} />;
+      return <DragHandle_L {...rest} class={mergedClass()} />;
     case "XL":
-      return <DragHandle_XL {...rest} class={className} />;
+      return <DragHandle_XL {...rest} class={mergedClass()} />;
     default:
-      return <DragHandle_M {...rest} class={className} />;
+      return <DragHandle_M {...rest} class={mergedClass()} />;
   }
 }
 

package/src/icon/ui-icons/Gripper.tsx

@@ -1,20 +1,34 @@
 /*
- * Auto-generated from the shipped @react-spectrum/s2 dist assets (SVGO-
- * optimized — pixel parity requires the shipped path data, not the raw
- * vendored .svg sources). Variants absent from the dist (Arrow, Gripper)
- * fall back to the vendored sources.
+ * Auto-generated from the pinned @react-spectrum/s2 icon inventory.
  * Do not edit by hand.
  */
+// Generator input: react-spectrum/packages/@react-spectrum/s2/ui-icons/Gripper.tsx
+// Generator input: packages/solid-spectrum/src/icon/assets/ui-icons/S2_GripperSize100.svg
 
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createUIIcon } from "../spectrum-icon";
+import { style } from "../../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+
+const styles = style({
+  width: {
+    size: {
+      M: 24,
+    },
+  },
+  height: {
+    size: {
+      M: 4,
+    },
+  },
+});
 
 export type GripperProps = JSX.SvgSVGAttributes<SVGSVGElement> & {
   size?: "M";
 };
 
 function Gripper_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
-  const { class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["class", "width", "height"]);
   return (
     <svg
       id="b"
@@ -24,7 +38,7 @@ function Gripper_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
       height="4"
       viewBox="0 0 24 4"
       {...rest}
-      class={className}
+      class={local.class}
     >
       <path
         d="M22,4H2c-1.10449,0-2-.89551-2-2S.89551,0,2,0h20c1.10449,0,2,.89551,2,2s-.89551,2-2,2Z"
@@ -38,12 +52,14 @@ function Gripper_MSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {
 const Gripper_M = createUIIcon(Gripper_MSvg);
 
 export default function Gripper(props: GripperProps): JSX.Element {
-  const { size = "M", class: className, width: _width, height: _height, ...rest } = props;
+  const [local, rest] = splitProps(props, ["size", "class", "width", "height"]);
+  const size = local.size ?? "M";
+  const mergedClass = () => `${local.class ?? ""}${styles({ size })}`;
   switch (size) {
     case "M":
-      return <Gripper_M {...rest} class={className} />;
+      return <Gripper_M {...rest} class={mergedClass()} />;
     default:
-      return <Gripper_M {...rest} class={className} />;
+      return <Gripper_M {...rest} class={mergedClass()} />;
   }
 }