@fluentui/react-input - npm Package Compare versions

Comparing version 9.0.0-beta.5 to 9.0.0-beta.6

CHANGELOG.json

@@ -5,3 +5,74 @@ {
     {
-      "date": "Fri, 04 Mar 2022 05:15:51 GMT",
+      "date": "Tue, 19 Apr 2022 19:14:35 GMT",
+      "tag": "@fluentui/react-input_v9.0.0-beta.6",
+      "version": "9.0.0-beta.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "3651218a1e8069fd6fcb095ef5d30139f8c01ff4",
+            "comment": "Removing star exports."
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "43cb8a8072c6f9340296f080c725d2d6c9dfa325",
+            "comment": "Update onChange event type"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "3e9421d1cf1545a8ab9fce425f3695e62ac99d73",
+            "comment": "BREAKING CHANGE: Remove `inline` prop and use `display: inline-flex` by default"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "086a675fd0c648944ff4048450190a0a13467de3",
+            "comment": "Add static classnames to Input"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
+            "commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
+          }
+        ],
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
+            "comment": "Update React dev deps and hoist them to the repo root"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
+            "comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Mar 2022 05:17:37 GMT",
       "tag": "@fluentui/react-input_v9.0.0-beta.5",
@@ -8,0 +79,0 @@ "version": "9.0.0-beta.5",

CHANGELOG.md

 # Change Log - @fluentui/react-input
 
-This log was last generated on Fri, 04 Mar 2022 05:15:51 GMT and should not be manually modified.
+This log was last generated on Tue, 19 Apr 2022 19:14:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.6)
+
+Tue, 19 Apr 2022 19:14:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.5..@fluentui/react-input_v9.0.0-beta.6)
+
+### Changes
+
+- Removing star exports. ([PR #22140](https://github.com/microsoft/fluentui/pull/22140) by [e-mail])
+- Update onChange event type ([PR #22233](https://github.com/microsoft/fluentui/pull/22233) by [e-mail])
+- BREAKING CHANGE: Remove `inline` prop and use `display: inline-flex` by default ([PR #21935](https://github.com/microsoft/fluentui/pull/21935) by [e-mail])
+- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by [e-mail])
+- Add static classnames to Input ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by [e-mail])
+- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
+
 ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.5)
 
-Fri, 04 Mar 2022 05:15:51 GMT 
+Fri, 04 Mar 2022 05:17:37 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.4..@fluentui/react-input_v9.0.0-beta.5)
@@ -11,0 +27,0 @@

dist/react-input.d.ts

@@ -6,2 +6,3 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -13,4 +14,9 @@ /**
 
+/**
+ * @deprecated Use `inputClassNames.root` instead.
+ */
 export declare const inputClassName = "fui-Input";
 
+export declare const inputClassNames: SlotClassNames<InputSlots>;
+
 /**
@@ -33,7 +39,2 @@ * Data passed to the `onChange` callback when a user changes the input's value.
     /**
-     * If true, the input will have inline display, allowing it be used within text content.
-     * If false (the default), the input will have block display.
-     */
-    inline?: boolean;
-    /**
      * Controls the colors and borders of the input.
@@ -60,3 +61,3 @@ * @default 'outline'
      */
-    onChange?: (ev: React_2.FormEvent<HTMLInputElement>, data: InputOnChangeData) => void;
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
     /**
@@ -102,3 +103,3 @@ * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
  */
-export declare type InputState = Required<Pick<InputProps, 'appearance' | 'inline' | 'size'>> & ComponentState<InputSlots>;
+export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
 
@@ -105,0 +106,0 @@ /**

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

@@ -34,7 +34,2 @@ import * as React from 'react';
     /**
-     * If true, the input will have inline display, allowing it be used within text content.
-     * If false (the default), the input will have block display.
-     */
-    inline?: boolean;
-    /**
      * Controls the colors and borders of the input.
@@ -61,3 +56,3 @@ * @default 'outline'
      */
-    onChange?: (ev: React.FormEvent<HTMLInputElement>, data: InputOnChangeData) => void;
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
     /**
@@ -79,3 +74,3 @@ * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
  */
-export declare type InputState = Required<Pick<InputProps, 'appearance' | 'inline' | 'size'>> & ComponentState<InputSlots>;
+export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
 /**
@@ -82,0 +77,0 @@ * Data passed to the `onChange` callback when a user changes the input's value.

lib-commonjs/components/Input/useInput.js

@@ -24,3 +24,2 @@ "use strict";
     appearance = 'outline',
-    inline = false,
     onChange
@@ -41,3 +40,2 @@ } = props;
     appearance,
-    inline,
     components: {
@@ -44,0 +42,0 @@ root: 'span',

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

@@ -1,3 +0,8 @@
-import type { InputState } from './Input.types';
+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>;
 /**
@@ -4,0 +9,0 @@ * Apply styling to the Input slots based on the state

lib-commonjs/components/Input/useInputStyles.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.useInputStyles_unstable = exports.inputClassName = void 0;
+exports.useInputStyles_unstable = exports.inputClassNames = exports.inputClassName = void 0;
 
@@ -12,5 +12,15 @@ 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'; // TODO(sharing) use theme values once available
 
+exports.inputClassName = 'fui-Input';
+exports.inputClassNames = {
+  root: 'fui-Input',
+  input: 'fui-Input__input',
+  contentBefore: 'fui-Input__contentBefore',
+  contentAfter: 'fui-Input__contentAfter'
+}; // TODO(sharing) use theme values once available
+
 const horizontalSpacing = {
@@ -56,3 +66,3 @@ xxs: '2px',
   "base": {
-    "mc9l5x": "f22iagw",
+    "mc9l5x": "ftuwxu6",
     "Bt984gj": "f122n59",
@@ -126,5 +136,2 @@ "Eh141a": "flvyvdh",
   },
-  "inline": {
-    "mc9l5x": "ftuwxu6"
-  },
   "outline": {
@@ -225,3 +232,3 @@ "De3pzq": "fxugw4r",
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg: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;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".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;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp: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);}"],
+  "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;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg: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;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp: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": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv: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;}"],
@@ -287,5 +294,14 @@ "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);}"],
     "sj55zd": "f1s2aq7o"
+  },
+  "small": {
+    "kwki1k": "f3u2cy0"
+  },
+  "medium": {
+    "kwki1k": "f1oqplr0"
+  },
+  "large": {
+    "kwki1k": "fa420co"
   }
 }, {
-  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f3u2cy0>svg{font-size:16px;}", ".f1oqplr0>svg{font-size:20px;}", ".fa420co>svg{font-size:24px;}"]
 });
@@ -307,12 +323,12 @@ /**
   const contentStyles = useContentStyles();
-  state.root.className = react_1.mergeClasses(exports.inputClassName, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, state.inline && rootStyles.inline, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
-  state.input.className = react_1.mergeClasses(inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
-  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];
+  state.root.className = react_1.mergeClasses(exports.inputClassNames.root, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
+  state.input.className = react_1.mergeClasses(exports.inputClassNames.input, inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];
 
   if (state.contentBefore) {
-    state.contentBefore.className = react_1.mergeClasses(...contentClasses, state.contentBefore.className);
+    state.contentBefore.className = react_1.mergeClasses(exports.inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
   }
 
   if (state.contentAfter) {
-    state.contentAfter.className = react_1.mergeClasses(...contentClasses, state.contentAfter.className);
+    state.contentAfter.className = react_1.mergeClasses(exports.inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
   }
@@ -319,0 +335,0 @@

lib-commonjs/index.d.ts

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

lib-commonjs/index.js

@@ -6,6 +6,43 @@ "use strict";
 });
+exports.useInput_unstable = exports.useInputStyles_unstable = exports.renderInput_unstable = exports.inputClassNames = exports.inputClassName = exports.Input = void 0;
 
-const tslib_1 = /*#__PURE__*/require("tslib");
+var Input_1 = /*#__PURE__*/require("./Input");
 
-tslib_1.__exportStar(require("./Input"), exports);
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  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,
+  get: function () {
+    return Input_1.inputClassNames;
+  }
+});
+Object.defineProperty(exports, "renderInput_unstable", {
+  enumerable: true,
+  get: function () {
+    return Input_1.renderInput_unstable;
+  }
+});
+Object.defineProperty(exports, "useInputStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return Input_1.useInputStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useInput_unstable", {
+  enumerable: true,
+  get: function () {
+    return Input_1.useInput_unstable;
+  }
+});
 //# sourceMappingURL=index.js.map

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

@@ -34,7 +34,2 @@ import * as React from 'react';
     /**
-     * If true, the input will have inline display, allowing it be used within text content.
-     * If false (the default), the input will have block display.
-     */
-    inline?: boolean;
-    /**
      * Controls the colors and borders of the input.
@@ -61,3 +56,3 @@ * @default 'outline'
      */
-    onChange?: (ev: React.FormEvent<HTMLInputElement>, data: InputOnChangeData) => void;
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
     /**
@@ -79,3 +74,3 @@ * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
  */
-export declare type InputState = Required<Pick<InputProps, 'appearance' | 'inline' | 'size'>> & ComponentState<InputSlots>;
+export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
 /**
@@ -82,0 +77,0 @@ * Data passed to the `onChange` callback when a user changes the input's value.

lib/components/Input/useInput.js

@@ -16,3 +16,2 @@ import { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback } from '@fluentui/react-utilities';
     appearance = 'outline',
-    inline = false,
     onChange
@@ -33,3 +32,2 @@ } = props;
     appearance,
-    inline,
     components: {
@@ -36,0 +34,0 @@ root: 'span',

lib/components/Input/useInputStyles.d.ts

@@ -1,3 +0,8 @@
-import type { InputState } from './Input.types';
+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>;
 /**
@@ -4,0 +9,0 @@ * Apply styling to the Input slots based on the state

lib/components/Input/useInputStyles.js

 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-export const inputClassName = 'fui-Input'; // TODO(sharing) use theme values once available
+/**
+ * @deprecated Use `inputClassNames.root` instead.
+ */
 
+export const inputClassName = 'fui-Input';
+export const inputClassNames = {
+  root: 'fui-Input',
+  input: 'fui-Input__input',
+  contentBefore: 'fui-Input__contentBefore',
+  contentAfter: 'fui-Input__contentAfter'
+}; // TODO(sharing) use theme values once available
+
 const horizontalSpacing = {
@@ -45,3 +55,3 @@ xxs: '2px',
   "base": {
-    "mc9l5x": "f22iagw",
+    "mc9l5x": "ftuwxu6",
     "Bt984gj": "f122n59",
@@ -115,5 +125,2 @@ "Eh141a": "flvyvdh",
   },
-  "inline": {
-    "mc9l5x": "ftuwxu6"
-  },
   "outline": {
@@ -214,3 +221,3 @@ "De3pzq": "fxugw4r",
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg: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;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".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;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp: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);}"],
+  "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;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg: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;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp: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": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv: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;}"],
@@ -276,5 +283,14 @@ "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);}"],
     "sj55zd": "f1s2aq7o"
+  },
+  "small": {
+    "kwki1k": "f3u2cy0"
+  },
+  "medium": {
+    "kwki1k": "f1oqplr0"
+  },
+  "large": {
+    "kwki1k": "fa420co"
   }
 }, {
-  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f3u2cy0>svg{font-size:16px;}", ".f1oqplr0>svg{font-size:20px;}", ".fa420co>svg{font-size:24px;}"]
 });
@@ -296,12 +312,12 @@ /**
   const contentStyles = useContentStyles();
-  state.root.className = mergeClasses(inputClassName, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, state.inline && rootStyles.inline, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
-  state.input.className = mergeClasses(inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
-  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];
+  state.root.className = mergeClasses(inputClassNames.root, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className);
+  state.input.className = mergeClasses(inputClassNames.input, inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];
 
   if (state.contentBefore) {
-    state.contentBefore.className = mergeClasses(...contentClasses, state.contentBefore.className);
+    state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
   }
 
   if (state.contentAfter) {
-    state.contentAfter.className = mergeClasses(...contentClasses, state.contentAfter.className);
+    state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
   }
@@ -308,0 +324,0 @@

lib/index.d.ts

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

lib/index.js

@@ -1,2 +0,3 @@
-export * from './Input';
+export { Input, // eslint-disable-next-line deprecation/deprecation
+inputClassName, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@fluentui/react-input",
-  "version": "9.0.0-beta.5",
+  "version": "9.0.0-beta.6",
   "description": "Fluent UI React Input component",
@@ -31,19 +31,9 @@ "main": "lib-commonjs/index.js",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.3",
-    "@fluentui/scripts": "^1.0.0",
-    "@types/enzyme": "3.10.3",
-    "@types/enzyme-adapter-react-16": "1.0.3",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
-    "@types/react-test-renderer": "^16.0.0",
-    "enzyme": "~3.10.0",
-    "enzyme-adapter-react-16": "^1.15.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
+    "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-theme": "9.0.0-rc.4",
-    "@fluentui/react-utilities": "9.0.0-rc.5",
-    "@griffel/react": "1.0.0",
+    "@fluentui/react-theme": "9.0.0-rc.5",
+    "@fluentui/react-utilities": "9.0.0-rc.6",
+    "@griffel/react": "1.0.3",
     "tslib": "^2.1.0"
@@ -50,0 +40,0 @@ },

Spec-styling.md

@@ -31,10 +31,10 @@ # `@fluentui/react-input`: Styling implementation notes
 
-| Style                         | Application                    | small               | medium           | large         |
-| ----------------------------- | ------------------------------ | ------------------- | ---------------- | ------------- |
-| height                        | root `minHeight`               | 24px                | 32px             | 40px          |
-| left/right padding            | root                           | sNudge              | mNudge           | m             |
-| left/right padding in content | input                          | xxs                 | xxs              | sNudge        |
-| content size                  | root, input (doesn't inherit)  | caption1 (base.200) | body1 (base.300) | base.400      |
-| ~~"icon" size~~               | n/a (icons not built in)       | ~~16Regular~~       | ~~20Regular~~    | ~~24Regular~~ |
-| spacing within root           | root `display: flex`, flex gap | xxs                 | xxs              | sNudge        |
+| Style                         | Application                    | small               | medium           | large     |
+| ----------------------------- | ------------------------------ | ------------------- | ---------------- | --------- |
+| height                        | root `minHeight`               | 24px                | 32px             | 40px      |
+| left/right padding            | root                           | sNudge              | mNudge           | m         |
+| left/right padding in content | input                          | xxs                 | xxs              | sNudge    |
+| content size                  | root, input (doesn't inherit)  | caption1 (base.200) | body1 (base.300) | base.400  |
+| "icon" size                   | contentBefore/after `> svg`    | 16Regular           | 20Regular        | 24Regular |
+| spacing within root           | root `display: flex`, flex gap | xxs                 | xxs              | sNudge    |
 
@@ -41,0 +41,0 @@ ## Appearance colors and strokes

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

214623

increased by4.38%

Dev dependency count

4

decreased by-71.43%

Lines of code

2574

increased by5.58%

Dependency changes

• + Added@emotion/hash@0.9.2(transitive)

• + Added@fluentui/react-theme@9.0.0-rc.5(transitive)

• + Added@fluentui/react-utilities@9.0.0-rc.6(transitive)

• + Added@griffel/core@1.18.2(transitive)

• + Added@griffel/react@1.0.3(transitive)

• + Added@griffel/style-types@1.3.0(transitive)

• - Removed@emotion/hash@0.8.0(transitive)

• - Removed@fluentui/react-theme@9.0.0-rc.4(transitive)

• - Removed@fluentui/react-utilities@9.0.0-rc.5(transitive)

• - Removed@griffel/core@1.0.7(transitive)

• - Removed@griffel/react@1.0.0(transitive)

• - Removedcsstype@2.6.21(transitive)

• Updated@fluentui/react-theme@9.0.0-rc.5

• Updated@fluentui/react-utilities@9.0.0-rc.6

• Updated@griffel/react@1.0.3