cetec-design-system 2.0.1-0 → 2.0.2-0

package/dist/{cetec-preset-BB-QcJUK.js → cetec-preset-CMHb1Xn9.js}

@@ -99,6 +99,7 @@ const conditions$1 = {
   valid: "&:is(:valid, [data-valid=true])",
   invalid: "&:is(:invalid, [data-invalid=true], [aria-invalid=true])",
   error: "&:is([data-error=true])",
+  success: "&:is([data-success=true])",
   autofill: "&:autofill",
   inRange: "&:is(:in-range, [data-in-range=true])",
   outOfRange: "&:is(:out-of-range, [data-outside-range=true])",
@@ -222,6 +223,14 @@ const keyframes = defineKeyframes({
       animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
     }
   },
+  skeletonWave: {
+    "0%": {
+      backgroundPosition: "200% 0"
+    },
+    "100%": {
+      backgroundPosition: "-200% 0"
+    }
+  },
   badgePop: {
     "0%": {
       transform: "translate(50%, -50%) scale(1)"
@@ -321,124 +330,261 @@ const fontVariantsProperty = defineUtility({
     return { fontVariationSettings: fontVariants[value] };
   }
 });
-const baseHeadingStyles = {
-  fontFamily: "heading",
-  fontWeight: "black",
-  color: "text"
-};
-const baseBodyTextStyles = {
-  fontFamily: "body",
-  fontVariationSettings: fontVariants.body,
-  color: "text.subtlest"
-};
-const baseMonoStyles = {
-  fontFamily: "mono",
-  fontVariationSettings: fontVariants.mono,
-  color: "text.subtlest"
-};
 const textStyles = defineTextStyles({
   display: {
     lg: {
       value: {
-        ...baseHeadingStyles,
+        fontFamily: "heading",
+        fontWeight: "black",
+        color: "text",
         fontSize: "72"
       }
     },
     md: {
       value: {
-        ...baseHeadingStyles,
+        fontFamily: "heading",
+        fontWeight: "black",
+        color: "text",
         fontSize: "64"
       }
     },
     sm: {
       value: {
-        ...baseHeadingStyles,
+        fontFamily: "heading",
+        fontWeight: "black",
+        color: "text",
         fontSize: "56"
       }
     },
     xs: {
       value: {
-        ...baseHeadingStyles,
+        fontFamily: "heading",
+        fontWeight: "black",
+        color: "text",
         fontSize: "48"
       }
+    },
+    size: {
+      lg: {
+        value: {
+          fontFamily: "heading",
+          fontWeight: "black",
+          fontSize: "72"
+        }
+      },
+      md: {
+        value: {
+          fontFamily: "heading",
+          fontWeight: "black",
+          fontSize: "64"
+        }
+      },
+      sm: {
+        value: {
+          fontFamily: "heading",
+          fontWeight: "black",
+          fontSize: "56"
+        }
+      },
+      xs: {
+        value: {
+          fontFamily: "heading",
+          fontWeight: "black",
+          fontSize: "48"
+        }
+      }
     }
   },
   heading: {
     lg: {
       value: {
-        ...baseHeadingStyles,
+        fontFamily: "heading",
+        fontWeight: "black",
+        color: "text",
         fontSize: "40"
       }
     },
     md: {
       value: {
-        ...baseHeadingStyles,
+        fontFamily: "heading",
+        fontWeight: "black",
+        color: "text",
         fontSize: "32"
       }
     },
     sm: {
       value: {
-        ...baseHeadingStyles,
+        fontFamily: "heading",
+        fontWeight: "black",
+        color: "text",
         fontSize: "24"
       }
     },
     xs: {
       value: {
-        ...baseHeadingStyles,
+        fontFamily: "heading",
+        fontWeight: "black",
+        color: "text",
         fontSize: "20"
       }
+    },
+    size: {
+      lg: {
+        value: {
+          fontFamily: "heading",
+          fontWeight: "black",
+          fontSize: "40"
+        }
+      },
+      md: {
+        value: {
+          fontFamily: "heading",
+          fontWeight: "black",
+          fontSize: "32"
+        }
+      },
+      sm: {
+        value: {
+          fontFamily: "heading",
+          fontWeight: "black",
+          fontSize: "24"
+        }
+      },
+      xs: {
+        value: {
+          fontFamily: "heading",
+          fontWeight: "black",
+          fontSize: "20"
+        }
+      }
     }
   },
   body: {
     lg: {
       value: {
-        ...baseBodyTextStyles,
+        fontFamily: "body",
+        fontVariationSettings: fontVariants.body,
+        color: "text.subtlest",
         fontSize: "20"
       }
     },
     md: {
       value: {
-        ...baseBodyTextStyles,
+        fontFamily: "body",
+        fontVariationSettings: fontVariants.body,
+        color: "text.subtlest",
         fontSize: "16"
       }
     },
     sm: {
       value: {
-        ...baseBodyTextStyles,
+        fontFamily: "body",
+        fontVariationSettings: fontVariants.body,
+        color: "text.subtlest",
         fontSize: "14"
       }
     },
     xs: {
       value: {
-        ...baseBodyTextStyles,
+        fontFamily: "body",
+        fontVariationSettings: fontVariants.body,
+        color: "text.subtlest",
         fontSize: "12"
       }
+    },
+    size: {
+      lg: {
+        value: {
+          fontFamily: "body",
+          fontVariationSettings: fontVariants.body,
+          fontSize: "20"
+        }
+      },
+      md: {
+        value: {
+          fontFamily: "body",
+          fontVariationSettings: fontVariants.body,
+          fontSize: "16"
+        }
+      },
+      sm: {
+        value: {
+          fontFamily: "body",
+          fontVariationSettings: fontVariants.body,
+          fontSize: "14"
+        }
+      },
+      xs: {
+        value: {
+          fontFamily: "body",
+          fontVariationSettings: fontVariants.body,
+          fontSize: "12"
+        }
+      }
     }
   },
   mono: {
     lg: {
       value: {
-        ...baseMonoStyles,
+        fontFamily: "mono",
+        fontVariationSettings: fontVariants.mono,
+        color: "text.subtlest",
         fontSize: "20"
       }
     },
     md: {
       value: {
-        ...baseMonoStyles,
+        fontFamily: "mono",
+        fontVariationSettings: fontVariants.mono,
+        color: "text.subtlest",
         fontSize: "16"
       }
     },
     sm: {
       value: {
-        ...baseMonoStyles,
+        fontFamily: "mono",
+        fontVariationSettings: fontVariants.mono,
+        color: "text.subtlest",
         fontSize: "14"
       }
     },
     xs: {
       value: {
-        ...baseMonoStyles,
+        fontFamily: "mono",
+        fontVariationSettings: fontVariants.mono,
+        color: "text.subtlest",
         fontSize: "12"
       }
+    },
+    size: {
+      lg: {
+        value: {
+          fontFamily: "mono",
+          fontVariationSettings: fontVariants.mono,
+          fontSize: "20"
+        }
+      },
+      md: {
+        value: {
+          fontFamily: "mono",
+          fontVariationSettings: fontVariants.mono,
+          fontSize: "16"
+        }
+      },
+      sm: {
+        value: {
+          fontFamily: "mono",
+          fontVariationSettings: fontVariants.mono,
+          fontSize: "14"
+        }
+      },
+      xs: {
+        value: {
+          fontFamily: "mono",
+          fontVariationSettings: fontVariants.mono,
+          fontSize: "12"
+        }
+      }
     }
   }
 });
@@ -458,6 +604,9 @@ const animations = defineTokens.animations({
   },
   bounce: {
     value: "bounce 1s infinite"
+  },
+  skeletonWave: {
+    value: "skeletonWave 2s linear 0.5s infinite"
   }
 });
 const aspectRatios = defineTokens.aspectRatios({
@@ -953,7 +1102,7 @@ const fonts = defineTokens.fonts({
     value: "'Recursive Variable', Andale Mono, monaco, Consolas, Lucida Console, monospace;"
   }
 });
-const fontSizes$1 = defineTokens.fontSizes({
+const fontSizes$2 = defineTokens.fontSizes({
   "10": { value: "{sizes.10}" },
   "12": { value: "{sizes.12}" },
   "14": { value: "{sizes.14}" },
@@ -1027,6 +1176,7 @@ const numericSizes = {
   "12": { value: "0.75rem" },
   "14": { value: "0.875rem" },
   "16": { value: "1rem" },
+  "18": { value: "1.125rem" },
   "20": { value: "1.25rem" },
   "22": { value: "1.375rem" },
   "24": { value: "1.5rem" },
@@ -1200,7 +1350,7 @@ const tokens = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   containerSizeTokens,
   durations,
   easings,
-  fontSizes: fontSizes$1,
+  fontSizes: fontSizes$2,
   fontWeights: fontWeights$1,
   fonts,
   letterSpacings,
@@ -4653,9 +4803,9 @@ const textBase = {
   fontSize: "16",
   maxWidth: "prose"
 };
-const fontSizes = Object.keys(fontSizes$1).reduce(
+const fontSizes$1 = Object.keys(fontSizes$2).reduce(
   (accumulator, currentKey) => {
-    accumulator[currentKey] = { fontSize: fontSizes$1[currentKey].value };
+    accumulator[currentKey] = { fontSize: fontSizes$2[currentKey].value };
     return accumulator;
   },
   {}
@@ -4714,7 +4864,7 @@ const textVariants = {
       letterSpacing: "widest"
     }
   },
-  size: fontSizes,
+  size: fontSizes$1,
   weight: fontWeights
 };
 const headingBase = {
@@ -4824,52 +4974,58 @@ const labelRecipe = defineRecipe({
   }
 });
 const spinnerBase = {
-  spinnerDiv: {
+  container: {
+    position: "relative",
+    display: "grid",
+    placeContent: "center",
+    zIndex: "100",
+    w: "fit",
+    h: "fit",
+    flex: "0"
+  },
+  spinnerSvg: {
     aspectRatio: "square",
-    rounded: "100",
-    borderWidth: "3",
-    borderStyle: "solid",
-    borderColor: "transparent",
-    borderTopColor: "icon",
-    borderBottomColor: "icon",
     animation: "spin",
-    isolation: "isolate"
+    fill: "icon",
+    isolation: "isolate",
+    flex: "0"
   }
 };
 const spinnerVariants = {
   size: {
-    xs: {
-      spinnerDiv: {
-        height: "16",
-        minHeight: "16",
-        borderWidth: "2"
-      }
-    },
     sm: {
-      spinnerDiv: {
-        height: "20",
-        minHeight: "20",
-        borderWidth: "2"
+      spinnerSvg: {
+        h: "16",
+        w: "16",
+        minHeight: "16"
       }
     },
     md: {
-      spinnerDiv: {
-        height: "24",
-        minHeight: "24"
+      spinnerSvg: {
+        h: "20",
+        w: "20",
+        minHeight: "20"
       }
     },
     lg: {
-      spinnerDiv: {
-        height: "32",
-        minHeight: "32"
+      spinnerSvg: {
+        h: "24",
+        w: "24",
+        minHeight: "24"
+      }
+    },
+    xl: {
+      spinnerSvg: {
+        h: "28",
+        w: "28",
+        minHeight: "28"
       }
     }
   },
   inverse: {
     true: {
-      spinnerDiv: {
-        borderTopColor: "icon.inverse",
-        borderBottomColor: "icon.inverse"
+      spinnerSvg: {
+        fill: "icon.inverse"
       }
     }
   },
@@ -4878,11 +5034,13 @@ const spinnerVariants = {
       container: {
         position: "absolute",
         inset: "0",
-        display: "grid",
-        placeContent: "center",
         width: "full",
-        height: "full",
-        zIndex: "100"
+        height: "full"
+      }
+    },
+    false: {
+      container: {
+        position: "relative"
       }
     }
   }
@@ -4890,13 +5048,81 @@ const spinnerVariants = {
 const spinnerRecipe = defineSlotRecipe({
   className: "spinner",
   jsx: ["Spinner"],
-  slots: ["container", "spinnerDiv"],
+  slots: ["container", "spinnerSvg"],
   base: spinnerBase,
   variants: spinnerVariants,
   defaultVariants: {
     size: "md"
   }
 });
+const skeletonRecipe = defineRecipe({
+  className: "skeleton",
+  jsx: ["Skeleton"],
+  base: {
+    ...globalBaseStyles,
+    display: "block",
+    position: "relative",
+    overflow: "hidden",
+    verticalAlign: "middle",
+    flexShrink: "0",
+    userSelect: "none",
+    color: "transparent",
+    bg: "bg.neutral.hovered"
+  },
+  variants: {
+    variant: {
+      text: {
+        h: "24",
+        borderRadius: "4",
+        transformOrigin: "0 55%",
+        transform: "scale(1, 0.6)"
+      },
+      circular: {
+        aspectRatio: "square",
+        borderRadius: "999"
+      },
+      rounded: {
+        borderRadius: "4"
+      },
+      rectangular: {
+        borderRadius: "0"
+      }
+    },
+    animation: {
+      pulse: {
+        animation: "pulse"
+      },
+      wave: {
+        isolation: "isolate",
+        backgroundSize: "400% 100%",
+        backgroundImage: "linear-gradient(90deg, transparent 40%, var(--cetec-colors-bg-accent-neutral-subtlest) 50%, transparent 60%)",
+        animation: "[skeletonWave 6s infinite linear]"
+      },
+      none: {}
+    },
+    hasChildren: {
+      true: {
+        "& > *": {
+          visibility: "hidden"
+        }
+      }
+    },
+    fitContent: {
+      true: {
+        maxWidth: "fit"
+      }
+    },
+    heightAuto: {
+      true: {
+        height: "auto"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "text",
+    animation: "pulse"
+  }
+});
 const dividerRecipe = defineRecipe({
   className: "divider",
   jsx: ["Divider"],
@@ -5652,7 +5878,16 @@ const iconRecipe = defineRecipe({
     // Default size here does not affect the classNames, so it's safe to set
   },
   variants: {
-    size: sizeVariants
+    size: {
+      ...sizeVariants,
+      sm: { w: "16" },
+      md: { w: "20" },
+      lg: { w: "24" },
+      xl: { w: "28" }
+    },
+    contextFill: {
+      true: {}
+    }
   },
   defaultVariants: {
     // Don't set default size because then it's hard to override in recipes
@@ -5698,6 +5933,7 @@ const regularRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
   listRecipe,
   preRecipe,
   radioInputRecipe,
+  skeletonRecipe,
   spinnerRecipe,
   tagRecipe,
   textRecipe,
@@ -5708,9 +5944,12 @@ const regularRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
 const buttonBaseStyles = {
   container: {
     ...globalBaseStyles,
-    "--icon-size": "token(sizes.24)",
-    "--icon-margin-outside": "token(sizes.6)",
-    "--icon-margin-inside": "token(sizes.1)",
+    "--main-py": "token(sizes.3)",
+    "--main-px": "token(sizes.10)",
+    "--main-slot-side-padding": "token(sizes.0)",
+    "--main-fs": "token(sizes.16)",
+    "--slot-size": "token(sizes.20)",
+    "--slot-px": "token(sizes.6)",
     position: "relative",
     appearance: "none",
     display: "flex",
@@ -5725,7 +5964,6 @@ const buttonBaseStyles = {
     transitionTimingFunction: "default",
     userSelect: "none",
     verticalAlign: "middle",
-    fontSize: "16",
     fontWeight: "medium",
     lineHeight: "default",
     borderWidth: "1",
@@ -5751,20 +5989,23 @@ const buttonBaseStyles = {
       outlineColor: "border.focused"
     }
   },
-  icon: {
-    w: "var(--icon-size)",
-    aspectRatio: "square",
-    transitionDuration: "fast",
-    transitionProperty: "fill",
-    transitionTimingFunction: "default"
-  },
-  iconBefore: {
-    ms: "calc(var(--icon-margin-outside) * -1)",
-    me: "calc(var(--icon-margin-inside) * -1)"
+  mainContent: {
+    display: "flex",
+    alignItems: "center",
+    width: "fit",
+    height: "fit",
+    py: "var(--main-py)",
+    px: "var(--main-px)",
+    fontSize: "var(--main-fs)"
   },
-  iconAfter: {
-    ms: "calc(var(--icon-margin-inside) * -1)",
-    me: "calc(var(--icon-margin-outside) * -1)"
+  slot: {
+    display: "inline-flex",
+    alignItems: "center",
+    transitionDuration: "fast",
+    transitionProperty: "all",
+    transitionTimingFunction: "default",
+    flex: "0 0 var(--slot-size)",
+    px: "var(--slot-px)"
   }
 };
 const buttonVariants = {
@@ -5773,7 +6014,6 @@ const buttonVariants = {
       container: {
         bg: "bg.neutral",
         borderColor: "transparent",
-        color: "text",
         _hover: {
           bg: "bg.neutral.hovered"
         },
@@ -5781,7 +6021,10 @@ const buttonVariants = {
           bg: "bg.neutral.pressed"
         }
       },
-      icon: {
+      mainContent: {
+        color: "text"
+      },
+      slot: {
         fill: "icon.decorative",
         mixBlendMode: { base: "multiply", _dark: "screen" },
         _groupHover: { fill: "current" },
@@ -5792,7 +6035,6 @@ const buttonVariants = {
       container: {
         bg: "bg.neutral.boldest",
         borderColor: "transparent",
-        color: "text.inverse",
         _hover: {
           bg: "bg.neutral.bold.hovered"
         },
@@ -5800,13 +6042,16 @@ const buttonVariants = {
           bg: "bg.neutral.bold.pressed"
         }
       },
-      icon: {
-        fill: "icon.decorative.inverse.subtle",
+      mainContent: {
+        color: "text.inverse"
+      },
+      slot: {
+        fill: "icon.decorative.inverse",
         mixBlendMode: { base: "screen", _dark: "multiply" },
-        _groupHover: { fill: "icon.decorative.inverse" },
-        _groupActive: { fill: "icon.decorative.inverse" },
+        _groupHover: { fill: "icon.decorative.inverse.hovered" },
+        _groupActive: { fill: "icon.decorative.inverse.hovered" },
         _groupDisabled: {
-          fill: "icon.decorative.inverse.subtle"
+          fill: "icon.decorative.inverse"
         }
       }
     },
@@ -5814,7 +6059,6 @@ const buttonVariants = {
       container: {
         bg: "bg.neutral.subtle",
         borderColor: "border",
-        color: "text",
         _hover: {
           bg: "bg.neutral.subtle.hovered"
         },
@@ -5822,7 +6066,10 @@ const buttonVariants = {
           bg: "bg.neutral.subtle.pressed"
         }
       },
-      icon: {
+      mainContent: {
+        color: "text"
+      },
+      slot: {
         fill: "icon.decorative",
         mixBlendMode: { base: "multiply", _dark: "screen" },
         _groupHover: { fill: "current" },
@@ -5833,7 +6080,6 @@ const buttonVariants = {
       container: {
         bg: "bg.neutral.subtle",
         borderColor: "transparent",
-        color: "text",
         _hover: {
           bg: "bg.neutral.subtle.hovered"
         },
@@ -5841,7 +6087,10 @@ const buttonVariants = {
           bg: "bg.neutral.subtle.pressed"
         }
       },
-      icon: {
+      mainContent: {
+        color: "text"
+      },
+      slot: {
         fill: "icon.decorative",
         mixBlendMode: { base: "multiply", _dark: "screen" },
         _groupHover: { fill: "current" },
@@ -5852,7 +6101,6 @@ const buttonVariants = {
       container: {
         bg: "gold.20",
         borderColor: "transparent",
-        color: "neutral.90",
         _hover: {
           bg: "gold.15"
         },
@@ -5860,7 +6108,10 @@ const buttonVariants = {
           bg: "gold.30"
         }
       },
-      icon: {
+      mainContent: {
+        color: "neutral.90"
+      },
+      slot: {
         fill: "neutral.50",
         mixBlendMode: "multiply",
         _groupHover: { fill: "current" },
@@ -5874,7 +6125,6 @@ const buttonVariants = {
       container: {
         bg: "red.50",
         borderColor: "transparent",
-        color: "neutral.0",
         _hover: {
           bg: "red.40"
         },
@@ -5882,11 +6132,14 @@ const buttonVariants = {
           bg: "red.60"
         }
       },
-      icon: {
+      mainContent: {
+        color: "neutral.0"
+      },
+      slot: {
         fill: "icon.decorative.inverse",
         mixBlendMode: "screen",
-        _groupHover: { fill: "icon.decorative.inverse" },
-        _groupActive: { fill: "icon.decorative.inverse" },
+        _groupHover: { fill: "icon.decorative.inverse.hovered" },
+        _groupActive: { fill: "icon.decorative.inverse.hovered" },
         _groupDisabled: {
           fill: "icon.decorative.inverse"
         }
@@ -5896,20 +6149,19 @@ const buttonVariants = {
       container: {
         bg: "bg.selected",
         borderColor: "transparent",
-        color: "text.selected",
-        icon: { fill: "icon.selected" },
         _hover: {
           bg: "bg.selected.hovered",
-          color: "text.selected.hovered",
-          icon: { fill: "icon.selected" }
+          color: "text.selected.hovered"
         },
         _active: {
           bg: "bg.selected.pressed",
-          color: "text.selected",
-          icon: { fill: "icon.selected" }
+          color: "text.selected"
         }
       },
-      icon: {
+      mainContent: {
+        color: "text.selected"
+      },
+      slot: {
         fill: "icon.selected",
         mixBlendMode: { base: "multiply", _dark: "screen" },
         _groupHover: { fill: "icon.selected" },
@@ -5923,7 +6175,6 @@ const buttonVariants = {
       container: {
         bg: "bg.selected.bold",
         borderColor: "transparent",
-        color: "text.inverse",
         _hover: {
           bg: "bg.selected.bold.hovered"
         },
@@ -5931,13 +6182,16 @@ const buttonVariants = {
           bg: "bg.selected.bold.pressed"
         }
       },
-      icon: {
-        fill: "icon.inverse",
+      mainContent: {
+        color: "text.inverse"
+      },
+      slot: {
+        fill: "icon.decorative.inverse",
         mixBlendMode: { base: "screen", _dark: "multiply" },
-        _groupHover: { fill: "icon.inverse" },
-        _groupActive: { fill: "icon.inverse" },
+        _groupHover: { fill: "icon.decorative.inverse.hovered" },
+        _groupActive: { fill: "icon.decorative.inverse.hovered" },
         _groupDisabled: {
-          fill: "icon.inverse"
+          fill: "icon.decorative.inverse"
         }
       }
     }
@@ -5946,65 +6200,65 @@ const buttonVariants = {
 const buttonRecipe = defineSlotRecipe({
   className: "button",
   jsx: ["Button"],
-  slots: ["container", "icon", "iconBefore", "iconAfter"],
+  slots: ["container", "mainContent", "slot"],
   base: buttonBaseStyles,
   variants: {
     ...buttonVariants,
     size: {
       sm: {
         container: {
-          fontSize: "14",
-          py: "0",
-          px: "8"
-        },
-        icon: {
-          "--icon-size": "token(sizes.22)",
-          "--icon-margin-outside": "token(sizes.5)",
-          "--icon-margin-inside": "token(sizes.1)"
+          "--main-py": "token(sizes.0)",
+          "--main-px": "token(sizes.8)",
+          "--main-slot-side-padding": "token(sizes.0)",
+          "--main-fs": "token(sizes.14)",
+          "--slot-size": "token(sizes.16)",
+          "--slot-px": "token(sizes.4)"
         }
       },
       md: {
         container: {
-          fontSize: "16",
-          py: "3",
-          px: "12"
-        },
-        icon: {
-          "--icon-size": "token(sizes.24)",
-          "--icon-margin-outside": "token(sizes.8)",
-          "--icon-margin-inside": "token(sizes.1)"
+          "--main-py": "token(sizes.3)",
+          "--main-px": "token(sizes.10)",
+          "--main-slot-side-padding": "token(sizes.0)",
+          "--main-fs": "token(sizes.16)",
+          "--slot-size": "token(sizes.20)",
+          "--slot-px": "token(sizes.6)"
         }
       },
       lg: {
         container: {
-          fontSize: "16",
-          py: "7",
-          px: "14"
-        },
-        icon: {
-          "--icon-size": "token(sizes.24)",
-          "--icon-margin-outside": "token(sizes.10)",
-          "--icon-margin-inside": "token(sizes.1)"
+          "--main-py": "token(sizes.7)",
+          "--main-px": "token(sizes.12)",
+          "--main-slot-side-padding": "token(sizes.0)",
+          "--main-fs": "token(sizes.16)",
+          "--slot-size": "token(sizes.24)",
+          "--slot-px": "token(sizes.8)"
         }
       },
       xl: {
         container: {
-          fontSize: "20",
-          py: "9",
-          px: "16"
-        },
-        icon: {
-          "--icon-size": "token(sizes.28)",
-          "--icon-margin-outside": "token(sizes.10)",
-          "--icon-margin-inside": "token(sizes.1)"
+          "--main-py": "token(sizes.9)",
+          "--main-px": "token(sizes.16)",
+          "--main-slot-side-padding": "token(sizes.0)",
+          "--main-fs": "token(sizes.20)",
+          "--slot-size": "token(sizes.28)",
+          "--slot-px": "token(sizes.10)"
         }
       }
     },
-    iconBefore: {
-      true: { container: {} }
+    before: {
+      true: {
+        mainContent: {
+          ps: "0"
+        }
+      }
     },
-    iconAfter: {
-      true: { container: {} }
+    after: {
+      true: {
+        mainContent: {
+          pe: "0"
+        }
+      }
     }
   },
   defaultVariants: {
@@ -6015,49 +6269,44 @@ const buttonRecipe = defineSlotRecipe({
 const iconButtonRecipe = defineSlotRecipe({
   className: "iconButton",
   jsx: ["IconButton"],
-  slots: ["container", "icon"],
-  base: buttonBaseStyles,
+  slots: ["container", "mainContent", "slot"],
+  base: {
+    ...buttonBaseStyles,
+    mainContent: {
+      w: "calc(var(--slot-size) + (var(--slot-px) * 2))",
+      h: "calc(var(--slot-size) + (var(--slot-px) * 2))",
+      p: "var(--slot-px)"
+    },
+    slot: {
+      w: "var(--slot-size)",
+      h: "var(--slot-size)"
+    }
+  },
   variants: {
     ...buttonVariants,
     size: {
-      md: {
+      sm: {
         container: {
-          fontSize: "16",
-          p: "3"
-        },
-        icon: {
-          w: "24",
-          h: "24"
+          "--slot-size": "token(sizes.16)",
+          "--slot-px": "token(sizes.3)"
         }
       },
-      xl: {
+      md: {
         container: {
-          fontSize: "20",
-          p: "9"
-        },
-        icon: {
-          w: "28",
-          h: "28"
+          "--slot-size": "token(sizes.20)",
+          "--slot-px": "token(sizes.5)"
         }
       },
       lg: {
         container: {
-          fontSize: "16",
-          p: "7"
-        },
-        icon: {
-          w: "24",
-          h: "24"
+          "--slot-size": "token(sizes.24)",
+          "--slot-px": "token(sizes.7)"
         }
       },
-      sm: {
+      xl: {
         container: {
-          fontSize: "14",
-          p: "1"
-        },
-        icon: {
-          w: "22",
-          h: "22"
+          "--slot-size": "token(sizes.28)",
+          "--slot-px": "token(sizes.9)"
         }
       }
     }
@@ -6425,10 +6674,15 @@ const menuRecipe = defineSlotRecipe({
 const textInputBase = {
   container: {
     ...globalBaseStyles,
-    "--icon-size": "token(sizes.24)",
-    "--icon-margin": "token(sizes.3)",
-    "--input-icon-padding": "token(sizes.10)",
+    "--input-py": "token(sizes.3)",
+    "--input-px": "token(sizes.10)",
+    "--input-slot-side-padding": "token(sizes.0)",
+    "--input-fs": "token(sizes.16)",
+    "--slot-size": "token(sizes.20)",
+    "--slot-px": "token(sizes.6)",
     position: "relative",
+    display: "flex",
+    alignItems: "center",
     width: "full",
     bg: "surface",
     borderWidth: "1",
@@ -6438,29 +6692,27 @@ const textInputBase = {
     outlineWidth: "1",
     outlineStyle: "solid",
     outlineColor: "transparent",
-    overflow: "hidden",
-    lineHeight: "none",
-    _focusWithin: {
+    "&:focus-within:not(:has(button:focus))": {
       outlineColor: "border.focused",
       borderColor: "border.focused"
     },
     _error: {
       borderColor: "border.danger",
-      _focusWithin: {
+      "&:focus-within:not(:has(button:focus))": {
         borderColor: "border.danger",
         outlineColor: "border.danger"
       }
     },
     _invalid: {
       borderColor: "border.danger",
-      _focusWithin: {
+      "&:focus-within:not(:has(button:focus))": {
         borderColor: "border.danger",
         outlineColor: "border.danger"
       }
     },
     _valid: {
       borderColor: "border.success",
-      _focusWithin: {
+      "&:focus-within:not(:has(button:focus))": {
         borderColor: "border.success",
         outlineColor: "border.success"
       }
@@ -6468,7 +6720,7 @@ const textInputBase = {
     _disabled: {
       opacity: 0.4,
       cursor: "not-allowed",
-      _focusWithin: {
+      "&:focus-within:not(:has(button:focus))": {
         outlineColor: "transparent",
         borderColor: "border.input"
       }
@@ -6481,6 +6733,10 @@ const textInputBase = {
   input: {
     width: "full",
     bg: "surface",
+    py: "var(--input-py)",
+    px: "var(--input-px)",
+    fontSize: "var(--input-fs)",
+    borderRadius: "3",
     color: "text",
     lineHeight: "default",
     fontFamily: "body",
@@ -6490,104 +6746,93 @@ const textInputBase = {
       color: "text.placeholder"
     }
   },
-  icon: {
-    position: "absolute",
-    top: "50%",
-    transform: "translateY(-50%)",
-    w: "var(--icon-size)",
-    mx: "var(--icon-margin)",
-    fill: "icon.decorative.subtle",
-    mixBlendMode: { base: "multiply", _dark: "screen" },
+  slot: {
+    display: "inline-flex",
+    alignItems: "center",
+    transitionDuration: "fast",
+    transitionProperty: "all",
+    transitionTimingFunction: "default",
+    flex: "0 0 var(--slot-size)",
+    px: "var(--slot-px)",
+    fill: "icon.decorative",
     pointerEvents: "none",
     zIndex: 1
+  },
+  buttonSlot: {
+    display: "inline-flex",
+    alignItems: "center",
+    flex: "0 0 var(--slot-size)",
+    px: "0",
+    zIndex: 1,
+    m: "-1"
   }
 };
 const textInputVariants = {
   size: {
     sm: {
       container: {
-        "--icon-size": "token(sizes.22)",
-        "--icon-margin": "token(sizes.2)",
-        "--input-icon-padding": "[26px]"
-      },
-      input: {
-        py: "0",
-        px: "8",
-        fontSize: "14"
-      },
-      inputIconBefore: {
-        ps: "var(--input-icon-padding)"
-      },
-      inputIconAfter: {
-        pe: "var(--input-icon-padding)"
+        "--input-py": "token(sizes.0)",
+        "--input-px": "token(sizes.8)",
+        "--input-slot-side-padding": "token(sizes.0)",
+        "--input-fs": "token(sizes.14)",
+        "--slot-size": "token(sizes.16)",
+        "--slot-px": "token(sizes.4)"
       }
     },
     md: {
       container: {
-        "--icon-size": "token(sizes.24)",
-        "--icon-margin": "token(sizes.3)",
-        "--input-icon-padding": "[31px]"
-      },
-      input: {
-        py: "3",
-        px: "10",
-        fontSize: "16"
-      },
-      inputIconBefore: {
-        ps: "var(--input-icon-padding)"
-      },
-      inputIconAfter: {
-        pe: "var(--input-icon-padding)"
+        "--input-py": "token(sizes.3)",
+        "--input-px": "token(sizes.10)",
+        "--input-slot-side-padding": "token(sizes.0)",
+        "--input-fs": "token(sizes.16)",
+        "--slot-size": "token(sizes.20)",
+        "--slot-px": "token(sizes.6)"
       }
     },
     lg: {
       container: {
-        "--icon-size": "token(sizes.24)",
-        "--icon-margin": "token(sizes.5)",
-        "--input-icon-padding": "[34px]"
-      },
-      input: {
-        py: "7",
-        px: "12",
-        fontSize: "16"
-      },
-      inputIconBefore: {
-        ps: "var(--input-icon-padding)"
-      },
-      inputIconAfter: {
-        pe: "var(--input-icon-padding)"
+        "--input-py": "token(sizes.7)",
+        "--input-px": "token(sizes.12)",
+        "--input-slot-side-padding": "token(sizes.0)",
+        "--input-fs": "token(sizes.16)",
+        "--slot-size": "token(sizes.24)",
+        "--slot-px": "token(sizes.8)"
       }
     },
     xl: {
       container: {
-        "--icon-size": "token(sizes.28)",
-        "--icon-margin": "token(sizes.7)",
-        "--input-icon-padding": "[42px]"
-      },
-      input: {
-        py: "9",
-        px: "16",
-        fontSize: "20"
-      },
-      inputIconBefore: {
-        ps: "var(--input-icon-padding)"
-      },
-      inputIconAfter: {
-        pe: "var(--input-icon-padding)"
+        "--input-py": "token(sizes.9)",
+        "--input-px": "token(sizes.16)",
+        "--input-slot-side-padding": "token(sizes.0)",
+        "--input-fs": "token(sizes.20)",
+        "--slot-size": "token(sizes.28)",
+        "--slot-px": "token(sizes.10)"
       }
     }
   },
-  iconBefore: {
+  before: {
     true: {
-      icon: {
-        left: "0"
+      input: {
+        ps: "0"
+      },
+      buttonSlot: {
+        "& button": {
+          borderTopRightRadius: "0",
+          borderBottomRightRadius: "0"
+        }
       }
     }
   },
-  iconAfter: {
+  after: {
     true: {
-      icon: {
-        right: "0"
+      input: {
+        pe: "0"
+      },
+      buttonSlot: {
+        "& button": {
+          borderTopLeftRadius: "0",
+          borderBottomLeftRadius: "0"
+        }
       }
     }
   },
@@ -6603,7 +6848,7 @@ const textInputVariants = {
 const textInputRecipe = defineSlotRecipe({
   className: "textInput",
   jsx: ["TextInput"],
-  slots: ["container", "input", "icon", "inputIconBefore", "inputIconAfter"],
+  slots: ["container", "input", "slot", "buttonSlot", "before", "after"],
   base: textInputBase,
   variants: textInputVariants,
   defaultVariants: {
@@ -6747,7 +6992,7 @@ const avatarRecipe = defineSlotRecipe({
   },
   variants: {
     size: {
-      xs: {
+      sm: {
         root: {
           w: "16"
         },
@@ -6761,7 +7006,7 @@ const avatarRecipe = defineSlotRecipe({
           w: "8"
         }
       },
-      sm: {
+      md: {
         root: {
           w: "20"
         },
@@ -6775,7 +7020,7 @@ const avatarRecipe = defineSlotRecipe({
           w: "10"
         }
       },
-      md: {
+      lg: {
         root: {
           w: "24"
         },
@@ -6789,7 +7034,7 @@ const avatarRecipe = defineSlotRecipe({
           w: "10"
         }
       },
-      lg: {
+      xl: {
         root: {
           w: "28"
         },
@@ -6803,7 +7048,7 @@ const avatarRecipe = defineSlotRecipe({
           w: "12"
         }
       },
-      xl: {
+      "2xl": {
         root: {
           w: "36"
         },
@@ -6817,7 +7062,7 @@ const avatarRecipe = defineSlotRecipe({
           w: "16"
         }
       },
-      "2xl": {
+      "3xl": {
         root: {
           w: "48"
         },
@@ -6874,7 +7119,10 @@ const badgeRecipe = defineSlotRecipe({
       "--indicator-min-width": "token(sizes.16)",
       display: "inline-flex",
       position: "relative",
-      verticalAlign: "middle"
+      verticalAlign: "middle",
+      w: "fit",
+      h: "fit",
+      flex: "0"
     },
     indicator: {
       display: "inline-flex",
@@ -7019,197 +7267,216 @@ const badgeRecipe = defineSlotRecipe({
     variant: "danger"
   }
 });
+const buttonStyles = {
+  appearance: "none",
+  cursor: "pointer",
+  transitionDuration: "fast",
+  transitionProperty: "background, color",
+  transitionTimingFunction: "default",
+  _icon: {
+    fill: "icon.decorative"
+  },
+  _hover: {
+    bg: "bg.neutral.hovered",
+    _icon: {
+      fill: "icon"
+    }
+  },
+  _active: {
+    bg: "bg.neutral.pressed",
+    _icon: {
+      fill: "icon"
+    }
+  },
+  _focusVisible: {
+    outlineColor: "border.focused"
+  },
+  _disabled: {
+    cursor: "not-allowed"
+  },
+  "&[data-disabled=true]": {
+    cursor: "not-allowed"
+  },
+  "&[data-deleted=true]": {
+    textDecoration: "line-through",
+    opacity: "[0.6]"
+  },
+  "&[data-selected=true]": {
+    bg: "bg.neutral.boldest",
+    _icon: {
+      fill: "icon.decorative.inverse"
+    }
+  },
+  "&[data-selected=true]:is(:hover, [data-hover])": {
+    bg: "bg.neutral.bold.hovered",
+    _icon: {
+      fill: "icon.decorative.inverse.hovered"
+    }
+  },
+  "&[data-selected=true]:is(:active, [data-active])": {
+    bg: "bg.neutral.bold.pressed",
+    _icon: {
+      fill: "icon.decorative.inverse.hovered"
+    }
+  }
+};
 const chipRecipe = defineSlotRecipe({
   className: "chip",
   jsx: ["Chip"],
-  slots: [
-    "container",
-    "innerWrapper",
-    "chipIcon",
-    "chipBadge",
-    "chipAvatar",
-    "slotItem"
-  ],
+  slots: ["container", "body", "mainContent", "dismissButton", "slot"],
   base: {
     container: {
       ...globalBaseStyles,
-      "--slotItem-margin": "token(sizes.2)",
-      "--chipIcon-margin": "var(--slotItem-margin)",
-      "--chipBadge-margin": "var(--slotItem-margin)",
-      "--chipAvatar-margin": "token(sizes.6)",
+      "--chip-h": "token(sizes.24)",
+      "--main-px": "token(sizes.8)",
+      "--main-fs": "token(sizes.14)",
+      "--main-slot-side-padding": "token(sizes.4)",
+      "--slot-size": "token(sizes.20)",
+      "--slot-px": "token(sizes.2)",
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
-      appearance: "none",
       width: "fit",
+      height: "var(--chip-h)",
       borderRadius: "999",
       fontFamily: "body",
       lineHeight: "default",
       fontWeight: "medium",
       whiteSpace: "nowrap",
       verticalAlign: "middle",
-      cursor: "pointer",
       transitionDuration: "fast",
-      transitionProperty: "background, color",
+      transitionProperty: "all",
       transitionTimingFunction: "default",
       userSelect: "none",
-      border: "none",
-      outlineWidth: "2",
-      outlineStyle: "solid",
-      outlineColor: "transparent",
       bg: "bg.neutral",
-      _hover: {
-        bg: "bg.neutral.hovered"
-      },
-      _active: {
-        bg: "bg.neutral.pressed"
-      },
-      _focusVisible: {
-        outlineColor: "border.focused"
-      },
       _loading: {
-        cursor: "wait",
         animation: "pulse"
       },
-      _deleted: {
-        textDecoration: "line-through",
-        cursor: "not-allowed",
-        opacity: "[0.6]"
+      "&:has([data-selected=true])": {
+        bg: "bg.neutral.boldest",
+        color: "text.inverse"
       },
-      _disabled: {
+      "&[data-disabled=true]": {
         cursor: "not-allowed",
         bg: "bg.disabled",
         color: "text.disabled",
-        borderColor: "border.disabled",
-        _hover: {
-          bg: "bg.disabled",
-          color: "text.disabled",
-          borderColor: "border.disabled",
-          chipIcon: { fill: "icon.disabled" }
-        }
-      },
-      _selected: {
-        bg: "bg.neutral.boldest",
-        _hover: {
-          bg: "bg.neutral.bold.hovered"
-        },
-        _active: {
-          bg: "bg.neutral.bold.pressed"
-        }
+        opacity: "[0.3]"
       }
     },
-    innerWrapper: {
-      color: "text",
-      display: "flex",
+    body: {
+      ...globalBaseStyles,
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      minW: "0",
+      height: "var(--chip-h)",
+      flexShrink: "0",
+      bg: "transparent",
+      border: "none",
+      borderRadius: "999",
+      outlineWidth: "2",
+      outlineStyle: "solid",
+      outlineColor: "transparent",
+      outlineOffset: "calc(token(sizes.2) * -1)",
+      "button&": {
+        ...buttonStyles
+      }
+    },
+    mainContent: {
+      display: "inline-flex",
       alignItems: "center",
+      minW: "0",
+      px: "var(--main-px)",
+      fontSize: "var(--main-fs)",
+      color: "text",
       "[data-selected=true] &": {
         color: "text.inverse"
       }
     },
-    slotItem: {
+    dismissButton: {
+      ...globalBaseStyles,
+      position: "relative",
       display: "inline-flex",
-      alignItems: "center"
-    },
-    chipIcon: {
-      fill: "icon.decorative",
-      aspectRatio: "square",
+      alignItems: "center",
+      minW: "0",
       flexShrink: "0",
-      transitionDuration: "fast",
-      transitionProperty: "fill",
-      transitionTimingFunction: "default",
-      _groupHover: { fill: "icon.decorative.hovered" },
-      _groupActive: { fill: "icon.decorative.hovered" },
-      _groupDisabled: { fill: "icon.decorative" },
-      "[data-selected=true] &": {
-        fill: "icon.decorative.inverse"
-      },
-      ".group:is(:hover, [data-hover])[data-selected=true] &": {
-        fill: "icon.decorative.inverse.hovered"
-      }
+      bg: "transparent",
+      border: "none",
+      borderRadius: "999",
+      outlineWidth: "2",
+      outlineStyle: "solid",
+      outlineColor: "transparent",
+      outlineOffset: "calc(token(sizes.2) * -1)",
+      aspectRatio: "square",
+      ...buttonStyles,
+      w: "calc(var(--slot-size) + (var(--slot-px) * 2))",
+      h: "calc(var(--slot-size) + (var(--slot-px) * 2))"
+    },
+    slot: {
+      display: "inline-flex",
+      alignItems: "center",
+      px: "var(--slot-px)"
     }
   },
   variants: {
     size: {
       sm: {
         container: {
-          "--slotItem-margin": "token(sizes.2)",
-          "--chipAvatar-margin": "token(sizes.4)",
-          h: "20",
-          px: "6",
-          py: "0",
-          fontSize: "14"
-        },
-        innerWrapper: {
-          gap: "3"
-        },
-        chipIcon: {
-          w: "20"
+          "--chip-h": "token(sizes.18)",
+          "--main-px": "token(sizes.6)",
+          "--main-fs": "token(sizes.12)",
+          "--main-slot-side-padding": "token(sizes.4)",
+          "--slot-size": "token(sizes.16)",
+          "--slot-px": "token(sizes.1)"
         }
       },
       md: {
         container: {
-          "--slotItem-margin": "token(sizes.4)",
-          "--chipAvatar-margin": "token(sizes.6)",
-          h: "24",
-          px: "8",
-          py: "1",
-          fontSize: "14"
-        },
-        innerWrapper: {
-          gap: "5"
-        },
-        chipIcon: {
-          w: "20"
+          "--chip-h": "token(sizes.24)",
+          "--main-px": "token(sizes.8)",
+          "--main-fs": "token(sizes.14)",
+          "--main-slot-side-padding": "token(sizes.4)",
+          "--slot-size": "token(sizes.20)",
+          "--slot-px": "token(sizes.2)"
         }
       },
       lg: {
         container: {
-          "--slotItem-margin": "token(sizes.6)",
-          "--chipAvatar-margin": "token(sizes.8)",
-          h: "32",
-          px: "10",
-          py: "4",
-          fontSize: "16"
-        },
-        innerWrapper: {
-          gap: "8"
-        },
-        chipIcon: {
-          w: "24"
+          "--chip-h": "token(sizes.28)",
+          "--main-px": "token(sizes.10)",
+          "--main-fs": "token(sizes.16)",
+          "--main-slot-side-padding": "token(sizes.4)",
+          "--slot-size": "token(sizes.24)",
+          "--slot-px": "token(sizes.2)"
+        }
+      },
+      xl: {
+        container: {
+          "--chip-h": "token(sizes.32)",
+          "--main-px": "token(sizes.12)",
+          "--main-fs": "token(sizes.20)",
+          "--main-slot-side-padding": "token(sizes.4)",
+          "--slot-size": "token(sizes.28)",
+          "--slot-px": "token(sizes.2)"
         }
       }
     },
     before: {
       true: {
-        slotItem: {
-          ms: "calc(var(--slotItem-margin) * -1)"
-        },
-        chipIcon: {
-          ms: "calc(var(--chipIcon-margin) * -1)"
-        },
-        chipBadge: {
-          ms: "calc(var(--chipBadge-margin) * -1)"
-        },
-        chipAvatar: {
-          ms: "calc(var(--chipAvatar-margin) * -1)"
+        mainContent: {
+          ps: "var(--main-slot-side-padding)"
         }
       }
     },
     after: {
       true: {
-        slotItem: {
-          me: "calc(var(--slotItem-margin) * -1)"
-        },
-        chipIcon: {
-          me: "calc(var(--chipIcon-margin) * -1)"
-        },
-        chipBadge: {
-          me: "calc(var(--chipBadge-margin) * -1)"
-        },
-        chipAvatar: {
-          me: "calc(var(--chipAvatar-margin) * -1)"
+        mainContent: {
+          pe: "var(--main-slot-side-padding)"
         }
       }
+    },
+    dismissable: {
+      true: {}
     }
   },
   defaultVariants: {
@@ -8058,7 +8325,6 @@ const kbdRecipe = defineSlotRecipe({
     kbdGroup: {
       display: "inline-flex",
       alignItems: "center",
-      flexWrap: "wrap",
       gap: "2",
       verticalAlign: "middle"
     },
@@ -8078,6 +8344,7 @@ const kbdRecipe = defineSlotRecipe({
       fontVariant: "mono",
       lineHeight: "tight",
       fontWeight: "bold",
+      textTransform: "uppercase",
       color: "text.subtle",
       userSelect: "none",
       pointerEvents: "none",
@@ -9248,6 +9515,64 @@ const colors = defineSemanticTokens.colors({
     }
   }
 });
+const fontSizes = defineSemanticTokens.fontSizes({
+  display: {
+    lg: {
+      value: "{sizes.72}"
+    },
+    md: {
+      value: "{sizes.64}"
+    },
+    sm: {
+      value: "{sizes.56}"
+    },
+    xs: {
+      value: "{sizes.48}"
+    }
+  },
+  heading: {
+    lg: {
+      value: "{sizes.40}"
+    },
+    md: {
+      value: "{sizes.32}"
+    },
+    sm: {
+      value: "{sizes.24}"
+    },
+    xs: {
+      value: "{sizes.20}"
+    }
+  },
+  body: {
+    lg: {
+      value: "{sizes.20}"
+    },
+    md: {
+      value: "{sizes.16}"
+    },
+    sm: {
+      value: "{sizes.14}"
+    },
+    xs: {
+      value: "{sizes.12}"
+    }
+  },
+  mono: {
+    lg: {
+      value: "{sizes.20}"
+    },
+    md: {
+      value: "{sizes.16}"
+    },
+    sm: {
+      value: "{sizes.14}"
+    },
+    xs: {
+      value: "{sizes.12}"
+    }
+  }
+});
 const shadows = defineSemanticTokens.shadows({
   zero: {
     value: { base: "{shadows.zeroShadow}", _dark: "{shadows.zeroShadow}" }
@@ -9312,6 +9637,7 @@ const theme = {
   },
   semanticTokens: {
     colors,
+    fontSizes,
     shadows,
     zIndex
   }
@@ -9325,6 +9651,7 @@ const cetecPreset = definePreset$1({
       },
       semanticTokens: {
         colors: theme.semanticTokens.colors,
+        fontSizes: theme.semanticTokens.fontSizes,
         shadows: theme.semanticTokens.shadows,
         zIndex: theme.semanticTokens.zIndex
       },
@@ -9380,4 +9707,4 @@ export {
   breakpoints as b,
   containerSizes as c
 };
-//# sourceMappingURL=cetec-preset-BB-QcJUK.js.map
+//# sourceMappingURL=cetec-preset-CMHb1Xn9.js.map