@fluentui/react-input 9.0.0-beta.8 → 9.0.0-rc.3

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

@@ -3,17 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useInputStyles_unstable = exports.inputClassNames = exports.inputClassName = void 0;
+exports.useInputStyles_unstable = exports.inputClassNames = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-/**
- * @deprecated Use `inputClassNames.root` instead.
- */
-
 
-exports.inputClassName = 'fui-Input';
 exports.inputClassNames = {
   root: 'fui-Input',
   input: 'fui-Input__input',
@@ -21,32 +16,9 @@ exports.inputClassNames = {
   contentAfter: 'fui-Input__contentAfter'
 }; // TODO(sharing) use theme values once available
 
-const horizontalSpacing = {
-  xxs: '2px',
-  xs: '4px',
-  sNudge: '6px',
-  s: '8px',
-  mNudge: '10px',
-  m: '12px'
-};
-const motionDurations = {
-  ultraFast: '0.05s',
-  normal: '0.2s'
-};
-const motionCurves = {
-  accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',
-  decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)'
-};
 const contentSizes = {
-  // TODO(sharing) shouldn't these be in the theme?
-  body1: {
-    fontSize: react_theme_1.tokens.fontSizeBase300,
-    lineHeight: react_theme_1.tokens.lineHeightBase300
-  },
-  caption1: {
-    fontSize: react_theme_1.tokens.fontSizeBase200,
-    lineHeight: react_theme_1.tokens.lineHeightBase200
-  },
+  // TODO: This 400 style is not in the typography styles.
+  // May need a design change
   400: {
     fontSize: react_theme_1.tokens.fontSizeBase400,
     lineHeight: react_theme_1.tokens.lineHeightBase400
@@ -64,8 +36,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "mc9l5x": "ftuwxu6",
     "Bt984gj": "f122n59",
     "Eh141a": "flvyvdh",
-    "i8kkvl": "f16mnhsx",
-    "Belr9w4": "fbi42co",
+    "i8kkvl": "f14mj54c",
+    "Belr9w4": "fiut8dr",
     "Bahqtrf": "fk6fouc",
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -90,12 +62,12 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "Gjdm7m": "f13evtba",
     "b1kco5": "f1yk9hq",
     "Ba2ppi3": "fhwpy7i",
-    "F2fol1": "fh0z7ck",
-    "lck23g": "f117tx5t",
+    "F2fol1": "f14ee0xe",
+    "lck23g": "f1xhbsuh",
     "umuwi5": "fjw5xc1",
     "Blcqepd": "f1xdyd5c",
-    "nplu4u": "f1b9wyyr",
-    "Bioka5o": "f15goup",
+    "nplu4u": "fatpbeo",
+    "Bioka5o": "fb7uyps",
     "Bercvud": "f1ibeo51",
     "Bbr2w1p": "f14a1fxs",
     "Bduesf4": "f3e99gv",
@@ -104,31 +76,35 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
   "small": {
     "sshi5w": "f1pha7fy",
     "z8tnut": "f1g0x7ka",
-    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "z189sj": ["fdw0yi8", "fk8j09s"],
     "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
+    "uwmqm3": ["fk8j09s", "fdw0yi8"],
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "fwrc4pm"
   },
   "medium": {
     "sshi5w": "f1nxs5xn",
     "z8tnut": "f1g0x7ka",
-    "z189sj": ["f81rol6", "frdkuqy"],
+    "z189sj": ["f11gcy0p", "f1ng84yb"],
     "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["frdkuqy", "f81rol6"],
+    "uwmqm3": ["f1ng84yb", "f11gcy0p"],
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
   "large": {
     "sshi5w": "f1w5jphr",
     "z8tnut": "f1g0x7ka",
-    "z189sj": ["f11qrl6u", "fjlbh76"],
+    "z189sj": ["fw5db7e", "f1uw59to"],
     "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["fjlbh76", "f11qrl6u"],
+    "uwmqm3": ["f1uw59to", "fw5db7e"],
     "Be2twd7": "fod5ikn",
     "Bg96gwp": "faaz57k",
-    "i8kkvl": "fgfbwa2",
-    "Belr9w4": "f1y3hx6l"
+    "i8kkvl": "f1rjii52",
+    "Belr9w4": "f1r7g2jn"
   },
   "outline": {
     "De3pzq": "fxugw4r",
@@ -194,10 +170,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "nagaa4": "f1tpwn32",
     "B1yhkcb": ["fsrcdbj", "f17blpuu"]
   },
-  "filledDarker": {
+  "filled-darker": {
     "De3pzq": "f16xq7d1"
   },
-  "filledLighter": {
+  "filled-lighter": {
     "De3pzq": "fxugw4r"
   },
   "disabled": {
@@ -225,10 +201,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "n51gp8": ["f14g86mu", "f1rvyvqg"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".fh0z7ck::after{transition-duration:0.05s;}", ".f117tx5t::after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
-  "w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".f1b9wyyr:focus-within::after{transition-duration:0.2s;}", ".f15goup:focus-within::after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"],
-  "h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,:focus-within{border-right-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,:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}"],
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1cb6c3::after{border-bottom-width:2px;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  "w": [".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"],
+  "h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color: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);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
   "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
 });
 
@@ -242,9 +218,9 @@ const useInputElementStyles = /*#__PURE__*/react_1.__styles({
     "oivjwe": "f1h8hb77",
     "wvpqe5": ["f1deefiw", "f1n71otn"],
     "z8tnut": "f1g0x7ka",
-    "z189sj": ["f12huiiw", "f161knb0"],
+    "z189sj": ["ffczdla", "fgiv446"],
     "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f161knb0", "f12huiiw"],
+    "uwmqm3": ["fgiv446", "ffczdla"],
     "sj55zd": "f19n0e5",
     "De3pzq": "f3rmtva",
     "yvdlaj": "fwyc1cq",
@@ -252,20 +228,24 @@ const useInputElementStyles = /*#__PURE__*/react_1.__styles({
     "B486eqv": "f2hkw1w"
   },
   "small": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "fwrc4pm"
   },
   "medium": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
   "large": {
     "Be2twd7": "fod5ikn",
     "Bg96gwp": "faaz57k",
     "z8tnut": "f1g0x7ka",
-    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "z189sj": ["fdw0yi8", "fk8j09s"],
     "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"]
+    "uwmqm3": ["fk8j09s", "fdw0yi8"]
   },
   "disabled": {
     "sj55zd": "f1s2aq7o",
@@ -274,7 +254,7 @@ const useInputElementStyles = /*#__PURE__*/react_1.__styles({
     "yvdlaj": "fahhnxm"
   }
 }, {
-  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fy77jfu{min-width:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1g0x7ka{padding-top:0;}", ".f12huiiw{padding-right:2px;}", ".f161knb0{padding-left:2px;}", ".f1qch9an{padding-bottom:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f3rmtva{background-color:transparent;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fy77jfu{min-width:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1g0x7ka{padding-top:0;}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f1qch9an{padding-bottom:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f3rmtva{background-color:transparent;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
 

package/lib-commonjs/components/Input/useInputStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `inputClassNames.root` instead.\n */\nexport const inputClassName = 'fui-Input';\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n  xxs: '2px',\n  xs: '4px',\n  sNudge: '6px',\n  s: '8px',\n  mNudge: '10px',\n  m: '12px',\n};\nconst motionDurations = {\n  ultraFast: '0.05s',\n  normal: '0.2s',\n};\nconst motionCurves = {\n  accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n  decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n};\nconst contentSizes = {\n  // TODO(sharing) shouldn't these be in the theme?\n  body1: {\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  caption1: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  400: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexWrap: 'nowrap',\n    ...shorthands.gap(horizontalSpacing.xxs),\n    fontFamily: tokens.fontFamilyBase,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n    position: 'relative',\n    boxSizing: 'border-box',\n  },\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n      // Animation for focus OUT\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: motionDurations.ultraFast,\n      transitionDelay: motionCurves.accelerateMid,\n    },\n    ':focus-within::after': {\n      // Animation for focus IN\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: motionDurations.normal,\n      transitionDelay: motionCurves.decelerateMid,\n    },\n    ':focus-within:active::after': {\n      // This is if the user clicks the field again while it's already focused\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  small: {\n    minHeight: fieldHeights.small,\n    ...shorthands.padding('0', horizontalSpacing.sNudge),\n    ...contentSizes.caption1,\n  },\n  medium: {\n    minHeight: fieldHeights.medium,\n    ...shorthands.padding('0', horizontalSpacing.mNudge),\n    ...contentSizes.body1,\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    ...shorthands.padding('0', horizontalSpacing.m),\n    ...contentSizes[400],\n    ...shorthands.gap(horizontalSpacing.sNudge),\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderRadius(0), // corners look strange if rounded\n    ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n  },\n  underlineInteractive: {\n    ':hover': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n    '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n  },\n  filled: {\n    boxShadow: tokens.shadow2, // optional shadow for filled appearances\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      // also handles pressed border color (:active)\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  filledDarker: {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  filledLighter: {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputElementStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    flexGrow: 1,\n    minWidth: 0, // required to make the input shrink to fit the wrapper\n    ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n    ...shorthands.padding('0', horizontalSpacing.xxs),\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1, // browser style override\n    },\n    ':focus-visible': {\n      outlineStyle: 'none', // disable default browser outline\n    },\n  },\n  small: {\n    // This is set on root but doesn't inherit\n    ...contentSizes.caption1,\n  },\n  medium: {\n    ...contentSizes.body1,\n  },\n  large: {\n    ...contentSizes[400],\n    ...shorthands.padding('0', horizontalSpacing.sNudge),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useContentStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n    // special case styling for icons (most common case) to ensure they're centered vertically\n    '> svg': { display: 'block' },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  // Ensure resizable icons show up with the proper font size\n  small: {\n    '> svg': { fontSize: '16px' },\n  },\n  medium: {\n    '> svg': { fontSize: '20px' },\n  },\n  large: {\n    '> svg': { fontSize: '24px' },\n  },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n  const { size, appearance } = state;\n  const disabled = state.input.disabled;\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    inputClassNames.root,\n    rootStyles.base,\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst contentSizes = {\n  // TODO: This 400 style is not in the typography styles.\n  // May need a design change\n  400: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexWrap: 'nowrap',\n    ...shorthands.gap(tokens.spacingHorizontalXXS),\n    fontFamily: tokens.fontFamilyBase,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n    position: 'relative',\n    boxSizing: 'border-box',\n  },\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n      // Animation for focus OUT\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n    },\n    ':focus-within::after': {\n      // Animation for focus IN\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n    },\n    ':focus-within:active::after': {\n      // This is if the user clicks the field again while it's already focused\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  small: {\n    minHeight: fieldHeights.small,\n    ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: fieldHeights.medium,\n    ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    ...shorthands.padding('0', tokens.spacingHorizontalM),\n    ...contentSizes[400],\n    ...shorthands.gap(tokens.spacingHorizontalSNudge),\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderRadius(0), // corners look strange if rounded\n    ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n  },\n  underlineInteractive: {\n    ':hover': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n    '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n  },\n  filled: {\n    boxShadow: tokens.shadow2, // optional shadow for filled appearances\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      // also handles pressed border color (:active)\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputElementStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    flexGrow: 1,\n    minWidth: 0, // required to make the input shrink to fit the wrapper\n    ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n    ...shorthands.padding('0', tokens.spacingHorizontalXXS),\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1, // browser style override\n    },\n    ':focus-visible': {\n      outlineStyle: 'none', // disable default browser outline\n    },\n  },\n  small: {\n    // This is set on root but doesn't inherit\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    ...typographyStyles.body1,\n  },\n  large: {\n    ...contentSizes[400],\n    ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useContentStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n    // special case styling for icons (most common case) to ensure they're centered vertically\n    '> svg': { display: 'block' },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  // Ensure resizable icons show up with the proper font size\n  small: {\n    '> svg': { fontSize: '16px' },\n  },\n  medium: {\n    '> svg': { fontSize: '20px' },\n  },\n  large: {\n    '> svg': { fontSize: '24px' },\n  },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n  const { size, appearance } = state;\n  const disabled = state.input.disabled;\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    inputClassNames.root,\n    rootStyles.base,\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useInput_unstable = exports.useInputStyles_unstable = exports.renderInput_unstable = exports.inputClassNames = exports.inputClassName = exports.Input = void 0;
+exports.useInput_unstable = exports.useInputStyles_unstable = exports.renderInput_unstable = exports.inputClassNames = exports.Input = void 0;
 
 var Input_1 = /*#__PURE__*/require("./Input");
 
@@ -12,13 +12,6 @@ Object.defineProperty(exports, "Input", {
   get: function () {
     return Input_1.Input;
   }
-}); // eslint-disable-next-line deprecation/deprecation
-
-Object.defineProperty(exports, "inputClassName", {
-  enumerable: true,
-  get: function () {
-    return Input_1.inputClassName;
-  }
 });
 Object.defineProperty(exports, "inputClassNames", {
   enumerable: true,

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,cAAA;AAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA","sourcesContent":["export {\n  Input,\n  // eslint-disable-next-line deprecation/deprecation\n  inputClassName,\n  inputClassNames,\n  renderInput_unstable,\n  useInputStyles_unstable,\n  useInput_unstable,\n} from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA","sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.0.0-beta.8",
+  "version": "9.0.0-rc.3",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -28,13 +28,14 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.7",
+    "@fluentui/react-text": "9.0.0-rc.10",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-theme": "9.0.0-rc.6",
-    "@fluentui/react-utilities": "9.0.0-rc.7",
-    "@griffel/react": "1.0.3",
+    "@fluentui/react-theme": "9.0.0-rc.9",
+    "@fluentui/react-utilities": "9.0.0-rc.9",
+    "@griffel/react": "1.0.5",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/lib/Input.d.ts

@@ -1 +0,0 @@
-export * from './components/Input/index';

package/lib/components/Input/Input.d.ts

@@ -1,6 +0,0 @@
-import type { InputProps } from './Input.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * The Input component allows people to enter and edit text.
- */
-export declare const Input: ForwardRefComponent<InputProps>;

package/lib/components/Input/Input.types.d.ts

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-export declare type InputSlots = {
-    /**
-     * Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.
-     * (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)
-     *
-     * The root slot receives the `className` and `style` specified directly on the `<Input>`.
-     * All other top-level native props will be applied to the primary slot, `input`.
-     */
-    root: NonNullable<Slot<'span'>>;
-    /**
-     * The actual `<input>` element. `type="text"` will be automatically applied unless overridden.
-     *
-     * This is the "primary" slot, so native props specified directly on the `<Input>` will go here
-     * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will
-     * also go here.
-     */
-    input: NonNullable<Slot<'input'>>;
-    /** Element before the input text, within the input border */
-    contentBefore?: Slot<'span'>;
-    /** Element after the input text, within the input border */
-    contentAfter?: Slot<'span'>;
-};
-export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & {
-    /** Input can't have children. */
-    children?: never;
-    /**
-     * Size of the input (changes the font size and spacing).
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Controls the colors and borders of the input.
-     * @default 'outline'
-     */
-    appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
-    /**
-     * Default value of the input. Provide this if the input should be an uncontrolled component
-     * which tracks its current state internally; otherwise, use `value`.
-     *
-     * (This prop is mutually exclusive with `value`.)
-     */
-    defaultValue?: string;
-    /**
-     * Current value of the input. Provide this if the input is a controlled component where you
-     * are maintaining its current state; otherwise, use `defaultValue`.
-     *
-     * (This prop is mutually exclusive with `defaultValue`.)
-     */
-    value?: string;
-    /**
-     * Called when the user changes the input's value.
-     */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
-    /**
-     * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
-     * based on the type of value the user will enter.
-     *
-     * Note that no custom styling is currently applied for alternative types, and some types may
-     * activate browser-default styling which does not match the Fluent design language.
-     *
-     * (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an
-     * `<input>` element instead.)
-     * @default 'text'
-     */
-    type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'number' | 'time' | 'week';
-};
-/**
- * State used in rendering Input.
- */
-export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
-/**
- * Data passed to the `onChange` callback when a user changes the input's value.
- */
-export declare type InputOnChangeData = {
-    /** Updated input value from the user */
-    value: string;
-};

package/lib/components/Input/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Input';
-export * from './Input.types';
-export * from './renderInput';
-export * from './useInput';
-export * from './useInputStyles';

package/lib/components/Input/renderInput.d.ts

@@ -1,5 +0,0 @@
-import type { InputState } from './Input.types';
-/**
- * Render the final JSX of Input
- */
-export declare const renderInput_unstable: (state: InputState) => JSX.Element;

package/lib/components/Input/useInput.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { InputProps, InputState } from './Input.types';
-/**
- * Create the state required to render Input.
- *
- * The returned state can be modified with hooks such as useInputStyles_unstable,
- * before being passed to renderInput_unstable.
- *
- * @param props - props from this instance of Input
- * @param ref - reference to `<input>` element of Input
- */
-export declare const useInput_unstable: (props: InputProps, ref: React.Ref<HTMLInputElement>) => InputState;

package/lib/components/Input/useInputStyles.d.ts

@@ -1,11 +0,0 @@
-import type { InputSlots, InputState } from './Input.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
-/**
- * @deprecated Use `inputClassNames.root` instead.
- */
-export declare const inputClassName = "fui-Input";
-export declare const inputClassNames: SlotClassNames<InputSlots>;
-/**
- * Apply styling to the Input slots based on the state
- */
-export declare const useInputStyles_unstable: (state: InputState) => InputState;

package/lib/index.d.ts

@@ -1,2 +0,0 @@
-export { Input, inputClassName, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable, } from './Input';
-export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';

package/lib-commonjs/Input.d.ts

@@ -1 +0,0 @@
-export * from './components/Input/index';

package/lib-commonjs/components/Input/Input.d.ts

@@ -1,6 +0,0 @@
-import type { InputProps } from './Input.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * The Input component allows people to enter and edit text.
- */
-export declare const Input: ForwardRefComponent<InputProps>;

package/lib-commonjs/components/Input/Input.types.d.ts

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-export declare type InputSlots = {
-    /**
-     * Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.
-     * (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)
-     *
-     * The root slot receives the `className` and `style` specified directly on the `<Input>`.
-     * All other top-level native props will be applied to the primary slot, `input`.
-     */
-    root: NonNullable<Slot<'span'>>;
-    /**
-     * The actual `<input>` element. `type="text"` will be automatically applied unless overridden.
-     *
-     * This is the "primary" slot, so native props specified directly on the `<Input>` will go here
-     * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will
-     * also go here.
-     */
-    input: NonNullable<Slot<'input'>>;
-    /** Element before the input text, within the input border */
-    contentBefore?: Slot<'span'>;
-    /** Element after the input text, within the input border */
-    contentAfter?: Slot<'span'>;
-};
-export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & {
-    /** Input can't have children. */
-    children?: never;
-    /**
-     * Size of the input (changes the font size and spacing).
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Controls the colors and borders of the input.
-     * @default 'outline'
-     */
-    appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
-    /**
-     * Default value of the input. Provide this if the input should be an uncontrolled component
-     * which tracks its current state internally; otherwise, use `value`.
-     *
-     * (This prop is mutually exclusive with `value`.)
-     */
-    defaultValue?: string;
-    /**
-     * Current value of the input. Provide this if the input is a controlled component where you
-     * are maintaining its current state; otherwise, use `defaultValue`.
-     *
-     * (This prop is mutually exclusive with `defaultValue`.)
-     */
-    value?: string;
-    /**
-     * Called when the user changes the input's value.
-     */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
-    /**
-     * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
-     * based on the type of value the user will enter.
-     *
-     * Note that no custom styling is currently applied for alternative types, and some types may
-     * activate browser-default styling which does not match the Fluent design language.
-     *
-     * (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an
-     * `<input>` element instead.)
-     * @default 'text'
-     */
-    type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'number' | 'time' | 'week';
-};
-/**
- * State used in rendering Input.
- */
-export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
-/**
- * Data passed to the `onChange` callback when a user changes the input's value.
- */
-export declare type InputOnChangeData = {
-    /** Updated input value from the user */
-    value: string;
-};

package/lib-commonjs/components/Input/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Input';
-export * from './Input.types';
-export * from './renderInput';
-export * from './useInput';
-export * from './useInputStyles';

package/lib-commonjs/components/Input/renderInput.d.ts

@@ -1,5 +0,0 @@
-import type { InputState } from './Input.types';
-/**
- * Render the final JSX of Input
- */
-export declare const renderInput_unstable: (state: InputState) => JSX.Element;

package/lib-commonjs/components/Input/useInput.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { InputProps, InputState } from './Input.types';
-/**
- * Create the state required to render Input.
- *
- * The returned state can be modified with hooks such as useInputStyles_unstable,
- * before being passed to renderInput_unstable.
- *
- * @param props - props from this instance of Input
- * @param ref - reference to `<input>` element of Input
- */
-export declare const useInput_unstable: (props: InputProps, ref: React.Ref<HTMLInputElement>) => InputState;