@fluentui/react-input - npm Package Compare versions

Comparing version 0.0.0-nightly-20240819-2052.1 to 0.0.0-nightly-20240819-2110.1

lib-commonjs/components/Input/useInputStyles.styles.js

@@ -37,35 +37,35 @@ "use strict";
     root: {
-        small: `var(--1161, var(--1162, ${_reacttheme.tokens.spacingHorizontalSNudge}))`,
-        medium: `var(--1163, var(--1164, ${_reacttheme.tokens.spacingHorizontalMNudge}))`,
-        large: `var(--1165, var(--1166, ${_reacttheme.tokens.spacingHorizontalM}))`
+        small: `var(--ctrl-token-Input-1161, var(--semantic-token-Input-1162, ${_reacttheme.tokens.spacingHorizontalSNudge}))`,
+        medium: `var(--ctrl-token-Input-1163, var(--semantic-token-Input-1164, ${_reacttheme.tokens.spacingHorizontalMNudge}))`,
+        large: `var(--ctrl-token-Input-1165, var(--semantic-token-Input-1166, ${_reacttheme.tokens.spacingHorizontalM}))`
     },
     input: {
-        small: `var(--1167, var(--1168, ${_reacttheme.tokens.spacingHorizontalXXS}))`,
-        medium: `var(--1169, var(--1170, ${_reacttheme.tokens.spacingHorizontalXXS}))`,
-        large: `var(--1171, var(--1172, ${_reacttheme.tokens.spacingHorizontalSNudge}))`
+        small: `var(--ctrl-token-Input-1167, var(--semantic-token-Input-1168, ${_reacttheme.tokens.spacingHorizontalXXS}))`,
+        medium: `var(--ctrl-token-Input-1169, var(--semantic-token-Input-1170, ${_reacttheme.tokens.spacingHorizontalXXS}))`,
+        large: `var(--ctrl-token-Input-1171, var(--semantic-token-Input-1172, ${_reacttheme.tokens.spacingHorizontalSNudge}))`
     },
     combined: {
-        small: `var(--1173, var(--1174, ${_reacttheme.tokens.spacingHorizontalS}))`,
-        medium: `var(--1175, var(--1176, ${_reacttheme.tokens.spacingHorizontalM}))`,
+        small: `var(--ctrl-token-Input-1173, var(--semantic-token-Input-1174, ${_reacttheme.tokens.spacingHorizontalS}))`,
+        medium: `var(--ctrl-token-Input-1175, var(--semantic-token-Input-1176, ${_reacttheme.tokens.spacingHorizontalM}))`,
         large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
     }
 };
-const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1grh2sf", "ryzwva6", {
+const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rxz7tky", "r1pxkfnr", {
     r: [
-        ".r1grh2sf{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--1177, var(--1178, var(--spacingHorizontalXXS)));border-radius:var(--1179, var(--1180, var(--borderRadiusMedium)));position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--1181, var(--1182, var(--colorNeutralBackground1)));border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--1183, var(--1184, var(--colorNeutralStrokeAccessible)));}",
-        ".r1grh2sf::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--1185, var(--1186, var(--borderRadiusMedium)));border-bottom-right-radius:var(--1187, var(--1188, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--1189, var(--1190, var(--durationUltraFast)));transition-delay:var(--1191, var(--1192, var(--curveAccelerateMid)));}",
-        ".r1grh2sf:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--1193, var(--1194, var(--durationNormal)));transition-delay:var(--1195, var(--1196, var(--curveDecelerateMid)));}",
-        ".r1grh2sf:focus-within:active::after{border-bottom-color:var(--1197, var(--1198, var(--colorCompoundBrandStrokePressed)));}",
-        ".r1grh2sf:focus-within{outline:2px solid transparent;}",
-        ".ryzwva6{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--1177, var(--1178, var(--spacingHorizontalXXS)));border-radius:var(--1179, var(--1180, var(--borderRadiusMedium)));position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--1181, var(--1182, var(--colorNeutralBackground1)));border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--1183, var(--1184, var(--colorNeutralStrokeAccessible)));}",
-        ".ryzwva6::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--1185, var(--1186, var(--borderRadiusMedium)));border-bottom-left-radius:var(--1187, var(--1188, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--1189, var(--1190, var(--durationUltraFast)));transition-delay:var(--1191, var(--1192, var(--curveAccelerateMid)));}",
-        ".ryzwva6:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--1193, var(--1194, var(--durationNormal)));transition-delay:var(--1195, var(--1196, var(--curveDecelerateMid)));}",
-        ".ryzwva6:focus-within:active::after{border-bottom-color:var(--1197, var(--1198, var(--colorCompoundBrandStrokePressed)));}",
-        ".ryzwva6:focus-within{outline:2px solid transparent;}"
+        ".rxz7tky{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--ctrl-token-Input-1177, var(--semantic-token-Input-1178, var(--spacingHorizontalXXS)));border-radius:var(--ctrl-token-Input-1179, var(--semantic-token-Input-1180, var(--borderRadiusMedium)));position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--ctrl-token-Input-1181, var(--semantic-token-Input-1182, var(--colorNeutralBackground1)));border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--ctrl-token-Input-1183, var(--semantic-token-Input-1184, var(--colorNeutralStrokeAccessible)));}",
+        ".rxz7tky::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--ctrl-token-Input-1185, var(--semantic-token-Input-1186, var(--borderRadiusMedium)));border-bottom-right-radius:var(--ctrl-token-Input-1187, var(--semantic-token-Input-1188, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--ctrl-token-Input-1189, var(--semantic-token-Input-1190, var(--durationUltraFast)));transition-delay:var(--ctrl-token-Input-1191, var(--semantic-token-Input-1192, var(--curveAccelerateMid)));}",
+        ".rxz7tky:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--ctrl-token-Input-1193, var(--semantic-token-Input-1194, var(--durationNormal)));transition-delay:var(--ctrl-token-Input-1195, var(--semantic-token-Input-1196, var(--curveDecelerateMid)));}",
+        ".rxz7tky:focus-within:active::after{border-bottom-color:var(--ctrl-token-Input-1197, var(--semantic-token-Input-1198, var(--colorCompoundBrandStrokePressed)));}",
+        ".rxz7tky:focus-within{outline:2px solid transparent;}",
+        ".r1pxkfnr{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--ctrl-token-Input-1177, var(--semantic-token-Input-1178, var(--spacingHorizontalXXS)));border-radius:var(--ctrl-token-Input-1179, var(--semantic-token-Input-1180, var(--borderRadiusMedium)));position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--ctrl-token-Input-1181, var(--semantic-token-Input-1182, var(--colorNeutralBackground1)));border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--ctrl-token-Input-1183, var(--semantic-token-Input-1184, var(--colorNeutralStrokeAccessible)));}",
+        ".r1pxkfnr::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--ctrl-token-Input-1185, var(--semantic-token-Input-1186, var(--borderRadiusMedium)));border-bottom-left-radius:var(--ctrl-token-Input-1187, var(--semantic-token-Input-1188, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--ctrl-token-Input-1189, var(--semantic-token-Input-1190, var(--durationUltraFast)));transition-delay:var(--ctrl-token-Input-1191, var(--semantic-token-Input-1192, var(--curveAccelerateMid)));}",
+        ".r1pxkfnr:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--ctrl-token-Input-1193, var(--semantic-token-Input-1194, var(--durationNormal)));transition-delay:var(--ctrl-token-Input-1195, var(--semantic-token-Input-1196, var(--curveDecelerateMid)));}",
+        ".r1pxkfnr:focus-within:active::after{border-bottom-color:var(--ctrl-token-Input-1197, var(--semantic-token-Input-1198, var(--colorCompoundBrandStrokePressed)));}",
+        ".r1pxkfnr:focus-within{outline:2px solid transparent;}"
     ],
     s: [
-        "@media screen and (prefers-reduced-motion: reduce){.r1grh2sf::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
-        "@media screen and (prefers-reduced-motion: reduce){.r1grh2sf:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
-        "@media screen and (prefers-reduced-motion: reduce){.ryzwva6::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
-        "@media screen and (prefers-reduced-motion: reduce){.ryzwva6:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
+        "@media screen and (prefers-reduced-motion: reduce){.rxz7tky::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.rxz7tky:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r1pxkfnr::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r1pxkfnr:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
     ]
@@ -90,3 +90,3 @@ });
         Belr9w4: 0,
-        rmohyg: "f1ba3fve"
+        rmohyg: "f1dbl3ny"
     },
@@ -100,3 +100,3 @@ outline: {},
         ],
-        oetu4i: "f1vt527",
+        oetu4i: "f1c39zug",
         gg5e9n: [
@@ -111,3 +111,3 @@ "f1m52nbi",
         ],
-        Be8ivqh: "fsy4w5a",
+        Be8ivqh: "f4h8uvo",
         ofdepl: [
@@ -119,3 +119,3 @@ "f1hc16gm",
     underline: {
-        De3pzq: "f1daa79b",
+        De3pzq: "fenatsv",
         Beyfa6y: 0,
@@ -145,4 +145,4 @@ Bbmb7ep: 0,
     underlineInteractive: {
-        oetu4i: "f1qghu3",
-        Be8ivqh: "f1io6jh6",
+        oetu4i: "f80cfsg",
+        Be8ivqh: "f65djug",
         d9w3h3: 0,
@@ -191,18 +191,18 @@ B3778ie: 0,
     "filled-darker": {
-        De3pzq: "fwp4y1a"
+        De3pzq: "fr84mq0"
     },
     "filled-lighter": {
-        De3pzq: "fw9yp38"
+        De3pzq: "fnoxnjk"
     },
     "filled-darker-shadow": {
-        De3pzq: "f1ewisex",
-        E5pizo: "fkkrvpi"
+        De3pzq: "firbw4p",
+        E5pizo: "f1qd2go3"
     },
     "filled-lighter-shadow": {
-        De3pzq: "f1ysv3tq",
-        E5pizo: "fuioxpc"
+        De3pzq: "fhipm57",
+        E5pizo: "fjhpyl2"
     },
     disabled: {
         Bceei9c: "fdrzuqr",
-        De3pzq: "fao5kib",
+        De3pzq: "f1x2ixn0",
         g2u3we: "f1jj8ep1",
@@ -233,4 +233,4 @@ h3c5rm: [
         uwmqm3: [
-            "f16mg5qk",
-            "f1tll75a"
+            "f1gi06k9",
+            "f1sh64g6"
         ]
@@ -240,4 +240,4 @@ },
         z189sj: [
-            "f1tll75a",
-            "f16mg5qk"
+            "f1sh64g6",
+            "f1gi06k9"
         ]
@@ -247,4 +247,4 @@ },
         uwmqm3: [
-            "f1dae19p",
-            "fcuphwr"
+            "fr46yjq",
+            "fjuy6un"
         ]
@@ -254,4 +254,4 @@ },
         z189sj: [
-            "fcuphwr",
-            "f1dae19p"
+            "fjuy6un",
+            "fr46yjq"
         ]
@@ -261,4 +261,4 @@ },
         uwmqm3: [
-            "fmsnanv",
-            "f87jv64"
+            "fx4zp3i",
+            "fpc2r8r"
         ]
@@ -268,4 +268,4 @@ },
         z189sj: [
-            "f87jv64",
-            "fmsnanv"
+            "fpc2r8r",
+            "fx4zp3i"
         ]
@@ -284,3 +284,3 @@ }
         [
-            ".f1ba3fve{gap:var(--1199, var(--1200, var(--spacingHorizontalSNudge)));}",
+            ".f1dbl3ny{gap:var(--ctrl-token-Input-1199, var(--semantic-token-Input-1200, var(--spacingHorizontalSNudge)));}",
             {
@@ -290,3 +290,3 @@ p: -1
         ],
-        ".f1daa79b{background-color:var(--1205, var(--1206, var(--colorTransparentBackground)));}",
+        ".fenatsv{background-color:var(--ctrl-token-Input-1205, var(--semantic-token-Input-1206, var(--colorTransparentBackground)));}",
         [
@@ -317,10 +317,10 @@ ".fokr779{border-radius:0;}",
         ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}",
-        ".fwp4y1a{background-color:var(--1211, var(--1212, var(--colorNeutralBackground3)));}",
-        ".fw9yp38{background-color:var(--1213, var(--1214, var(--colorNeutralBackground1)));}",
-        ".f1ewisex{background-color:var(--1215, var(--1216, var(--colorNeutralBackground3)));}",
-        ".fkkrvpi{box-shadow:var(--1217, var(--1218, var(--shadow2)));}",
-        ".f1ysv3tq{background-color:var(--1219, var(--1220, var(--colorNeutralBackground1)));}",
-        ".fuioxpc{box-shadow:var(--1221, var(--1222, var(--shadow2)));}",
+        ".fr84mq0{background-color:var(--ctrl-token-Input-1211, var(--semantic-token-Input-1212, var(--colorNeutralBackground3)));}",
+        ".fnoxnjk{background-color:var(--ctrl-token-Input-1213, var(--semantic-token-Input-1214, var(--colorNeutralBackground1)));}",
+        ".firbw4p{background-color:var(--ctrl-token-Input-1215, var(--semantic-token-Input-1216, var(--colorNeutralBackground3)));}",
+        ".f1qd2go3{box-shadow:var(--ctrl-token-Input-1217, var(--semantic-token-Input-1218, var(--shadow2)));}",
+        ".fhipm57{background-color:var(--ctrl-token-Input-1219, var(--semantic-token-Input-1220, var(--colorNeutralBackground1)));}",
+        ".fjhpyl2{box-shadow:var(--ctrl-token-Input-1221, var(--semantic-token-Input-1222, var(--shadow2)));}",
         ".fdrzuqr{cursor:not-allowed;}",
-        ".fao5kib{background-color:var(--1223, var(--1224, var(--colorTransparentBackground)));}",
+        ".f1x2ixn0{background-color:var(--ctrl-token-Input-1223, var(--semantic-token-Input-1224, var(--colorTransparentBackground)));}",
         ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}",
@@ -331,8 +331,8 @@ ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
         ".fhr9occ::after{content:unset;}",
-        ".f16mg5qk{padding-left:var(--1161, var(--1162, var(--spacingHorizontalSNudge)));}",
-        ".f1tll75a{padding-right:var(--1161, var(--1162, var(--spacingHorizontalSNudge)));}",
-        ".f1dae19p{padding-left:var(--1163, var(--1164, var(--spacingHorizontalMNudge)));}",
-        ".fcuphwr{padding-right:var(--1163, var(--1164, var(--spacingHorizontalMNudge)));}",
-        ".fmsnanv{padding-left:var(--1165, var(--1166, var(--spacingHorizontalM)));}",
-        ".f87jv64{padding-right:var(--1165, var(--1166, var(--spacingHorizontalM)));}"
+        ".f1gi06k9{padding-left:var(--ctrl-token-Input-1161, var(--semantic-token-Input-1162, var(--spacingHorizontalSNudge)));}",
+        ".f1sh64g6{padding-right:var(--ctrl-token-Input-1161, var(--semantic-token-Input-1162, var(--spacingHorizontalSNudge)));}",
+        ".fr46yjq{padding-left:var(--ctrl-token-Input-1163, var(--semantic-token-Input-1164, var(--spacingHorizontalMNudge)));}",
+        ".fjuy6un{padding-right:var(--ctrl-token-Input-1163, var(--semantic-token-Input-1164, var(--spacingHorizontalMNudge)));}",
+        ".fx4zp3i{padding-left:var(--ctrl-token-Input-1165, var(--semantic-token-Input-1166, var(--spacingHorizontalM)));}",
+        ".fpc2r8r{padding-right:var(--ctrl-token-Input-1165, var(--semantic-token-Input-1166, var(--spacingHorizontalM)));}"
     ],
@@ -343,4 +343,4 @@ h: [
         ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
-        ".f1vt527:hover{border-bottom-color:var(--1201, var(--1202, var(--colorNeutralStrokeAccessibleHover)));}",
-        ".f1qghu3:hover{border-bottom-color:var(--1207, var(--1208, var(--colorNeutralStrokeAccessibleHover)));}",
+        ".f1c39zug:hover{border-bottom-color:var(--ctrl-token-Input-1201, var(--semantic-token-Input-1202, var(--colorNeutralStrokeAccessibleHover)));}",
+        ".f80cfsg:hover{border-bottom-color:var(--ctrl-token-Input-1207, var(--semantic-token-Input-1208, var(--colorNeutralStrokeAccessibleHover)));}",
         ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}",
@@ -355,4 +355,4 @@ ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}",
         ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}",
-        ".fsy4w5a:active,.fsy4w5a:focus-within{border-bottom-color:var(--1203, var(--1204, var(--colorNeutralStrokeAccessiblePressed)));}",
-        ".f1io6jh6:active,.f1io6jh6:focus-within{border-bottom-color:var(--1209, var(--1210, var(--colorNeutralStrokeAccessiblePressed)));}"
+        ".f4h8uvo:active,.f4h8uvo:focus-within{border-bottom-color:var(--ctrl-token-Input-1203, var(--semantic-token-Input-1204, var(--colorNeutralStrokeAccessiblePressed)));}",
+        ".f65djug:active,.f65djug:focus-within{border-bottom-color:var(--ctrl-token-Input-1209, var(--semantic-token-Input-1210, var(--colorNeutralStrokeAccessiblePressed)));}"
     ],
@@ -383,7 +383,7 @@ m: [
 });
-const useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r6hcd08", null, [
-    ".r6hcd08{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--1175, var(--1176, var(--spacingHorizontalM)));color:var(--1225, var(--1226, var(--colorNeutralForeground1)));background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}",
-    ".r6hcd08::-webkit-input-placeholder{color:var(--1227, var(--1228, var(--colorNeutralForeground4)));opacity:1;}",
-    ".r6hcd08::-moz-placeholder{color:var(--1227, var(--1228, var(--colorNeutralForeground4)));opacity:1;}",
-    ".r6hcd08::placeholder{color:var(--1227, var(--1228, var(--colorNeutralForeground4)));opacity:1;}"
+const useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rrkfd51", null, [
+    ".rrkfd51{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--ctrl-token-Input-1175, var(--semantic-token-Input-1176, var(--spacingHorizontalM)));color:var(--ctrl-token-Input-1225, var(--semantic-token-Input-1226, var(--colorNeutralForeground1)));background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}",
+    ".rrkfd51::-webkit-input-placeholder{color:var(--ctrl-token-Input-1227, var(--semantic-token-Input-1228, var(--colorNeutralForeground4)));opacity:1;}",
+    ".rrkfd51::-moz-placeholder{color:var(--ctrl-token-Input-1227, var(--semantic-token-Input-1228, var(--colorNeutralForeground4)));opacity:1;}",
+    ".rrkfd51::placeholder{color:var(--ctrl-token-Input-1227, var(--semantic-token-Input-1228, var(--colorNeutralForeground4)));opacity:1;}"
 ]);
@@ -393,8 +393,8 @@ const useInputElementStyles = /*#__PURE__*/ (0, _react.__styles)({
         uwmqm3: [
-            "f6rveat",
-            "f17pk21u"
+            "fjpb4ze",
+            "f6s974m"
         ],
         z189sj: [
-            "f17pk21u",
-            "f6rveat"
+            "f6s974m",
+            "fjpb4ze"
         ]
@@ -415,4 +415,4 @@ },
         uwmqm3: [
-            "fs3cm15",
-            "fqln7e6"
+            "f2fbgjj",
+            "f19ekccd"
         ]
@@ -422,4 +422,4 @@ },
         z189sj: [
-            "fqln7e6",
-            "fs3cm15"
+            "f19ekccd",
+            "f2fbgjj"
         ]
@@ -429,4 +429,4 @@ },
         uwmqm3: [
-            "f1hohiae",
-            "fi4l4em"
+            "f1h1yrnp",
+            "f113ezw7"
         ]
@@ -436,4 +436,4 @@ },
         z189sj: [
-            "fi4l4em",
-            "f1hohiae"
+            "f113ezw7",
+            "f1h1yrnp"
         ]
@@ -443,4 +443,4 @@ },
         uwmqm3: [
-            "f1kaxvy5",
-            "fq56ish"
+            "f1qgv7hw",
+            "fsjjqxh"
         ]
@@ -450,38 +450,38 @@ },
         z189sj: [
-            "fq56ish",
-            "f1kaxvy5"
+            "fsjjqxh",
+            "f1qgv7hw"
         ]
     },
     disabled: {
-        sj55zd: "fdh7uy3",
-        De3pzq: "f1kanix7",
+        sj55zd: "fe03xyk",
+        De3pzq: "ff5vc94",
         Bceei9c: "fdrzuqr",
-        yvdlaj: "fayqwke"
+        yvdlaj: "fbbb829"
     }
 }, {
     d: [
-        ".f6rveat{padding-left:var(--1173, var(--1174, var(--spacingHorizontalS)));}",
-        ".f17pk21u{padding-right:var(--1173, var(--1174, var(--spacingHorizontalS)));}",
+        ".fjpb4ze{padding-left:var(--ctrl-token-Input-1173, var(--semantic-token-Input-1174, var(--spacingHorizontalS)));}",
+        ".f6s974m{padding-right:var(--ctrl-token-Input-1173, var(--semantic-token-Input-1174, var(--spacingHorizontalS)));}",
         ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
         ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
-        ".fs3cm15{padding-left:var(--1167, var(--1168, var(--spacingHorizontalXXS)));}",
-        ".fqln7e6{padding-right:var(--1167, var(--1168, var(--spacingHorizontalXXS)));}",
-        ".f1hohiae{padding-left:var(--1169, var(--1170, var(--spacingHorizontalXXS)));}",
-        ".fi4l4em{padding-right:var(--1169, var(--1170, var(--spacingHorizontalXXS)));}",
-        ".f1kaxvy5{padding-left:var(--1171, var(--1172, var(--spacingHorizontalSNudge)));}",
-        ".fq56ish{padding-right:var(--1171, var(--1172, var(--spacingHorizontalSNudge)));}",
-        ".fdh7uy3{color:var(--1229, var(--1230, var(--colorNeutralForegroundDisabled)));}",
-        ".f1kanix7{background-color:var(--1231, var(--1232, var(--colorTransparentBackground)));}",
+        ".f2fbgjj{padding-left:var(--ctrl-token-Input-1167, var(--semantic-token-Input-1168, var(--spacingHorizontalXXS)));}",
+        ".f19ekccd{padding-right:var(--ctrl-token-Input-1167, var(--semantic-token-Input-1168, var(--spacingHorizontalXXS)));}",
+        ".f1h1yrnp{padding-left:var(--ctrl-token-Input-1169, var(--semantic-token-Input-1170, var(--spacingHorizontalXXS)));}",
+        ".f113ezw7{padding-right:var(--ctrl-token-Input-1169, var(--semantic-token-Input-1170, var(--spacingHorizontalXXS)));}",
+        ".f1qgv7hw{padding-left:var(--ctrl-token-Input-1171, var(--semantic-token-Input-1172, var(--spacingHorizontalSNudge)));}",
+        ".fsjjqxh{padding-right:var(--ctrl-token-Input-1171, var(--semantic-token-Input-1172, var(--spacingHorizontalSNudge)));}",
+        ".fe03xyk{color:var(--ctrl-token-Input-1229, var(--semantic-token-Input-1230, var(--colorNeutralForegroundDisabled)));}",
+        ".ff5vc94{background-color:var(--ctrl-token-Input-1231, var(--semantic-token-Input-1232, var(--colorTransparentBackground)));}",
         ".fdrzuqr{cursor:not-allowed;}",
-        ".fayqwke::-webkit-input-placeholder{color:var(--1233, var(--1234, var(--colorNeutralForegroundDisabled)));}",
-        ".fayqwke::-moz-placeholder{color:var(--1233, var(--1234, var(--colorNeutralForegroundDisabled)));}"
+        ".fbbb829::-webkit-input-placeholder{color:var(--ctrl-token-Input-1233, var(--semantic-token-Input-1234, var(--colorNeutralForegroundDisabled)));}",
+        ".fbbb829::-moz-placeholder{color:var(--ctrl-token-Input-1233, var(--semantic-token-Input-1234, var(--colorNeutralForegroundDisabled)));}"
     ]
 });
-const useContentClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r2c3t85", null, [
-    ".r2c3t85{box-sizing:border-box;color:var(--1235, var(--1236, var(--colorNeutralForeground3)));display:flex;}",
-    ".r2c3t85>svg{font-size:20px;}"
+const useContentClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1gfwkby", null, [
+    ".r1gfwkby{box-sizing:border-box;color:var(--ctrl-token-Input-1235, var(--semantic-token-Input-1236, var(--colorNeutralForeground3)));display:flex;}",
+    ".r1gfwkby>svg{font-size:20px;}"
 ]);
 const useContentStyles = /*#__PURE__*/ (0, _react.__styles)({
     disabled: {
-        sj55zd: "feljvm6"
+        sj55zd: "f7ltwrj"
     },
@@ -497,3 +497,3 @@ small: {
     d: [
-        ".feljvm6{color:var(--1237, var(--1238, var(--colorNeutralForegroundDisabled)));}",
+        ".f7ltwrj{color:var(--ctrl-token-Input-1237, var(--semantic-token-Input-1238, var(--colorNeutralForegroundDisabled)));}",
         ".f3qv9w>svg{font-size:16px;}",
@@ -500,0 +500,0 @@ ".f16u2scb>svg{font-size:24px;}"

lib/components/Input/useInputStyles.styles.js

@@ -19,20 +19,20 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
   root: {
-    small: `var(--1161, var(--1162, ${tokens.spacingHorizontalSNudge}))`,
-    medium: `var(--1163, var(--1164, ${tokens.spacingHorizontalMNudge}))`,
-    large: `var(--1165, var(--1166, ${tokens.spacingHorizontalM}))`
+    small: `var(--ctrl-token-Input-1161, var(--semantic-token-Input-1162, ${tokens.spacingHorizontalSNudge}))`,
+    medium: `var(--ctrl-token-Input-1163, var(--semantic-token-Input-1164, ${tokens.spacingHorizontalMNudge}))`,
+    large: `var(--ctrl-token-Input-1165, var(--semantic-token-Input-1166, ${tokens.spacingHorizontalM}))`
   },
   input: {
-    small: `var(--1167, var(--1168, ${tokens.spacingHorizontalXXS}))`,
-    medium: `var(--1169, var(--1170, ${tokens.spacingHorizontalXXS}))`,
-    large: `var(--1171, var(--1172, ${tokens.spacingHorizontalSNudge}))`
+    small: `var(--ctrl-token-Input-1167, var(--semantic-token-Input-1168, ${tokens.spacingHorizontalXXS}))`,
+    medium: `var(--ctrl-token-Input-1169, var(--semantic-token-Input-1170, ${tokens.spacingHorizontalXXS}))`,
+    large: `var(--ctrl-token-Input-1171, var(--semantic-token-Input-1172, ${tokens.spacingHorizontalSNudge}))`
   },
   combined: {
-    small: `var(--1173, var(--1174, ${tokens.spacingHorizontalS}))`,
-    medium: `var(--1175, var(--1176, ${tokens.spacingHorizontalM}))`,
+    small: `var(--ctrl-token-Input-1173, var(--semantic-token-Input-1174, ${tokens.spacingHorizontalS}))`,
+    medium: `var(--ctrl-token-Input-1175, var(--semantic-token-Input-1176, ${tokens.spacingHorizontalM}))`,
     large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
   }
 };
-const useRootClassName = /*#__PURE__*/__resetStyles("r1grh2sf", "ryzwva6", {
-  r: [".r1grh2sf{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--1177, var(--1178, var(--spacingHorizontalXXS)));border-radius:var(--1179, var(--1180, var(--borderRadiusMedium)));position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--1181, var(--1182, var(--colorNeutralBackground1)));border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--1183, var(--1184, var(--colorNeutralStrokeAccessible)));}", ".r1grh2sf::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--1185, var(--1186, var(--borderRadiusMedium)));border-bottom-right-radius:var(--1187, var(--1188, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--1189, var(--1190, var(--durationUltraFast)));transition-delay:var(--1191, var(--1192, var(--curveAccelerateMid)));}", ".r1grh2sf:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--1193, var(--1194, var(--durationNormal)));transition-delay:var(--1195, var(--1196, var(--curveDecelerateMid)));}", ".r1grh2sf:focus-within:active::after{border-bottom-color:var(--1197, var(--1198, var(--colorCompoundBrandStrokePressed)));}", ".r1grh2sf:focus-within{outline:2px solid transparent;}", ".ryzwva6{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--1177, var(--1178, var(--spacingHorizontalXXS)));border-radius:var(--1179, var(--1180, var(--borderRadiusMedium)));position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--1181, var(--1182, var(--colorNeutralBackground1)));border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--1183, var(--1184, var(--colorNeutralStrokeAccessible)));}", ".ryzwva6::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--1185, var(--1186, var(--borderRadiusMedium)));border-bottom-left-radius:var(--1187, var(--1188, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--1189, var(--1190, var(--durationUltraFast)));transition-delay:var(--1191, var(--1192, var(--curveAccelerateMid)));}", ".ryzwva6:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--1193, var(--1194, var(--durationNormal)));transition-delay:var(--1195, var(--1196, var(--curveDecelerateMid)));}", ".ryzwva6:focus-within:active::after{border-bottom-color:var(--1197, var(--1198, var(--colorCompoundBrandStrokePressed)));}", ".ryzwva6:focus-within{outline:2px solid transparent;}"],
-  s: ["@media screen and (prefers-reduced-motion: reduce){.r1grh2sf::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1grh2sf:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.ryzwva6::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.ryzwva6:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"]
+const useRootClassName = /*#__PURE__*/__resetStyles("rxz7tky", "r1pxkfnr", {
+  r: [".rxz7tky{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--ctrl-token-Input-1177, var(--semantic-token-Input-1178, var(--spacingHorizontalXXS)));border-radius:var(--ctrl-token-Input-1179, var(--semantic-token-Input-1180, var(--borderRadiusMedium)));position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--ctrl-token-Input-1181, var(--semantic-token-Input-1182, var(--colorNeutralBackground1)));border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--ctrl-token-Input-1183, var(--semantic-token-Input-1184, var(--colorNeutralStrokeAccessible)));}", ".rxz7tky::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--ctrl-token-Input-1185, var(--semantic-token-Input-1186, var(--borderRadiusMedium)));border-bottom-right-radius:var(--ctrl-token-Input-1187, var(--semantic-token-Input-1188, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--ctrl-token-Input-1189, var(--semantic-token-Input-1190, var(--durationUltraFast)));transition-delay:var(--ctrl-token-Input-1191, var(--semantic-token-Input-1192, var(--curveAccelerateMid)));}", ".rxz7tky:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--ctrl-token-Input-1193, var(--semantic-token-Input-1194, var(--durationNormal)));transition-delay:var(--ctrl-token-Input-1195, var(--semantic-token-Input-1196, var(--curveDecelerateMid)));}", ".rxz7tky:focus-within:active::after{border-bottom-color:var(--ctrl-token-Input-1197, var(--semantic-token-Input-1198, var(--colorCompoundBrandStrokePressed)));}", ".rxz7tky:focus-within{outline:2px solid transparent;}", ".r1pxkfnr{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--ctrl-token-Input-1177, var(--semantic-token-Input-1178, var(--spacingHorizontalXXS)));border-radius:var(--ctrl-token-Input-1179, var(--semantic-token-Input-1180, var(--borderRadiusMedium)));position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--ctrl-token-Input-1181, var(--semantic-token-Input-1182, var(--colorNeutralBackground1)));border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--ctrl-token-Input-1183, var(--semantic-token-Input-1184, var(--colorNeutralStrokeAccessible)));}", ".r1pxkfnr::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--ctrl-token-Input-1185, var(--semantic-token-Input-1186, var(--borderRadiusMedium)));border-bottom-left-radius:var(--ctrl-token-Input-1187, var(--semantic-token-Input-1188, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--ctrl-token-Input-1189, var(--semantic-token-Input-1190, var(--durationUltraFast)));transition-delay:var(--ctrl-token-Input-1191, var(--semantic-token-Input-1192, var(--curveAccelerateMid)));}", ".r1pxkfnr:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--ctrl-token-Input-1193, var(--semantic-token-Input-1194, var(--durationNormal)));transition-delay:var(--ctrl-token-Input-1195, var(--semantic-token-Input-1196, var(--curveDecelerateMid)));}", ".r1pxkfnr:focus-within:active::after{border-bottom-color:var(--ctrl-token-Input-1197, var(--semantic-token-Input-1198, var(--colorCompoundBrandStrokePressed)));}", ".r1pxkfnr:focus-within{outline:2px solid transparent;}"],
+  s: ["@media screen and (prefers-reduced-motion: reduce){.rxz7tky::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.rxz7tky:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1pxkfnr::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1pxkfnr:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"]
 });
@@ -56,3 +56,3 @@ const useRootStyles = /*#__PURE__*/__styles({
     Belr9w4: 0,
-    rmohyg: "f1ba3fve"
+    rmohyg: "f1dbl3ny"
   },
@@ -63,11 +63,11 @@ outline: {},
     Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
-    oetu4i: "f1vt527",
+    oetu4i: "f1c39zug",
     gg5e9n: ["f1m52nbi", "f1ub3y4t"],
     Drbcw7: "f8vnjqi",
     udz0bu: ["fz1etlk", "f1hc16gm"],
-    Be8ivqh: "fsy4w5a",
+    Be8ivqh: "f4h8uvo",
     ofdepl: ["f1hc16gm", "fz1etlk"]
   },
   underline: {
-    De3pzq: "f1daa79b",
+    De3pzq: "fenatsv",
     Beyfa6y: 0,
@@ -85,4 +85,4 @@ Bbmb7ep: 0,
   underlineInteractive: {
-    oetu4i: "f1qghu3",
-    Be8ivqh: "f1io6jh6",
+    oetu4i: "f80cfsg",
+    Be8ivqh: "f65djug",
     d9w3h3: 0,
@@ -113,18 +113,18 @@ B3778ie: 0,
   "filled-darker": {
-    De3pzq: "fwp4y1a"
+    De3pzq: "fr84mq0"
   },
   "filled-lighter": {
-    De3pzq: "fw9yp38"
+    De3pzq: "fnoxnjk"
   },
   "filled-darker-shadow": {
-    De3pzq: "f1ewisex",
-    E5pizo: "fkkrvpi"
+    De3pzq: "firbw4p",
+    E5pizo: "f1qd2go3"
   },
   "filled-lighter-shadow": {
-    De3pzq: "f1ysv3tq",
-    E5pizo: "fuioxpc"
+    De3pzq: "fhipm57",
+    E5pizo: "fjhpyl2"
   },
   disabled: {
     Bceei9c: "fdrzuqr",
-    De3pzq: "fao5kib",
+    De3pzq: "f1x2ixn0",
     g2u3we: "f1jj8ep1",
@@ -142,29 +142,29 @@ h3c5rm: ["f15xbau", "fy0fskl"],
   smallWithContentBefore: {
-    uwmqm3: ["f16mg5qk", "f1tll75a"]
+    uwmqm3: ["f1gi06k9", "f1sh64g6"]
   },
   smallWithContentAfter: {
-    z189sj: ["f1tll75a", "f16mg5qk"]
+    z189sj: ["f1sh64g6", "f1gi06k9"]
   },
   mediumWithContentBefore: {
-    uwmqm3: ["f1dae19p", "fcuphwr"]
+    uwmqm3: ["fr46yjq", "fjuy6un"]
   },
   mediumWithContentAfter: {
-    z189sj: ["fcuphwr", "f1dae19p"]
+    z189sj: ["fjuy6un", "fr46yjq"]
   },
   largeWithContentBefore: {
-    uwmqm3: ["fmsnanv", "f87jv64"]
+    uwmqm3: ["fx4zp3i", "fpc2r8r"]
   },
   largeWithContentAfter: {
-    z189sj: ["f87jv64", "fmsnanv"]
+    z189sj: ["fpc2r8r", "fx4zp3i"]
   }
 }, {
-  d: [".f1pha7fy{min-height:24px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", [".f1ba3fve{gap:var(--1199, var(--1200, var(--spacingHorizontalSNudge)));}", {
+  d: [".f1pha7fy{min-height:24px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", [".f1dbl3ny{gap:var(--ctrl-token-Input-1199, var(--semantic-token-Input-1200, var(--spacingHorizontalSNudge)));}", {
     p: -1
-  }], ".f1daa79b{background-color:var(--1205, var(--1206, var(--colorTransparentBackground)));}", [".fokr779{border-radius:0;}", {
+  }], ".fenatsv{background-color:var(--ctrl-token-Input-1205, var(--semantic-token-Input-1206, var(--colorTransparentBackground)));}", [".fokr779{border-radius:0;}", {
     p: -1
   }], ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", [".f2ale1x::after{border-radius:0;}", {
     p: -1
-  }], ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fwp4y1a{background-color:var(--1211, var(--1212, var(--colorNeutralBackground3)));}", ".fw9yp38{background-color:var(--1213, var(--1214, var(--colorNeutralBackground1)));}", ".f1ewisex{background-color:var(--1215, var(--1216, var(--colorNeutralBackground3)));}", ".fkkrvpi{box-shadow:var(--1217, var(--1218, var(--shadow2)));}", ".f1ysv3tq{background-color:var(--1219, var(--1220, var(--colorNeutralBackground1)));}", ".fuioxpc{box-shadow:var(--1221, var(--1222, var(--shadow2)));}", ".fdrzuqr{cursor:not-allowed;}", ".fao5kib{background-color:var(--1223, var(--1224, var(--colorTransparentBackground)));}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fhr9occ::after{content:unset;}", ".f16mg5qk{padding-left:var(--1161, var(--1162, var(--spacingHorizontalSNudge)));}", ".f1tll75a{padding-right:var(--1161, var(--1162, var(--spacingHorizontalSNudge)));}", ".f1dae19p{padding-left:var(--1163, var(--1164, var(--spacingHorizontalMNudge)));}", ".fcuphwr{padding-right:var(--1163, var(--1164, var(--spacingHorizontalMNudge)));}", ".fmsnanv{padding-left:var(--1165, var(--1166, var(--spacingHorizontalM)));}", ".f87jv64{padding-right:var(--1165, var(--1166, var(--spacingHorizontalM)));}"],
-  h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1vt527:hover{border-bottom-color:var(--1201, var(--1202, var(--colorNeutralStrokeAccessibleHover)));}", ".f1qghu3:hover{border-bottom-color:var(--1207, var(--1208, var(--colorNeutralStrokeAccessibleHover)));}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
-  a: [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fsy4w5a:active,.fsy4w5a:focus-within{border-bottom-color:var(--1203, var(--1204, var(--colorNeutralStrokeAccessiblePressed)));}", ".f1io6jh6:active,.f1io6jh6:focus-within{border-bottom-color:var(--1209, var(--1210, var(--colorNeutralStrokeAccessiblePressed)));}"],
+  }], ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fr84mq0{background-color:var(--ctrl-token-Input-1211, var(--semantic-token-Input-1212, var(--colorNeutralBackground3)));}", ".fnoxnjk{background-color:var(--ctrl-token-Input-1213, var(--semantic-token-Input-1214, var(--colorNeutralBackground1)));}", ".firbw4p{background-color:var(--ctrl-token-Input-1215, var(--semantic-token-Input-1216, var(--colorNeutralBackground3)));}", ".f1qd2go3{box-shadow:var(--ctrl-token-Input-1217, var(--semantic-token-Input-1218, var(--shadow2)));}", ".fhipm57{background-color:var(--ctrl-token-Input-1219, var(--semantic-token-Input-1220, var(--colorNeutralBackground1)));}", ".fjhpyl2{box-shadow:var(--ctrl-token-Input-1221, var(--semantic-token-Input-1222, var(--shadow2)));}", ".fdrzuqr{cursor:not-allowed;}", ".f1x2ixn0{background-color:var(--ctrl-token-Input-1223, var(--semantic-token-Input-1224, var(--colorTransparentBackground)));}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fhr9occ::after{content:unset;}", ".f1gi06k9{padding-left:var(--ctrl-token-Input-1161, var(--semantic-token-Input-1162, var(--spacingHorizontalSNudge)));}", ".f1sh64g6{padding-right:var(--ctrl-token-Input-1161, var(--semantic-token-Input-1162, var(--spacingHorizontalSNudge)));}", ".fr46yjq{padding-left:var(--ctrl-token-Input-1163, var(--semantic-token-Input-1164, var(--spacingHorizontalMNudge)));}", ".fjuy6un{padding-right:var(--ctrl-token-Input-1163, var(--semantic-token-Input-1164, var(--spacingHorizontalMNudge)));}", ".fx4zp3i{padding-left:var(--ctrl-token-Input-1165, var(--semantic-token-Input-1166, var(--spacingHorizontalM)));}", ".fpc2r8r{padding-right:var(--ctrl-token-Input-1165, var(--semantic-token-Input-1166, var(--spacingHorizontalM)));}"],
+  h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1c39zug:hover{border-bottom-color:var(--ctrl-token-Input-1201, var(--semantic-token-Input-1202, var(--colorNeutralStrokeAccessibleHover)));}", ".f80cfsg:hover{border-bottom-color:var(--ctrl-token-Input-1207, var(--semantic-token-Input-1208, var(--colorNeutralStrokeAccessibleHover)));}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
+  a: [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f4h8uvo:active,.f4h8uvo:focus-within{border-bottom-color:var(--ctrl-token-Input-1203, var(--semantic-token-Input-1204, var(--colorNeutralStrokeAccessiblePressed)));}", ".f65djug:active,.f65djug:focus-within{border-bottom-color:var(--ctrl-token-Input-1209, var(--semantic-token-Input-1210, var(--colorNeutralStrokeAccessiblePressed)));}"],
   m: [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
@@ -179,7 +179,7 @@ m: "(forced-colors: active)"
 });
-const useInputClassName = /*#__PURE__*/__resetStyles("r6hcd08", null, [".r6hcd08{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--1175, var(--1176, var(--spacingHorizontalM)));color:var(--1225, var(--1226, var(--colorNeutralForeground1)));background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}", ".r6hcd08::-webkit-input-placeholder{color:var(--1227, var(--1228, var(--colorNeutralForeground4)));opacity:1;}", ".r6hcd08::-moz-placeholder{color:var(--1227, var(--1228, var(--colorNeutralForeground4)));opacity:1;}", ".r6hcd08::placeholder{color:var(--1227, var(--1228, var(--colorNeutralForeground4)));opacity:1;}"]);
+const useInputClassName = /*#__PURE__*/__resetStyles("rrkfd51", null, [".rrkfd51{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--ctrl-token-Input-1175, var(--semantic-token-Input-1176, var(--spacingHorizontalM)));color:var(--ctrl-token-Input-1225, var(--semantic-token-Input-1226, var(--colorNeutralForeground1)));background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}", ".rrkfd51::-webkit-input-placeholder{color:var(--ctrl-token-Input-1227, var(--semantic-token-Input-1228, var(--colorNeutralForeground4)));opacity:1;}", ".rrkfd51::-moz-placeholder{color:var(--ctrl-token-Input-1227, var(--semantic-token-Input-1228, var(--colorNeutralForeground4)));opacity:1;}", ".rrkfd51::placeholder{color:var(--ctrl-token-Input-1227, var(--semantic-token-Input-1228, var(--colorNeutralForeground4)));opacity:1;}"]);
 const useInputElementStyles = /*#__PURE__*/__styles({
   small: {
-    uwmqm3: ["f6rveat", "f17pk21u"],
-    z189sj: ["f17pk21u", "f6rveat"]
+    uwmqm3: ["fjpb4ze", "f6s974m"],
+    z189sj: ["f6s974m", "fjpb4ze"]
   },
@@ -192,32 +192,32 @@ medium: {},
   smallWithContentBefore: {
-    uwmqm3: ["fs3cm15", "fqln7e6"]
+    uwmqm3: ["f2fbgjj", "f19ekccd"]
   },
   smallWithContentAfter: {
-    z189sj: ["fqln7e6", "fs3cm15"]
+    z189sj: ["f19ekccd", "f2fbgjj"]
   },
   mediumWithContentBefore: {
-    uwmqm3: ["f1hohiae", "fi4l4em"]
+    uwmqm3: ["f1h1yrnp", "f113ezw7"]
   },
   mediumWithContentAfter: {
-    z189sj: ["fi4l4em", "f1hohiae"]
+    z189sj: ["f113ezw7", "f1h1yrnp"]
   },
   largeWithContentBefore: {
-    uwmqm3: ["f1kaxvy5", "fq56ish"]
+    uwmqm3: ["f1qgv7hw", "fsjjqxh"]
   },
   largeWithContentAfter: {
-    z189sj: ["fq56ish", "f1kaxvy5"]
+    z189sj: ["fsjjqxh", "f1qgv7hw"]
   },
   disabled: {
-    sj55zd: "fdh7uy3",
-    De3pzq: "f1kanix7",
+    sj55zd: "fe03xyk",
+    De3pzq: "ff5vc94",
     Bceei9c: "fdrzuqr",
-    yvdlaj: "fayqwke"
+    yvdlaj: "fbbb829"
   }
 }, {
-  d: [".f6rveat{padding-left:var(--1173, var(--1174, var(--spacingHorizontalS)));}", ".f17pk21u{padding-right:var(--1173, var(--1174, var(--spacingHorizontalS)));}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fs3cm15{padding-left:var(--1167, var(--1168, var(--spacingHorizontalXXS)));}", ".fqln7e6{padding-right:var(--1167, var(--1168, var(--spacingHorizontalXXS)));}", ".f1hohiae{padding-left:var(--1169, var(--1170, var(--spacingHorizontalXXS)));}", ".fi4l4em{padding-right:var(--1169, var(--1170, var(--spacingHorizontalXXS)));}", ".f1kaxvy5{padding-left:var(--1171, var(--1172, var(--spacingHorizontalSNudge)));}", ".fq56ish{padding-right:var(--1171, var(--1172, var(--spacingHorizontalSNudge)));}", ".fdh7uy3{color:var(--1229, var(--1230, var(--colorNeutralForegroundDisabled)));}", ".f1kanix7{background-color:var(--1231, var(--1232, var(--colorTransparentBackground)));}", ".fdrzuqr{cursor:not-allowed;}", ".fayqwke::-webkit-input-placeholder{color:var(--1233, var(--1234, var(--colorNeutralForegroundDisabled)));}", ".fayqwke::-moz-placeholder{color:var(--1233, var(--1234, var(--colorNeutralForegroundDisabled)));}"]
+  d: [".fjpb4ze{padding-left:var(--ctrl-token-Input-1173, var(--semantic-token-Input-1174, var(--spacingHorizontalS)));}", ".f6s974m{padding-right:var(--ctrl-token-Input-1173, var(--semantic-token-Input-1174, var(--spacingHorizontalS)));}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f2fbgjj{padding-left:var(--ctrl-token-Input-1167, var(--semantic-token-Input-1168, var(--spacingHorizontalXXS)));}", ".f19ekccd{padding-right:var(--ctrl-token-Input-1167, var(--semantic-token-Input-1168, var(--spacingHorizontalXXS)));}", ".f1h1yrnp{padding-left:var(--ctrl-token-Input-1169, var(--semantic-token-Input-1170, var(--spacingHorizontalXXS)));}", ".f113ezw7{padding-right:var(--ctrl-token-Input-1169, var(--semantic-token-Input-1170, var(--spacingHorizontalXXS)));}", ".f1qgv7hw{padding-left:var(--ctrl-token-Input-1171, var(--semantic-token-Input-1172, var(--spacingHorizontalSNudge)));}", ".fsjjqxh{padding-right:var(--ctrl-token-Input-1171, var(--semantic-token-Input-1172, var(--spacingHorizontalSNudge)));}", ".fe03xyk{color:var(--ctrl-token-Input-1229, var(--semantic-token-Input-1230, var(--colorNeutralForegroundDisabled)));}", ".ff5vc94{background-color:var(--ctrl-token-Input-1231, var(--semantic-token-Input-1232, var(--colorTransparentBackground)));}", ".fdrzuqr{cursor:not-allowed;}", ".fbbb829::-webkit-input-placeholder{color:var(--ctrl-token-Input-1233, var(--semantic-token-Input-1234, var(--colorNeutralForegroundDisabled)));}", ".fbbb829::-moz-placeholder{color:var(--ctrl-token-Input-1233, var(--semantic-token-Input-1234, var(--colorNeutralForegroundDisabled)));}"]
 });
-const useContentClassName = /*#__PURE__*/__resetStyles("r2c3t85", null, [".r2c3t85{box-sizing:border-box;color:var(--1235, var(--1236, var(--colorNeutralForeground3)));display:flex;}", ".r2c3t85>svg{font-size:20px;}"]);
+const useContentClassName = /*#__PURE__*/__resetStyles("r1gfwkby", null, [".r1gfwkby{box-sizing:border-box;color:var(--ctrl-token-Input-1235, var(--semantic-token-Input-1236, var(--colorNeutralForeground3)));display:flex;}", ".r1gfwkby>svg{font-size:20px;}"]);
 const useContentStyles = /*#__PURE__*/__styles({
   disabled: {
-    sj55zd: "feljvm6"
+    sj55zd: "f7ltwrj"
   },
@@ -232,3 +232,3 @@ small: {
 }, {
-  d: [".feljvm6{color:var(--1237, var(--1238, var(--colorNeutralForegroundDisabled)));}", ".f3qv9w>svg{font-size:16px;}", ".f16u2scb>svg{font-size:24px;}"]
+  d: [".f7ltwrj{color:var(--ctrl-token-Input-1237, var(--semantic-token-Input-1238, var(--colorNeutralForegroundDisabled)));}", ".f3qv9w>svg{font-size:16px;}", ".f16u2scb>svg{font-size:24px;}"]
 });
@@ -235,0 +235,0 @@ /**

package.json

 {
   "name": "@fluentui/react-input",
-  "version": "0.0.0-nightly-20240819-2052.1",
+  "version": "0.0.0-nightly-20240819-2110.1",
   "description": "Fluent UI React Input component",
@@ -29,5 +29,5 @@ "main": "lib-commonjs/index.js",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20240819-2052.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2052.1",
-    "@fluentui/react-text": "0.0.0-nightly-20240819-2052.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20240819-2110.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2110.1",
+    "@fluentui/react-text": "0.0.0-nightly-20240819-2110.1",
     "@fluentui/scripts-api-extractor": "*",
@@ -37,7 +37,7 @@ "@fluentui/scripts-tasks": "*"
   "dependencies": {
-    "@fluentui/react-field": "0.0.0-nightly-20240819-2052.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2052.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240819-2052.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20240819-2052.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20240819-2052.1",
+    "@fluentui/react-field": "0.0.0-nightly-20240819-2110.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2110.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240819-2110.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20240819-2110.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20240819-2110.1",
     "@griffel/react": "^1.5.22",
@@ -44,0 +44,0 @@ "@swc/helpers": "^0.5.1"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

249559

increased by2.89%

Lines of code

1207

increased by0.84%

Published versions last months

25

increased by4.17%

Published versions last two months

48

increased by2.13%

Published versions last year

294

increased by0.34%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20240819-2110.1(transitive)

• + Added@fluentui/react-context-selector@0.0.0-nightly-20240819-2110.1(transitive)

• + Added@fluentui/react-field@0.0.0-nightly-20240819-2110.1(transitive)

• + Added@fluentui/react-jsx-runtime@0.0.0-nightly-20240819-2110.1(transitive)

• + Added@fluentui/react-label@0.0.0-nightly-20240819-2110.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly-20240819-2110.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20240819-2110.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly-20240819-2110.1(transitive)

• + Added@fluentui/tokens@0.0.0-nightly-20240819-2110.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20240819-2052.1(transitive)

• - Removed@fluentui/react-context-selector@0.0.0-nightly-20240819-2052.1(transitive)

• - Removed@fluentui/react-field@0.0.0-nightly-20240819-2052.1(transitive)

• - Removed@fluentui/react-jsx-runtime@0.0.0-nightly-20240819-2052.1(transitive)

• - Removed@fluentui/react-label@0.0.0-nightly-20240819-2052.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20240819-2052.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20240819-2052.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20240819-2052.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20240819-2052.1(transitive)

• Updated@fluentui/react-field@0.0.0-nightly-20240819-2110.1

• Updated@fluentui/react-jsx-runtime@0.0.0-nightly-20240819-2110.1

• Updated@fluentui/react-shared-contexts@0.0.0-nightly-20240819-2110.1

• Updated@fluentui/react-theme@0.0.0-nightly-20240819-2110.1

• Updated@fluentui/react-utilities@0.0.0-nightly-20240819-2110.1