@cieloazul310/digital-go-pandacss-preset 0.2.1 → 0.2.2

package/dist/index.js

@@ -58,8 +58,8 @@ var accordion_default = (0, import_dev.defineSlotRecipe)({
       borderBottomWidth: "1px",
       borderBottomColor: "solid-gray.420",
       "--icon-size": {
-        base: "calc(20 / 16 * 1rem)",
-        md: "calc(32 / 16 * 1rem)"
+        base: "{spacing.5}",
+        md: "{spacing.8}"
       }
     },
     itemTrigger: {
@@ -83,8 +83,8 @@ var accordion_default = (0, import_dev.defineSlotRecipe)({
        */
       py: { base: 2, md: 3.5 },
       pl: {
-        base: "calc(var(--icon-size) + (12 / 16 * 1rem))",
-        md: "calc(var(--icon-size) + (20 / 16 * 1rem))"
+        base: "calc(var(--icon-size) + {spacing.3})",
+        md: "calc(var(--icon-size) + {spacing.5})"
       },
       pr: { base: 2, md: 4 },
       cursor: { _hover: "pointer" },
@@ -101,8 +101,8 @@ var accordion_default = (0, import_dev.defineSlotRecipe)({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       },
       /**
        * remove button style
@@ -155,8 +155,8 @@ var accordion_default = (0, import_dev.defineSlotRecipe)({
         desktop:pl-[calc(var(--icon-size)+(20/16*1rem))] desktop:pr-4 desktop:py-6
        */
       pl: {
-        base: "calc(var(--icon-size) + (12 / 16 * 1rem))",
-        md: "calc(var(--icon-size) + (20 / 16 * 1rem))"
+        base: "calc(var(--icon-size) + {spacing.3})",
+        md: "calc(var(--icon-size) + {spacing.5})"
       },
       pr: { base: 2, md: 4 },
       py: { base: 4, md: 6 }
@@ -178,13 +178,13 @@ var blockquote_default = (0, import_dev2.defineRecipe)({
      * padding-left: calc(24 / 16 * 1rem);
      */
     my: 0,
-    mx: "calc(40 / 16 * 1rem)",
+    mx: 10,
     borderLeftWidth: "8px",
     borderColor: "solid-gray.536",
-    pt: "calc(8 / 16 * 1rem)",
-    pr: "calc(16 / 16 * 1rem)",
-    pb: "calc(8 / 16 * 1rem)",
-    pl: "calc(24 / 16 * 1rem)",
+    pt: 2,
+    pr: 4,
+    pb: 2,
+    pl: 6,
     "& > *:first-child": {
       mt: 0
     },
@@ -325,8 +325,8 @@ var link_default = (0, import_dev3.defineRecipe)({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     },
     /**
      * with icon
@@ -429,8 +429,8 @@ var button_default = (0, import_dev5.defineRecipe)({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     },
     /**
      * aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
@@ -442,10 +442,14 @@ var button_default = (0, import_dev5.defineRecipe)({
      * button default
      */
     display: "inline-flex",
+    columnGap: 1,
     textAlign: "center",
     alignItems: "center",
     justifyContent: "center",
-    cursor: "pointer"
+    cursor: "pointer",
+    _icon: {
+      flexShrink: 0
+    }
   },
   variants: {
     variant: {
@@ -536,7 +540,7 @@ var button_default = (0, import_dev5.defineRecipe)({
         /**
          * lg: 'min-w-[calc(136/16*1rem)] min-h-14 rounded-8 px-4 py-3 text-oln-16B-100'
          */
-        minWidth: "calc(136 / 16 * 1rem)",
+        minWidth: "calc({spacing.1} * 34)",
         minHeight: 14,
         rounded: 8,
         px: 4,
@@ -562,6 +566,7 @@ var button_default = (0, import_dev5.defineRecipe)({
         minWidth: 20,
         minHeight: 9,
         textStyle: "oln-16B-100",
+        px: 3,
         py: 0.5,
         rounded: 6,
         _after: {
@@ -632,8 +637,8 @@ var card_default = (0, import_dev6.defineSlotRecipe)({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       }
     },
     image: {
@@ -758,8 +763,8 @@ var checkbox_default = (0, import_dev7.defineSlotRecipe)({
           outlineStyle: "solid",
           outlineWidth: "4px",
           outlineColor: "black",
-          outlineOffset: "calc(2 / 16 * 1rem)",
-          focusBox: "calc(2 / 16 * 1rem)"
+          outlineOffset: 0.5,
+          focusBox: "calc({spacing.1} / 2)"
         }
       },
       /**
@@ -771,8 +776,8 @@ var checkbox_default = (0, import_dev7.defineSlotRecipe)({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       }
     },
     indicator: {
@@ -1016,8 +1021,8 @@ var buttonCommon = {
     outlineStyle: "solid",
     outlineWidth: "4px",
     outlineColor: "black",
-    outlineOffset: "calc(2 / 16 * 1rem)",
-    focusBox: "calc(2 / 16 * 1rem)"
+    outlineOffset: 0.5,
+    focusBox: "calc({spacing.1} / 2)"
   }
 };
 var chip_tag_default = (0, import_dev9.defineSlotRecipe)({
@@ -1154,8 +1159,8 @@ var input_default = (0, import_dev11.defineRecipe)({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     },
     /**
      * aria-disabled:pointer-events-none
@@ -1226,8 +1231,8 @@ var select_box_default = (0, import_dev12.defineRecipe)({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     }
   },
   variants: {
@@ -1387,10 +1392,10 @@ var description_list_default = (0, import_dev14.defineSlotRecipe)({
        * gap: calc(8 / 16 * 1rem) 0;
        * overflow-wrap: anywhere;
        */
-      mt: "calc(16 / 16 * 1rem)",
-      mb: "calc(16 / 16 * 1rem)",
+      mt: 4,
+      mb: 4,
       display: "grid",
-      rowGap: "calc(8 / 16 * 1rem)",
+      rowGap: 2,
       overflowWrap: "anywhere"
     },
     term: {
@@ -1406,7 +1411,7 @@ var description_list_default = (0, import_dev14.defineSlotRecipe)({
       /**
        * margin-left: calc(32 / 16 * 1rem);
        */
-      ml: "calc(32 / 16 * 1rem)"
+      ml: 8
     }
   },
   variants: {
@@ -1419,7 +1424,7 @@ var description_list_default = (0, import_dev14.defineSlotRecipe)({
            * display: list-item;
            * list-style-type: disc;
            */
-          ml: "calc(32 / 16 * 1rem)",
+          ml: 8,
           display: "list-item",
           listStyleType: "disc"
         }
@@ -1427,7 +1432,7 @@ var description_list_default = (0, import_dev14.defineSlotRecipe)({
       custom: {
         marker: {
           display: "inline-block",
-          minWidth: "calc(32 / 16 * 1rem)",
+          minWidth: 8,
           height: "1em"
         }
       }
@@ -1490,8 +1495,8 @@ var disclosure_default = (0, import_dev15.defineSlotRecipe)({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       }
     },
     indicator: {
@@ -1670,8 +1675,8 @@ var emergency_banner_default = (0, import_dev18.defineSlotRecipe)({
        * block px-2.5 py-3.5 border-[6px] bg-white desktop:p-[calc(26/16*1rem)] border-warning-orange-1
        */
       display: "block",
-      px: { base: 2.5, md: "calc(26 / 16 * 1rem)" },
-      py: { base: 3.5, md: "calc(26 / 16 * 1rem)" },
+      px: { base: 2.5, md: 6.5 },
+      py: { base: 3.5, md: 6.5 },
       bg: "white",
       borderWidth: "6px",
       borderColor: "warning.orange.1",
@@ -1694,8 +1699,8 @@ var emergency_banner_default = (0, import_dev18.defineSlotRecipe)({
       mt: { base: 2, md: 4 }
     },
     action: {
-      pt: { base: "calc(8 / 16 * 1rem)", md: "calc(12 / 16 * 1rem)" },
-      pb: { md: "calc(4 / 16 * 1rem)" },
+      pt: { base: 2, md: 3 },
+      pb: { md: 1 },
       display: { md: "flex" },
       justifyContent: { md: "flex" }
     },
@@ -1720,7 +1725,7 @@ var emergency_banner_default = (0, import_dev18.defineSlotRecipe)({
       position: "relative",
       display: "block",
       mx: "auto",
-      p: { base: "calc(18 / 16 * 1rem)", md: 5 },
+      p: { base: 4.5, md: 5 },
       width: { base: "full", md: "fit-content" },
       minWidth: "50%",
       borderWidth: { base: "2px", md: "4px" },
@@ -1740,14 +1745,14 @@ var emergency_banner_default = (0, import_dev18.defineSlotRecipe)({
         inset: 0,
         borderColor: "white",
         borderWidth: { base: "2px", md: "4px" },
-        rounded: { base: "calc(10 / 16 * 1rem)", md: 12 }
+        rounded: { base: 2.5, md: 12 }
       },
       _focusVisible: {
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       }
     }
   }
@@ -1839,8 +1844,8 @@ var textarea_default = (0, import_dev22.defineRecipe)({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     }
   }
 });
@@ -2552,8 +2557,8 @@ var hamburger_menu_button_default = (0, import_dev26.defineRecipe)({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     },
     /**
      * override reset
@@ -2685,8 +2690,8 @@ var menu_item_default = (0, import_dev29.defineRecipe)({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(6 / 16 * 1rem)",
+      outlineOffset: 0.5,
+      focusBox: "{spacing.1.5}",
       zIndex: 1
     },
     _highlighted: {
@@ -2694,8 +2699,8 @@ var menu_item_default = (0, import_dev29.defineRecipe)({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(6 / 16 * 1rem)",
+      outlineOffset: 0.5,
+      focusBox: "{spacing.1.5}",
       zIndex: 1
     }
   },
@@ -2740,7 +2745,7 @@ var menu_default = (0, import_dev30.defineSlotRecipe)({
     content: {
       minWidth: "fit-content",
       width: "auto",
-      maxHeight: "calc((44 * 6.5 + 16) / 16 * 1rem)",
+      maxHeight: "calc({spacing.1} * 75.5)",
       py: 2,
       borderWidth: "1px",
       borderColor: "solid-gray.420",
@@ -2776,8 +2781,8 @@ var menu_default = (0, import_dev30.defineSlotRecipe)({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)",
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)",
         zIndex: 1
       }
       /**
@@ -2794,7 +2799,7 @@ var menu_default = (0, import_dev30.defineSlotRecipe)({
     isCondensed: {
       true: {
         content: {
-          maxHeight: "calc((32 * 6.5 + 16) / 16 * 1rem)"
+          maxHeight: "calc({spacing.2} * 28)"
         },
         itemGroupLabel: {
           py: 1.5,
@@ -2900,8 +2905,8 @@ var notification_banner_default = (0, import_dev32.defineSlotRecipe)({
        * [--icon-size:calc(24/16*1rem)] desktop:[--icon-size:calc(36/16*1rem)]
        */
       "--icon-size": {
-        base: "calc(24 / 16 * 1rem)",
-        md: "calc(36 / 16 * 1rem)"
+        base: "{spacing.6}",
+        md: "{spacing.9}"
       },
       "--icon-scale": {
         base: 24 / 36,
@@ -2939,7 +2944,7 @@ var notification_banner_default = (0, import_dev32.defineSlotRecipe)({
       /**
        * mt-[calc(2/16*1rem)] desktop:mt-0
        */
-      mt: { base: "calc(2 / 16 * 1rem)", md: 0 },
+      mt: { base: 0.5, md: 0 },
       /**
        * h-auto max-w-full
        */
@@ -3012,9 +3017,9 @@ var notification_banner_default = (0, import_dev32.defineSlotRecipe)({
        *  }
        * }
        */
-      mb: "calc(-8 / 16 * 1rem)",
+      mb: -2,
       display: "grid",
-      gap: { base: "calc(8 / 16 * 1rem)", md: "calc(16 / 16 * 1rem)" },
+      gap: { base: 2, md: 4 },
       gridColumn: { base: "1 / 4", md: "2 / 4" },
       gridAutoFlow: { md: "column" },
       justifyContent: { md: "end" }
@@ -3358,8 +3363,8 @@ var radio_group_default = (0, import_dev35.defineSlotRecipe)({
           outlineStyle: "solid",
           outlineWidth: "4px",
           outlineColor: "black",
-          outlineOffset: "calc(2 / 16 * 1rem)",
-          focusBox: "calc(2 / 16 * 1rem)"
+          outlineOffset: 0.5,
+          focusBox: "calc({spacing.1} / 2)"
         }
       },
       /**
@@ -3371,8 +3376,8 @@ var radio_group_default = (0, import_dev35.defineSlotRecipe)({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       },
       _before: {
         /**
@@ -3458,7 +3463,7 @@ var radio_group_default = (0, import_dev35.defineSlotRecipe)({
           /**
            * data-[size=sm]:border-[calc(2/16*1rem)]
            */
-          borderWidth: "calc(2 / 16 * 1rem)"
+          borderWidth: "{spacing.0.5}"
         },
         itemText: {
           /**
@@ -3487,7 +3492,7 @@ var radio_group_default = (0, import_dev35.defineSlotRecipe)({
           /**
            * data-[size=md]:border-[calc(2/16*1rem)]
            */
-          borderWidth: "calc(2 / 16 * 1rem)"
+          borderWidth: "{spacing.0.5}"
         },
         itemText: {
           /**
@@ -3516,7 +3521,7 @@ var radio_group_default = (0, import_dev35.defineSlotRecipe)({
           /**
            * data-[size=lg]:border-[calc(3/16*1rem)]
            */
-          borderWidth: "calc(3 / 16 * 1rem)"
+          borderWidth: "calc({spacing.1} * 3 / 4)"
         },
         itemText: {
           /**
@@ -3569,8 +3574,8 @@ var resource_list_default = (0, import_dev36.defineSlotRecipe)({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       }
     },
     action: {
@@ -3794,7 +3799,7 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
          */
         width: "calc(var(--_step-width, 320) / 16 * 1rem)",
         minWidth: "calc(var(--_step-min-width, 160) / 16 * 1rem)",
-        px: "calc(16 / 16 * 1rem)"
+        px: 4
       },
       _vertical: {
         /**
@@ -3802,7 +3807,7 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
          * padding-bottom: calc(24 / 16 * 1rem);
          */
         flex: 1,
-        pb: "calc(24 / 16 * 1rem)"
+        pb: 6
       }
     },
     trigger: {
@@ -3842,7 +3847,7 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
         position: "relative",
         display: "flex",
         alignItems: "baseline",
-        columnGap: "calc(16 / 16 * 1rem)",
+        columnGap: 4,
         textAlign: "left"
       }
     },
@@ -3870,7 +3875,7 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
       position: "relative",
       display: "grid",
       placeContent: "center",
-      m: "calc(4 / 16 * 1rem)",
+      m: 1,
       boxSizing: "border-box",
       width: "fit-content",
       height: "var(--_number-size)",
@@ -3881,7 +3886,7 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
       borderColor: "colorPalette.primary",
       bg: "white",
       py: 0,
-      px: "calc(2 / 16 * 1rem)",
+      px: 0.5,
       textStyle: "std-20B-150",
       textDecoration: "inherit",
       textDecorationThickness: "inherit",
@@ -3905,8 +3910,8 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
         outlineWidth: "var(--_outline-width)",
         outlineStyle: "solid",
         outlineColor: "colorPalette.primary",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        boxShadow: "0 0 0 calc(2 / 16 * 1rem) white"
+        outlineOffset: 0.5,
+        boxShadow: "0 0 0 {spacing.0.5} white"
       },
       _complete: {
         bg: "colorPalette.bg",
@@ -3919,8 +3924,8 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
            * background-color: var(--color-neutral-white);
            */
           position: "absolute",
-          top: "calc(-10 / 16 * 1rem)",
-          left: "calc(50% + calc(6 / 16 * 1rem))",
+          top: -2.5,
+          left: "calc(50% + {spacing.1.5})",
           borderRadius: "full",
           bg: "colorPalette.primary",
           width: "36px",
@@ -3941,7 +3946,7 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
          * flex-shrink: 0;
          */
         flexShrink: 0,
-        mx: "calc(4 / 16 * 1rem)"
+        mx: 1
       }
     },
     title: {
@@ -3999,7 +4004,7 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
          * );
          */
         mt: "calc(var(--_description-margin) - (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem))",
-        pl: "calc(var(--_number-size) + var(--_number-margin) + var(--_number-margin) + calc(16 / 16 * 1rem))"
+        pl: "calc(var(--_number-size) + var(--_number-margin) + var(--_number-margin) + {spacing.4})"
       }
     },
     separator: {
@@ -4032,7 +4037,7 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
          * border-right: 1px solid;
          */
         left: "calc(var(--_number-size) / 2 + var(--_number-margin))",
-        top: "calc(50% - calc((32 / 16 * 1rem) / 2))",
+        top: "calc(50% - {spacing.4})",
         height: "100%",
         borderRightWidth: "1px"
       }
@@ -4050,11 +4055,11 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
              * --_title-margin: calc(24 / 16 * 1rem);
              * --_description-margin: calc(8 / 16 * 1rem);
              */
-            "--_number-size": "calc(44 / 16 * 1rem)",
-            "--_number-margin": "calc(4 / 16 * 1rem)",
-            "--_outline-width": "calc(2 / 16 * 1rem)",
-            "--_title-margin": "calc(24 / 16 * 1rem)",
-            "--_description-margin": "calc(8 / 16 * 1rem)"
+            "--_number-size": "{spacing.11}",
+            "--_number-margin": "{spacing.1}",
+            "--_outline-width": "{spacing.0.5}",
+            "--_title-margin": "{spacing.6}",
+            "--_description-margin": "{spacing.2}"
           }
         },
         indicator: {
@@ -4072,11 +4077,11 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
            * --_title-margin: calc(16 / 16 * 1rem);
            * --_description-margin: calc(4 / 16 * 1rem);
            */
-          "--_number-size": "calc(32 / 16 * 1rem)",
-          "--_number-margin": "calc(3 / 16 * 1rem)",
-          "--_outline-width": "calc(1 / 16 * 1rem)",
-          "--_title-margin": "calc(16 / 16 * 1rem)",
-          "--_description-margin": "calc(4 / 16 * 1rem)"
+          "--_number-size": "{spacing.8}",
+          "--_number-margin": "calc({spacing.1} * 3 / 4)",
+          "--_outline-width": "calc({spacing.1} / 4)",
+          "--_title-margin": "{spacing.4}",
+          "--_description-margin": "{spacing.1}"
         },
         indicator: {
           /**
@@ -4084,9 +4089,8 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
            * border-width: 1px;
            * font-size: calc(16 / 16 * 1rem);
            */
-          m: "calc(3 / 16 * 1rem)",
+          m: "calc({spacing.1} * 3 / 4)",
           borderWidth: "1px",
-          // fontSize: "calc(16 / 16 * 1rem)",
           textStyle: "std-16B-170",
           "[data-orientation=horizontal] > &": {
             /**
@@ -4097,7 +4101,7 @@ var step_navigation_default = (0, import_dev38.defineSlotRecipe)({
             ml: "auto"
           },
           "[data-orientation=vertical] > &": {
-            mx: "calc(4 / 16 * 1rem)"
+            mx: 1
           },
           _after: {
             transform: "scale(0.33)"
@@ -4325,8 +4329,8 @@ var tabs_default = (0, import_dev40.defineSlotRecipe)({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       },
       _selected: {
         /**
@@ -4527,8 +4531,8 @@ var utility_link_default = (0, import_dev43.defineRecipe)({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     },
     /**
      * with icon

package/dist/index.mjs

@@ -25,8 +25,8 @@ var accordion_default = defineSlotRecipe({
       borderBottomWidth: "1px",
       borderBottomColor: "solid-gray.420",
       "--icon-size": {
-        base: "calc(20 / 16 * 1rem)",
-        md: "calc(32 / 16 * 1rem)"
+        base: "{spacing.5}",
+        md: "{spacing.8}"
       }
     },
     itemTrigger: {
@@ -50,8 +50,8 @@ var accordion_default = defineSlotRecipe({
        */
       py: { base: 2, md: 3.5 },
       pl: {
-        base: "calc(var(--icon-size) + (12 / 16 * 1rem))",
-        md: "calc(var(--icon-size) + (20 / 16 * 1rem))"
+        base: "calc(var(--icon-size) + {spacing.3})",
+        md: "calc(var(--icon-size) + {spacing.5})"
       },
       pr: { base: 2, md: 4 },
       cursor: { _hover: "pointer" },
@@ -68,8 +68,8 @@ var accordion_default = defineSlotRecipe({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       },
       /**
        * remove button style
@@ -122,8 +122,8 @@ var accordion_default = defineSlotRecipe({
         desktop:pl-[calc(var(--icon-size)+(20/16*1rem))] desktop:pr-4 desktop:py-6
        */
       pl: {
-        base: "calc(var(--icon-size) + (12 / 16 * 1rem))",
-        md: "calc(var(--icon-size) + (20 / 16 * 1rem))"
+        base: "calc(var(--icon-size) + {spacing.3})",
+        md: "calc(var(--icon-size) + {spacing.5})"
       },
       pr: { base: 2, md: 4 },
       py: { base: 4, md: 6 }
@@ -145,13 +145,13 @@ var blockquote_default = defineRecipe({
      * padding-left: calc(24 / 16 * 1rem);
      */
     my: 0,
-    mx: "calc(40 / 16 * 1rem)",
+    mx: 10,
     borderLeftWidth: "8px",
     borderColor: "solid-gray.536",
-    pt: "calc(8 / 16 * 1rem)",
-    pr: "calc(16 / 16 * 1rem)",
-    pb: "calc(8 / 16 * 1rem)",
-    pl: "calc(24 / 16 * 1rem)",
+    pt: 2,
+    pr: 4,
+    pb: 2,
+    pl: 6,
     "& > *:first-child": {
       mt: 0
     },
@@ -292,8 +292,8 @@ var link_default = defineRecipe2({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     },
     /**
      * with icon
@@ -396,8 +396,8 @@ var button_default = defineRecipe3({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     },
     /**
      * aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
@@ -409,10 +409,14 @@ var button_default = defineRecipe3({
      * button default
      */
     display: "inline-flex",
+    columnGap: 1,
     textAlign: "center",
     alignItems: "center",
     justifyContent: "center",
-    cursor: "pointer"
+    cursor: "pointer",
+    _icon: {
+      flexShrink: 0
+    }
   },
   variants: {
     variant: {
@@ -503,7 +507,7 @@ var button_default = defineRecipe3({
         /**
          * lg: 'min-w-[calc(136/16*1rem)] min-h-14 rounded-8 px-4 py-3 text-oln-16B-100'
          */
-        minWidth: "calc(136 / 16 * 1rem)",
+        minWidth: "calc({spacing.1} * 34)",
         minHeight: 14,
         rounded: 8,
         px: 4,
@@ -529,6 +533,7 @@ var button_default = defineRecipe3({
         minWidth: 20,
         minHeight: 9,
         textStyle: "oln-16B-100",
+        px: 3,
         py: 0.5,
         rounded: 6,
         _after: {
@@ -599,8 +604,8 @@ var card_default = defineSlotRecipe3({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       }
     },
     image: {
@@ -725,8 +730,8 @@ var checkbox_default = defineSlotRecipe4({
           outlineStyle: "solid",
           outlineWidth: "4px",
           outlineColor: "black",
-          outlineOffset: "calc(2 / 16 * 1rem)",
-          focusBox: "calc(2 / 16 * 1rem)"
+          outlineOffset: 0.5,
+          focusBox: "calc({spacing.1} / 2)"
         }
       },
       /**
@@ -738,8 +743,8 @@ var checkbox_default = defineSlotRecipe4({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       }
     },
     indicator: {
@@ -983,8 +988,8 @@ var buttonCommon = {
     outlineStyle: "solid",
     outlineWidth: "4px",
     outlineColor: "black",
-    outlineOffset: "calc(2 / 16 * 1rem)",
-    focusBox: "calc(2 / 16 * 1rem)"
+    outlineOffset: 0.5,
+    focusBox: "calc({spacing.1} / 2)"
   }
 };
 var chip_tag_default = defineSlotRecipe5({
@@ -1121,8 +1126,8 @@ var input_default = defineRecipe6({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     },
     /**
      * aria-disabled:pointer-events-none
@@ -1193,8 +1198,8 @@ var select_box_default = defineRecipe7({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     }
   },
   variants: {
@@ -1354,10 +1359,10 @@ var description_list_default = defineSlotRecipe7({
        * gap: calc(8 / 16 * 1rem) 0;
        * overflow-wrap: anywhere;
        */
-      mt: "calc(16 / 16 * 1rem)",
-      mb: "calc(16 / 16 * 1rem)",
+      mt: 4,
+      mb: 4,
       display: "grid",
-      rowGap: "calc(8 / 16 * 1rem)",
+      rowGap: 2,
       overflowWrap: "anywhere"
     },
     term: {
@@ -1373,7 +1378,7 @@ var description_list_default = defineSlotRecipe7({
       /**
        * margin-left: calc(32 / 16 * 1rem);
        */
-      ml: "calc(32 / 16 * 1rem)"
+      ml: 8
     }
   },
   variants: {
@@ -1386,7 +1391,7 @@ var description_list_default = defineSlotRecipe7({
            * display: list-item;
            * list-style-type: disc;
            */
-          ml: "calc(32 / 16 * 1rem)",
+          ml: 8,
           display: "list-item",
           listStyleType: "disc"
         }
@@ -1394,7 +1399,7 @@ var description_list_default = defineSlotRecipe7({
       custom: {
         marker: {
           display: "inline-block",
-          minWidth: "calc(32 / 16 * 1rem)",
+          minWidth: 8,
           height: "1em"
         }
       }
@@ -1457,8 +1462,8 @@ var disclosure_default = defineSlotRecipe8({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       }
     },
     indicator: {
@@ -1637,8 +1642,8 @@ var emergency_banner_default = defineSlotRecipe10({
        * block px-2.5 py-3.5 border-[6px] bg-white desktop:p-[calc(26/16*1rem)] border-warning-orange-1
        */
       display: "block",
-      px: { base: 2.5, md: "calc(26 / 16 * 1rem)" },
-      py: { base: 3.5, md: "calc(26 / 16 * 1rem)" },
+      px: { base: 2.5, md: 6.5 },
+      py: { base: 3.5, md: 6.5 },
       bg: "white",
       borderWidth: "6px",
       borderColor: "warning.orange.1",
@@ -1661,8 +1666,8 @@ var emergency_banner_default = defineSlotRecipe10({
       mt: { base: 2, md: 4 }
     },
     action: {
-      pt: { base: "calc(8 / 16 * 1rem)", md: "calc(12 / 16 * 1rem)" },
-      pb: { md: "calc(4 / 16 * 1rem)" },
+      pt: { base: 2, md: 3 },
+      pb: { md: 1 },
       display: { md: "flex" },
       justifyContent: { md: "flex" }
     },
@@ -1687,7 +1692,7 @@ var emergency_banner_default = defineSlotRecipe10({
       position: "relative",
       display: "block",
       mx: "auto",
-      p: { base: "calc(18 / 16 * 1rem)", md: 5 },
+      p: { base: 4.5, md: 5 },
       width: { base: "full", md: "fit-content" },
       minWidth: "50%",
       borderWidth: { base: "2px", md: "4px" },
@@ -1707,14 +1712,14 @@ var emergency_banner_default = defineSlotRecipe10({
         inset: 0,
         borderColor: "white",
         borderWidth: { base: "2px", md: "4px" },
-        rounded: { base: "calc(10 / 16 * 1rem)", md: 12 }
+        rounded: { base: 2.5, md: 12 }
       },
       _focusVisible: {
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       }
     }
   }
@@ -1806,8 +1811,8 @@ var textarea_default = defineRecipe12({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     }
   }
 });
@@ -2519,8 +2524,8 @@ var hamburger_menu_button_default = defineRecipe13({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     },
     /**
      * override reset
@@ -2652,8 +2657,8 @@ var menu_item_default = defineRecipe16({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(6 / 16 * 1rem)",
+      outlineOffset: 0.5,
+      focusBox: "{spacing.1.5}",
       zIndex: 1
     },
     _highlighted: {
@@ -2661,8 +2666,8 @@ var menu_item_default = defineRecipe16({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(6 / 16 * 1rem)",
+      outlineOffset: 0.5,
+      focusBox: "{spacing.1.5}",
       zIndex: 1
     }
   },
@@ -2707,7 +2712,7 @@ var menu_default = defineSlotRecipe14({
     content: {
       minWidth: "fit-content",
       width: "auto",
-      maxHeight: "calc((44 * 6.5 + 16) / 16 * 1rem)",
+      maxHeight: "calc({spacing.1} * 75.5)",
       py: 2,
       borderWidth: "1px",
       borderColor: "solid-gray.420",
@@ -2743,8 +2748,8 @@ var menu_default = defineSlotRecipe14({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)",
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)",
         zIndex: 1
       }
       /**
@@ -2761,7 +2766,7 @@ var menu_default = defineSlotRecipe14({
     isCondensed: {
       true: {
         content: {
-          maxHeight: "calc((32 * 6.5 + 16) / 16 * 1rem)"
+          maxHeight: "calc({spacing.2} * 28)"
         },
         itemGroupLabel: {
           py: 1.5,
@@ -2867,8 +2872,8 @@ var notification_banner_default = defineSlotRecipe16({
        * [--icon-size:calc(24/16*1rem)] desktop:[--icon-size:calc(36/16*1rem)]
        */
       "--icon-size": {
-        base: "calc(24 / 16 * 1rem)",
-        md: "calc(36 / 16 * 1rem)"
+        base: "{spacing.6}",
+        md: "{spacing.9}"
       },
       "--icon-scale": {
         base: 24 / 36,
@@ -2906,7 +2911,7 @@ var notification_banner_default = defineSlotRecipe16({
       /**
        * mt-[calc(2/16*1rem)] desktop:mt-0
        */
-      mt: { base: "calc(2 / 16 * 1rem)", md: 0 },
+      mt: { base: 0.5, md: 0 },
       /**
        * h-auto max-w-full
        */
@@ -2979,9 +2984,9 @@ var notification_banner_default = defineSlotRecipe16({
        *  }
        * }
        */
-      mb: "calc(-8 / 16 * 1rem)",
+      mb: -2,
       display: "grid",
-      gap: { base: "calc(8 / 16 * 1rem)", md: "calc(16 / 16 * 1rem)" },
+      gap: { base: 2, md: 4 },
       gridColumn: { base: "1 / 4", md: "2 / 4" },
       gridAutoFlow: { md: "column" },
       justifyContent: { md: "end" }
@@ -3325,8 +3330,8 @@ var radio_group_default = defineSlotRecipe18({
           outlineStyle: "solid",
           outlineWidth: "4px",
           outlineColor: "black",
-          outlineOffset: "calc(2 / 16 * 1rem)",
-          focusBox: "calc(2 / 16 * 1rem)"
+          outlineOffset: 0.5,
+          focusBox: "calc({spacing.1} / 2)"
         }
       },
       /**
@@ -3338,8 +3343,8 @@ var radio_group_default = defineSlotRecipe18({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       },
       _before: {
         /**
@@ -3425,7 +3430,7 @@ var radio_group_default = defineSlotRecipe18({
           /**
            * data-[size=sm]:border-[calc(2/16*1rem)]
            */
-          borderWidth: "calc(2 / 16 * 1rem)"
+          borderWidth: "{spacing.0.5}"
         },
         itemText: {
           /**
@@ -3454,7 +3459,7 @@ var radio_group_default = defineSlotRecipe18({
           /**
            * data-[size=md]:border-[calc(2/16*1rem)]
            */
-          borderWidth: "calc(2 / 16 * 1rem)"
+          borderWidth: "{spacing.0.5}"
         },
         itemText: {
           /**
@@ -3483,7 +3488,7 @@ var radio_group_default = defineSlotRecipe18({
           /**
            * data-[size=lg]:border-[calc(3/16*1rem)]
            */
-          borderWidth: "calc(3 / 16 * 1rem)"
+          borderWidth: "calc({spacing.1} * 3 / 4)"
         },
         itemText: {
           /**
@@ -3536,8 +3541,8 @@ var resource_list_default = defineSlotRecipe19({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       }
     },
     action: {
@@ -3761,7 +3766,7 @@ var step_navigation_default = defineSlotRecipe21({
          */
         width: "calc(var(--_step-width, 320) / 16 * 1rem)",
         minWidth: "calc(var(--_step-min-width, 160) / 16 * 1rem)",
-        px: "calc(16 / 16 * 1rem)"
+        px: 4
       },
       _vertical: {
         /**
@@ -3769,7 +3774,7 @@ var step_navigation_default = defineSlotRecipe21({
          * padding-bottom: calc(24 / 16 * 1rem);
          */
         flex: 1,
-        pb: "calc(24 / 16 * 1rem)"
+        pb: 6
       }
     },
     trigger: {
@@ -3809,7 +3814,7 @@ var step_navigation_default = defineSlotRecipe21({
         position: "relative",
         display: "flex",
         alignItems: "baseline",
-        columnGap: "calc(16 / 16 * 1rem)",
+        columnGap: 4,
         textAlign: "left"
       }
     },
@@ -3837,7 +3842,7 @@ var step_navigation_default = defineSlotRecipe21({
       position: "relative",
       display: "grid",
       placeContent: "center",
-      m: "calc(4 / 16 * 1rem)",
+      m: 1,
       boxSizing: "border-box",
       width: "fit-content",
       height: "var(--_number-size)",
@@ -3848,7 +3853,7 @@ var step_navigation_default = defineSlotRecipe21({
       borderColor: "colorPalette.primary",
       bg: "white",
       py: 0,
-      px: "calc(2 / 16 * 1rem)",
+      px: 0.5,
       textStyle: "std-20B-150",
       textDecoration: "inherit",
       textDecorationThickness: "inherit",
@@ -3872,8 +3877,8 @@ var step_navigation_default = defineSlotRecipe21({
         outlineWidth: "var(--_outline-width)",
         outlineStyle: "solid",
         outlineColor: "colorPalette.primary",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        boxShadow: "0 0 0 calc(2 / 16 * 1rem) white"
+        outlineOffset: 0.5,
+        boxShadow: "0 0 0 {spacing.0.5} white"
       },
       _complete: {
         bg: "colorPalette.bg",
@@ -3886,8 +3891,8 @@ var step_navigation_default = defineSlotRecipe21({
            * background-color: var(--color-neutral-white);
            */
           position: "absolute",
-          top: "calc(-10 / 16 * 1rem)",
-          left: "calc(50% + calc(6 / 16 * 1rem))",
+          top: -2.5,
+          left: "calc(50% + {spacing.1.5})",
           borderRadius: "full",
           bg: "colorPalette.primary",
           width: "36px",
@@ -3908,7 +3913,7 @@ var step_navigation_default = defineSlotRecipe21({
          * flex-shrink: 0;
          */
         flexShrink: 0,
-        mx: "calc(4 / 16 * 1rem)"
+        mx: 1
       }
     },
     title: {
@@ -3966,7 +3971,7 @@ var step_navigation_default = defineSlotRecipe21({
          * );
          */
         mt: "calc(var(--_description-margin) - (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem))",
-        pl: "calc(var(--_number-size) + var(--_number-margin) + var(--_number-margin) + calc(16 / 16 * 1rem))"
+        pl: "calc(var(--_number-size) + var(--_number-margin) + var(--_number-margin) + {spacing.4})"
       }
     },
     separator: {
@@ -3999,7 +4004,7 @@ var step_navigation_default = defineSlotRecipe21({
          * border-right: 1px solid;
          */
         left: "calc(var(--_number-size) / 2 + var(--_number-margin))",
-        top: "calc(50% - calc((32 / 16 * 1rem) / 2))",
+        top: "calc(50% - {spacing.4})",
         height: "100%",
         borderRightWidth: "1px"
       }
@@ -4017,11 +4022,11 @@ var step_navigation_default = defineSlotRecipe21({
              * --_title-margin: calc(24 / 16 * 1rem);
              * --_description-margin: calc(8 / 16 * 1rem);
              */
-            "--_number-size": "calc(44 / 16 * 1rem)",
-            "--_number-margin": "calc(4 / 16 * 1rem)",
-            "--_outline-width": "calc(2 / 16 * 1rem)",
-            "--_title-margin": "calc(24 / 16 * 1rem)",
-            "--_description-margin": "calc(8 / 16 * 1rem)"
+            "--_number-size": "{spacing.11}",
+            "--_number-margin": "{spacing.1}",
+            "--_outline-width": "{spacing.0.5}",
+            "--_title-margin": "{spacing.6}",
+            "--_description-margin": "{spacing.2}"
           }
         },
         indicator: {
@@ -4039,11 +4044,11 @@ var step_navigation_default = defineSlotRecipe21({
            * --_title-margin: calc(16 / 16 * 1rem);
            * --_description-margin: calc(4 / 16 * 1rem);
            */
-          "--_number-size": "calc(32 / 16 * 1rem)",
-          "--_number-margin": "calc(3 / 16 * 1rem)",
-          "--_outline-width": "calc(1 / 16 * 1rem)",
-          "--_title-margin": "calc(16 / 16 * 1rem)",
-          "--_description-margin": "calc(4 / 16 * 1rem)"
+          "--_number-size": "{spacing.8}",
+          "--_number-margin": "calc({spacing.1} * 3 / 4)",
+          "--_outline-width": "calc({spacing.1} / 4)",
+          "--_title-margin": "{spacing.4}",
+          "--_description-margin": "{spacing.1}"
         },
         indicator: {
           /**
@@ -4051,9 +4056,8 @@ var step_navigation_default = defineSlotRecipe21({
            * border-width: 1px;
            * font-size: calc(16 / 16 * 1rem);
            */
-          m: "calc(3 / 16 * 1rem)",
+          m: "calc({spacing.1} * 3 / 4)",
           borderWidth: "1px",
-          // fontSize: "calc(16 / 16 * 1rem)",
           textStyle: "std-16B-170",
           "[data-orientation=horizontal] > &": {
             /**
@@ -4064,7 +4068,7 @@ var step_navigation_default = defineSlotRecipe21({
             ml: "auto"
           },
           "[data-orientation=vertical] > &": {
-            mx: "calc(4 / 16 * 1rem)"
+            mx: 1
           },
           _after: {
             transform: "scale(0.33)"
@@ -4292,8 +4296,8 @@ var tabs_default = defineSlotRecipe23({
         outlineStyle: "solid",
         outlineWidth: "4px",
         outlineColor: "black",
-        outlineOffset: "calc(2 / 16 * 1rem)",
-        focusBox: "calc(2 / 16 * 1rem)"
+        outlineOffset: 0.5,
+        focusBox: "calc({spacing.1} / 2)"
       },
       _selected: {
         /**
@@ -4494,8 +4498,8 @@ var utility_link_default = defineRecipe19({
       outlineStyle: "solid",
       outlineWidth: "4px",
       outlineColor: "black",
-      outlineOffset: "calc(2 / 16 * 1rem)",
-      focusBox: "calc(2 / 16 * 1rem)"
+      outlineOffset: 0.5,
+      focusBox: "calc({spacing.1} / 2)"
     },
     /**
      * with icon

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cieloazul310/digital-go-pandacss-preset",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "homepage": "https://github.com/cieloazul310/digital-go-design-system-with-panda",
   "author": {
@@ -39,13 +39,13 @@
     "format": "prettier --parser typescript --write ."
   },
   "dependencies": {
-    "@cieloazul310/digital-go-pandacss-plugin": "^0.2.1",
-    "@cieloazul310/digital-go-pandacss-utils": "^0.2.1"
+    "@cieloazul310/digital-go-pandacss-plugin": "^0.2.2",
+    "@cieloazul310/digital-go-pandacss-utils": "^0.2.2"
   },
   "devDependencies": {
     "@pandacss/dev": "^1.4.2",
-    "@repo/eslint-config": "^0.2.1",
-    "@repo/typescript-config": "^0.2.1",
+    "@repo/eslint-config": "^0.2.2",
+    "@repo/typescript-config": "^0.2.2",
     "@zag-js/accordion": "^1.26.2",
     "@zag-js/anatomy": "^1.26.2",
     "@zag-js/checkbox": "^1.26.2",