@nurix/ui-component-library 1.1.4-stage.117 → 1.1.4-stage.118

package/dist/index.d.mts

@@ -1408,6 +1408,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#1d4885";
             readonly borderDestructive: "#b91c1c";
             readonly borderInput: "#e5e5e5";
+            readonly borderInputHover: "#dadada";
             readonly hovOpacityPrimary: "#0a0a0a0d";
             readonly hovOpacitySecondary: "#0a0a0a0d";
             readonly hovSolidPrimary: "#fafafa";
@@ -1494,6 +1495,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#bfdbfe";
             readonly borderDestructive: "#f87171";
             readonly borderInput: "#262626";
+            readonly borderInputHover: "#404040";
             readonly hovOpacityPrimary: "#ffffff0d";
             readonly hovOpacitySecondary: "#ffffff1a";
             readonly hovSolidPrimary: "#262626";

package/dist/index.d.ts

@@ -1408,6 +1408,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#1d4885";
             readonly borderDestructive: "#b91c1c";
             readonly borderInput: "#e5e5e5";
+            readonly borderInputHover: "#dadada";
             readonly hovOpacityPrimary: "#0a0a0a0d";
             readonly hovOpacitySecondary: "#0a0a0a0d";
             readonly hovSolidPrimary: "#fafafa";
@@ -1494,6 +1495,7 @@ declare const DEFAULT_THEME: {
             readonly borderBrand: "#bfdbfe";
             readonly borderDestructive: "#f87171";
             readonly borderInput: "#262626";
+            readonly borderInputHover: "#404040";
             readonly hovOpacityPrimary: "#ffffff0d";
             readonly hovOpacitySecondary: "#ffffff1a";
             readonly hovSolidPrimary: "#262626";

package/dist/index.js

@@ -6974,6 +6974,7 @@ var DEFAULT_THEME = {
       borderBrand: "#1d4885",
       borderDestructive: "#b91c1c",
       borderInput: "#e5e5e5",
+      borderInputHover: "#dadada",
       // Interaction tokens (Figma: color > interaction)
       hovOpacityPrimary: "#0a0a0a0d",
       hovOpacitySecondary: "#0a0a0a0d",
@@ -7065,6 +7066,7 @@ var DEFAULT_THEME = {
       borderBrand: "#bfdbfe",
       borderDestructive: "#f87171",
       borderInput: "#262626",
+      borderInputHover: "#404040",
       // Interaction tokens (Figma: color > interaction)
       hovOpacityPrimary: "#ffffff0d",
       hovOpacitySecondary: "#ffffff1a",
@@ -7305,10 +7307,14 @@ var INPUT_TOKENS = {
   // Borderless: used in table-like contexts (key-value editor). No visible
   // border at rest. Focus reveals the brand border. No hover/pressed overlay.
   fieldBgBorderless: "bg-transparent",
-  // Base border + focus-within treatment.
-  // Inputs do NOT paint a fill on hover (matches Figma — the field reads as
-  // a static surface; only focus changes the border colour).
+  // Base border + focus-within treatment. Hover darkens the border (Figma
+  // hover variant: #dadada). focus-within wins over hover via pseudo-class
+  // ordering, so focus colour still applies when the field is hovered.
   fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening for the active (non-invalid, non-disabled)
+  // state. Applied conditionally by the component so it does not override
+  // the destructive border on invalid fields.
+  fieldHover: "hover:border-token-input-hover",
   // Borderless base — transparent resting border, brand border only on focus.
   // No hover/pressed overlay (these cells sit inside a larger interactive row).
   // Layout-shift safe: border width stays 1px across states (color-only swap).
@@ -7359,6 +7365,7 @@ var Input = React2.forwardRef(
   }, ref) => {
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
+    const isInvalid = invalid || supportingTextType === "error";
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
@@ -7377,9 +7384,10 @@ var Input = React2.forwardRef(
                 inputSize === "sm" ? INPUT_TOKENS.fieldSizeSm : INPUT_TOKENS.fieldSizeMd,
                 inputVariant === "borderless" ? INPUT_TOKENS.fieldBgBorderless : inputVariant === "white" ? INPUT_TOKENS.fieldBgWhite : INPUT_TOKENS.fieldBgGrey,
                 inputVariant === "borderless" ? INPUT_TOKENS.fieldBaseBorderless : INPUT_TOKENS.fieldBase,
+                inputVariant !== "borderless" && !isDisabled && !isInvalid && INPUT_TOKENS.fieldHover,
                 isDisabled && INPUT_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand",
-                (invalid || supportingTextType === "error") && INPUT_TOKENS.fieldInvalid
+                isInvalid && INPUT_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: INPUT_TOKENS.radius[input_border_radius],
@@ -7523,7 +7531,10 @@ var INPUT_GROUP_TOKENS = {
   field: "flex h-[var(--input-height,40px)] w-full items-center gap-2 overflow-hidden px-[var(--input-padding-horizontal,12px)] py-[10px] text-sm shadow-none",
   fieldBgGrey: "bg-token-white",
   fieldBgWhite: "bg-token-white",
-  fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none",
+  fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening (Figma hover variant: #dadada). Applied
+  // conditionally by the component so it does not override invalid/disabled.
+  fieldHover: "hover:border-token-input-hover",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   fieldDisabled: "border-token-xlight",
   // Inner input area
@@ -7532,7 +7543,8 @@ var INPUT_GROUP_TOKENS = {
   segment: "shrink-0 flex items-center text-xs font-normal text-fg-placeholder px-3",
   segmentDivider: "border-token-light",
   // Textarea
-  textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none",
+  textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none transition-colors",
+  textareaHover: "hover:border-token-input-hover",
   textareaInvalid: "border-token-destructive focus-visible:border-token-destructive",
   textareaDisabled: "border-token-xlight",
   radius: {
@@ -7582,6 +7594,7 @@ var InputGroup = React4.forwardRef(
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
     const isActive = forceState === "active";
+    const isInvalid = !!invalid;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
@@ -7596,9 +7609,10 @@ var InputGroup = React4.forwardRef(
                 INPUT_GROUP_TOKENS.field,
                 inputVariant === "white" ? INPUT_GROUP_TOKENS.fieldBgWhite : INPUT_GROUP_TOKENS.fieldBgGrey,
                 INPUT_GROUP_TOKENS.fieldBase,
+                !isDisabled && !isInvalid && INPUT_GROUP_TOKENS.fieldHover,
                 isDisabled && INPUT_GROUP_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand",
-                invalid && INPUT_GROUP_TOKENS.fieldInvalid
+                isInvalid && INPUT_GROUP_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: INPUT_GROUP_TOKENS.radius[input_border_radius],
@@ -7691,16 +7705,18 @@ var TEXTAREA_TOKENS = {
   labelRow: "flex items-center gap-[2px] text-xs font-medium leading-4 tracking-normal text-fg-black",
   mandatory: "text-fg-destructive",
   // Base shared field layout/typography.
-  // `relative` + `overflow-hidden` so the `before:` overlay respects the
-  // field's rounded corners via [border-radius:inherit].
   field: "relative flex min-h-[80px] w-full flex-col overflow-hidden px-[var(--input-padding-horizontal,12px)] py-[10px] text-sm shadow-none",
   fieldBgGrey: "bg-token-white",
   fieldBgWhite: "bg-token-white",
-  // Base border + focus treatment.
-  // Hover/pressed are painted via a pseudo-element overlay (see fieldBase) to avoid layout shift.
+  // Base border + focus treatment. Hover darkens the border (Figma hover
+  // variant: #dadada). focus-within wins over hover via pseudo-class
+  // ordering, so focus colour still applies when the field is hovered.
   // Focus ring uses outline (not ring) so it doesn't contribute to box size.
-  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none before:pointer-events-none before:absolute before:inset-0 before:content-[''] before:[border-radius:inherit] before:transition-colors before:bg-transparent hover:before:bg-interaction-hov-opacity-primary active:before:bg-interaction-pressed-opacity-primary [&>*]:relative [&>*]:z-10",
-  fieldDisabled: "border-token-xlight hover:before:bg-transparent active:before:bg-transparent",
+  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening. Applied conditionally by the component so
+  // it does not override invalid/disabled borders.
+  fieldHover: "hover:border-token-input-hover",
+  fieldDisabled: "border-token-xlight",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   // Textarea itself.
   // `selection:` applies styles to the user's text selection (::selection):
@@ -7745,6 +7761,7 @@ var Textarea = React5.forwardRef(
   }, ref) => {
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
+    const isInvalid = invalid || supportingTextType === "error";
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
@@ -7762,9 +7779,10 @@ var Textarea = React5.forwardRef(
                 TEXTAREA_TOKENS.field,
                 inputVariant === "white" ? TEXTAREA_TOKENS.fieldBgWhite : TEXTAREA_TOKENS.fieldBgGrey,
                 TEXTAREA_TOKENS.fieldBase,
+                !isDisabled && !isInvalid && TEXTAREA_TOKENS.fieldHover,
                 isDisabled && TEXTAREA_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand outline outline-2 outline-token-brand outline-offset-2",
-                (invalid || supportingTextType === "error") && TEXTAREA_TOKENS.fieldInvalid
+                isInvalid && TEXTAREA_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: TEXTAREA_TOKENS.radius[input_border_radius],
@@ -8879,6 +8897,7 @@ var UI_COLOR_KEY_TO_CSS_VAR = {
   borderBrand: "--border-brand",
   borderDestructive: "--border-destructive",
   borderInput: "--border-input",
+  borderInputHover: "--border-input-hover",
   // Interaction tokens (Figma: color > interaction)
   hovOpacityPrimary: "--hov-opacity-primary",
   hovOpacitySecondary: "--hov-opacity-secondary",
@@ -9249,8 +9268,12 @@ var import_lucide_react6 = require("lucide-react");
 var SELECT_TOKENS = {
   // Main select container
   container: {
-    // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10
-    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none data-[state=open]:border-token-brand",
+    // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10.
+    // Hover darkens the border to match Figma (#dadada) — `data-[state=open]`
+    // and `disabled:` use higher specificity (attribute / pseudo-class) so they
+    // override the hover border when the dropdown is open or the trigger is
+    // disabled.
+    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 transition-colors hover:border-token-input-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-token-input focus-visible:outline-none data-[state=open]:border-token-brand",
     // bg variants: default = input (grey), white = card
     bgDefault: "bg-token-white",
     bgWhite: "bg-token-white",

package/dist/index.mjs

@@ -6870,6 +6870,7 @@ var DEFAULT_THEME = {
       borderBrand: "#1d4885",
       borderDestructive: "#b91c1c",
       borderInput: "#e5e5e5",
+      borderInputHover: "#dadada",
       // Interaction tokens (Figma: color > interaction)
       hovOpacityPrimary: "#0a0a0a0d",
       hovOpacitySecondary: "#0a0a0a0d",
@@ -6961,6 +6962,7 @@ var DEFAULT_THEME = {
       borderBrand: "#bfdbfe",
       borderDestructive: "#f87171",
       borderInput: "#262626",
+      borderInputHover: "#404040",
       // Interaction tokens (Figma: color > interaction)
       hovOpacityPrimary: "#ffffff0d",
       hovOpacitySecondary: "#ffffff1a",
@@ -7201,10 +7203,14 @@ var INPUT_TOKENS = {
   // Borderless: used in table-like contexts (key-value editor). No visible
   // border at rest. Focus reveals the brand border. No hover/pressed overlay.
   fieldBgBorderless: "bg-transparent",
-  // Base border + focus-within treatment.
-  // Inputs do NOT paint a fill on hover (matches Figma — the field reads as
-  // a static surface; only focus changes the border colour).
+  // Base border + focus-within treatment. Hover darkens the border (Figma
+  // hover variant: #dadada). focus-within wins over hover via pseudo-class
+  // ordering, so focus colour still applies when the field is hovered.
   fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening for the active (non-invalid, non-disabled)
+  // state. Applied conditionally by the component so it does not override
+  // the destructive border on invalid fields.
+  fieldHover: "hover:border-token-input-hover",
   // Borderless base — transparent resting border, brand border only on focus.
   // No hover/pressed overlay (these cells sit inside a larger interactive row).
   // Layout-shift safe: border width stays 1px across states (color-only swap).
@@ -7255,6 +7261,7 @@ var Input = React2.forwardRef(
   }, ref) => {
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
+    const isInvalid = invalid || supportingTextType === "error";
     return /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -7273,9 +7280,10 @@ var Input = React2.forwardRef(
                 inputSize === "sm" ? INPUT_TOKENS.fieldSizeSm : INPUT_TOKENS.fieldSizeMd,
                 inputVariant === "borderless" ? INPUT_TOKENS.fieldBgBorderless : inputVariant === "white" ? INPUT_TOKENS.fieldBgWhite : INPUT_TOKENS.fieldBgGrey,
                 inputVariant === "borderless" ? INPUT_TOKENS.fieldBaseBorderless : INPUT_TOKENS.fieldBase,
+                inputVariant !== "borderless" && !isDisabled && !isInvalid && INPUT_TOKENS.fieldHover,
                 isDisabled && INPUT_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand",
-                (invalid || supportingTextType === "error") && INPUT_TOKENS.fieldInvalid
+                isInvalid && INPUT_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: INPUT_TOKENS.radius[input_border_radius],
@@ -7419,7 +7427,10 @@ var INPUT_GROUP_TOKENS = {
   field: "flex h-[var(--input-height,40px)] w-full items-center gap-2 overflow-hidden px-[var(--input-padding-horizontal,12px)] py-[10px] text-sm shadow-none",
   fieldBgGrey: "bg-token-white",
   fieldBgWhite: "bg-token-white",
-  fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none",
+  fieldBase: "border border-token-light focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening (Figma hover variant: #dadada). Applied
+  // conditionally by the component so it does not override invalid/disabled.
+  fieldHover: "hover:border-token-input-hover",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   fieldDisabled: "border-token-xlight",
   // Inner input area
@@ -7428,7 +7439,8 @@ var INPUT_GROUP_TOKENS = {
   segment: "shrink-0 flex items-center text-xs font-normal text-fg-placeholder px-3",
   segmentDivider: "border-token-light",
   // Textarea
-  textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none",
+  textareaField: "w-full bg-token-white py-[10px] px-[var(--input-padding-horizontal,12px)] text-sm border border-token-light focus-visible:outline-none focus-visible:border-token-brand disabled:pointer-events-none shadow-none transition-colors",
+  textareaHover: "hover:border-token-input-hover",
   textareaInvalid: "border-token-destructive focus-visible:border-token-destructive",
   textareaDisabled: "border-token-xlight",
   radius: {
@@ -7478,6 +7490,7 @@ var InputGroup = React4.forwardRef(
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
     const isActive = forceState === "active";
+    const isInvalid = !!invalid;
     return /* @__PURE__ */ jsxs4(
       "div",
       {
@@ -7492,9 +7505,10 @@ var InputGroup = React4.forwardRef(
                 INPUT_GROUP_TOKENS.field,
                 inputVariant === "white" ? INPUT_GROUP_TOKENS.fieldBgWhite : INPUT_GROUP_TOKENS.fieldBgGrey,
                 INPUT_GROUP_TOKENS.fieldBase,
+                !isDisabled && !isInvalid && INPUT_GROUP_TOKENS.fieldHover,
                 isDisabled && INPUT_GROUP_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand",
-                invalid && INPUT_GROUP_TOKENS.fieldInvalid
+                isInvalid && INPUT_GROUP_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: INPUT_GROUP_TOKENS.radius[input_border_radius],
@@ -7587,16 +7601,18 @@ var TEXTAREA_TOKENS = {
   labelRow: "flex items-center gap-[2px] text-xs font-medium leading-4 tracking-normal text-fg-black",
   mandatory: "text-fg-destructive",
   // Base shared field layout/typography.
-  // `relative` + `overflow-hidden` so the `before:` overlay respects the
-  // field's rounded corners via [border-radius:inherit].
   field: "relative flex min-h-[80px] w-full flex-col overflow-hidden px-[var(--input-padding-horizontal,12px)] py-[10px] text-sm shadow-none",
   fieldBgGrey: "bg-token-white",
   fieldBgWhite: "bg-token-white",
-  // Base border + focus treatment.
-  // Hover/pressed are painted via a pseudo-element overlay (see fieldBase) to avoid layout shift.
+  // Base border + focus treatment. Hover darkens the border (Figma hover
+  // variant: #dadada). focus-within wins over hover via pseudo-class
+  // ordering, so focus colour still applies when the field is hovered.
   // Focus ring uses outline (not ring) so it doesn't contribute to box size.
-  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none before:pointer-events-none before:absolute before:inset-0 before:content-[''] before:[border-radius:inherit] before:transition-colors before:bg-transparent hover:before:bg-interaction-hov-opacity-primary active:before:bg-interaction-pressed-opacity-primary [&>*]:relative [&>*]:z-10",
-  fieldDisabled: "border-token-xlight hover:before:bg-transparent active:before:bg-transparent",
+  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
+  // Hover-only border darkening. Applied conditionally by the component so
+  // it does not override invalid/disabled borders.
+  fieldHover: "hover:border-token-input-hover",
+  fieldDisabled: "border-token-xlight",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   // Textarea itself.
   // `selection:` applies styles to the user's text selection (::selection):
@@ -7641,6 +7657,7 @@ var Textarea = React5.forwardRef(
   }, ref) => {
     const isDisabled = forceState === "disabled" || disabled;
     const isFocussed = forceState === "focussed";
+    const isInvalid = invalid || supportingTextType === "error";
     return /* @__PURE__ */ jsxs5(
       "div",
       {
@@ -7658,9 +7675,10 @@ var Textarea = React5.forwardRef(
                 TEXTAREA_TOKENS.field,
                 inputVariant === "white" ? TEXTAREA_TOKENS.fieldBgWhite : TEXTAREA_TOKENS.fieldBgGrey,
                 TEXTAREA_TOKENS.fieldBase,
+                !isDisabled && !isInvalid && TEXTAREA_TOKENS.fieldHover,
                 isDisabled && TEXTAREA_TOKENS.fieldDisabled,
                 isFocussed && "border-token-brand outline outline-2 outline-token-brand outline-offset-2",
-                (invalid || supportingTextType === "error") && TEXTAREA_TOKENS.fieldInvalid
+                isInvalid && TEXTAREA_TOKENS.fieldInvalid
               ),
               style: {
                 borderRadius: TEXTAREA_TOKENS.radius[input_border_radius],
@@ -8775,6 +8793,7 @@ var UI_COLOR_KEY_TO_CSS_VAR = {
   borderBrand: "--border-brand",
   borderDestructive: "--border-destructive",
   borderInput: "--border-input",
+  borderInputHover: "--border-input-hover",
   // Interaction tokens (Figma: color > interaction)
   hovOpacityPrimary: "--hov-opacity-primary",
   hovOpacitySecondary: "--hov-opacity-secondary",
@@ -9145,8 +9164,12 @@ import { Check as Check3, ChevronDown as ChevronDown3, Search } from "lucide-rea
 var SELECT_TOKENS = {
   // Main select container
   container: {
-    // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10
-    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none data-[state=open]:border-token-brand",
+    // Figma: trigger uses rounded-xl (12px), border visible, padding px-12 py-10.
+    // Hover darkens the border to match Figma (#dadada) — `data-[state=open]`
+    // and `disabled:` use higher specificity (attribute / pseudo-class) so they
+    // override the hover border when the dropdown is open or the trigger is
+    // disabled.
+    default: "rounded-[var(--rounded-xl,12px)] border border-token-input flex items-center justify-between gap-2 transition-colors hover:border-token-input-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-token-input focus-visible:outline-none data-[state=open]:border-token-brand",
     // bg variants: default = input (grey), white = card
     bgDefault: "bg-token-white",
     bgWhite: "bg-token-white",

package/dist/styles.css

@@ -1517,9 +1517,6 @@
   .lego-land .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .lego-land .py-10 {
-    padding-block: calc(var(--spacing) * 10);
-  }
   .lego-land .py-\[3px\] {
     padding-block: 3px;
   }
@@ -2160,24 +2157,12 @@
       inset: calc(var(--spacing) * 0);
     }
   }
-  .lego-land .before\:\[border-radius\:inherit\] {
-    .lego-land &::before {
-      content: var(--tw-content);
-      border-radius: inherit;
-    }
-  }
   .lego-land .before\:rounded-full {
     .lego-land &::before {
       content: var(--tw-content);
       border-radius: calc(infinity * 1px);
     }
   }
-  .lego-land .before\:bg-transparent {
-    .lego-land &::before {
-      content: var(--tw-content);
-      background-color: transparent;
-    }
-  }
   .lego-land .before\:transition-colors {
     .lego-land &::before {
       content: var(--tw-content);
@@ -2311,6 +2296,13 @@
       }
     }
   }
+  .lego-land .hover\:border-token-input-hover {
+    .lego-land &:hover {
+      @media (hover: hover) {
+        border-color: hsl(var(--border-input-hover));
+      }
+    }
+  }
   .lego-land .hover\:border-token-light {
     .lego-land &:hover {
       @media (hover: hover) {
@@ -2388,16 +2380,6 @@
       }
     }
   }
-  .lego-land .hover\:before\:bg-transparent {
-    .lego-land &:hover {
-      @media (hover: hover) {
-        &::before {
-          content: var(--tw-content);
-          background-color: transparent;
-        }
-      }
-    }
-  }
   .lego-land .hover\:after\:opacity-100 {
     .lego-land &:hover {
       @media (hover: hover) {
@@ -2531,14 +2513,6 @@
       }
     }
   }
-  .lego-land .active\:before\:bg-transparent {
-    .lego-land &:active {
-      .lego-land &::before {
-        content: var(--tw-content);
-        background-color: transparent;
-      }
-    }
-  }
   .lego-land .active\:after\:bg-black\/25 {
     .lego-land &:active {
       .lego-land &::after {
@@ -2608,6 +2582,15 @@
       opacity: 100%;
     }
   }
+  .lego-land .disabled\:hover\:border-token-input {
+    .lego-land &:disabled {
+      .lego-land &:hover {
+        @media (hover: hover) {
+          border-color: hsl(var(--border-input));
+        }
+      }
+    }
+  }
   .lego-land .disabled\:hover\:before\:bg-transparent {
     .lego-land &:disabled {
       .lego-land &:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurix/ui-component-library",
-  "version": "1.1.4-stage.117",
+  "version": "1.1.4-stage.118",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",