@fluentui/react-input 0.0.0-nightlyca6ef2bc8e20220105.1

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderInput = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of Input
+ */
+
+
+const renderInput = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state, ['input', 'contentBefore', 'contentAfter', 'root']);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, React.createElement(slots.contentBefore, { ...slotProps.contentBefore
+  }), React.createElement(slots.input, { ...slotProps.input
+  }), React.createElement(slots.contentAfter, { ...slotProps.contentAfter
+  }));
+};
+
+exports.renderInput = renderInput;
+//# sourceMappingURL=renderInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Input/renderInput.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,WAAW,GAAI,KAAD,IAAsB;AAC/C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,EAA4B,CAAC,OAAD,EAAU,eAAV,EAA2B,cAA3B,EAA2C,MAA3C,CAA5B,CAA7B;AACA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;AAAf,GAApB,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAFF,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAnB,CAHF,CADF;AAOD,CATM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX","sourceRoot":""}

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

@@ -0,0 +1,12 @@
+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,
+ * before being passed to renderInput.
+ *
+ * @param props - props from this instance of Input
+ * @param ref - reference to `<input>` element of Input
+ */
+export declare const useInput: (props: InputProps, ref: React.Ref<HTMLInputElement>) => InputState;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInput = void 0;
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Create the state required to render Input.
+ *
+ * The returned state can be modified with hooks such as useInputStyles,
+ * before being passed to renderInput.
+ *
+ * @param props - props from this instance of Input
+ * @param ref - reference to `<input>` element of Input
+ */
+
+
+const useInput = (props, ref) => {
+  const {
+    size = 'medium',
+    appearance = 'outline',
+    inline = false,
+    onChange
+  } = props;
+  const [value, setValue] = react_utilities_1.useControllableState({
+    state: props.value,
+    defaultState: props.defaultValue,
+    initialState: undefined
+  });
+  const nativeProps = react_utilities_1.getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue']
+  });
+  const state = {
+    size,
+    appearance,
+    inline,
+    components: {
+      root: 'span',
+      input: 'input',
+      contentBefore: 'span',
+      contentAfter: 'span'
+    },
+    input: react_utilities_1.resolveShorthand(props.input, {
+      required: true,
+      defaultProps: {
+        type: 'text',
+        ref,
+        ...nativeProps.primary
+      }
+    }),
+    contentAfter: react_utilities_1.resolveShorthand(props.contentAfter),
+    contentBefore: react_utilities_1.resolveShorthand(props.contentBefore),
+    root: react_utilities_1.resolveShorthand(props.root, {
+      required: true,
+      defaultProps: nativeProps.root
+    })
+  };
+  state.input.value = value;
+  state.input.onChange = react_utilities_1.useEventCallback(ev => {
+    const newValue = ev.target.value;
+    onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+      value: newValue
+    });
+    setValue(newValue);
+  });
+  return state;
+};
+
+exports.useInput = useInput;
+//# sourceMappingURL=useInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Input/useInput.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAQA;;;;;;;;AAQG;;;AACI,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AAC1F,QAAM;AAAE,IAAA,IAAI,GAAG,QAAT;AAAmB,IAAA,UAAU,GAAG,SAAhC;AAA2C,IAAA,MAAM,GAAG,KAApD;AAA2D,IAAA;AAA3D,MAAwE,KAA9E;AAEA,QAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;AAC7C,IAAA,KAAK,EAAE,KAAK,CAAC,KADgC;AAE7C,IAAA,YAAY,EAAE,KAAK,CAAC,YAFyB;AAG7C,IAAA,YAAY,EAAE;AAH+B,GAArB,CAA1B;AAMA,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;AAHyB,GAA1B,CAApB;AAMA,QAAM,KAAK,GAAe;AACxB,IAAA,IADwB;AAExB,IAAA,UAFwB;AAGxB,IAAA,MAHwB;AAIxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,aAAa,EAAE,MAHL;AAIV,MAAA,YAAY,EAAE;AAJJ,KAJY;AAUxB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;AACnC,MAAA,QAAQ,EAAE,IADyB;AAEnC,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE,MADM;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC;AAHH;AAFqB,KAA9B,CAViB;AAkBxB,IAAA,YAAY,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,YAAvB,CAlBU;AAmBxB,IAAA,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,CAnBS;AAoBxB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE,WAAW,CAAC;AAFO,KAA7B;AApBkB,GAA1B;AA0BA,EAAA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;AAC3C,UAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;AACA,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,MAAA,KAAK,EAAE;AAAT,KAAP,CAAR;AACA,IAAA,QAAQ,CAAC,QAAD,CAAR;AACD,GAJsB,CAAvB;AAMA,SAAO,KAAP;AACD,CAjDM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","sourceRoot":""}

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

@@ -0,0 +1,6 @@
+import type { InputState } from './Input.types';
+export declare const inputClassName = "fui-Input";
+/**
+ * Apply styling to the Input slots based on the state
+ */
+export declare const useInputStyles: (state: InputState) => InputState;

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

@@ -0,0 +1,306 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInputStyles = exports.inputClassName = void 0;
+
+const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+exports.inputClassName = 'fui-Input'; // 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: theme => ({
+    fontSize: theme.fontSizeBase300,
+    lineHeight: theme.lineHeightBase300
+  }),
+  caption1: theme => ({
+    fontSize: theme.fontSizeBase200,
+    lineHeight: theme.lineHeightBase200
+  }),
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  400: theme => ({
+    fontSize: theme.fontSizeBase400,
+    lineHeight: theme.lineHeightBase400
+  })
+}; // TODO(sharing) should these be shared somewhere?
+
+const fieldHeights = {
+  small: '24px',
+  medium: '32px',
+  large: '40px'
+};
+
+const useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {
+    "mc9l5x": "f22iagw",
+    "Bt984gj": "f122n59",
+    "Eh141a": "flvyvdh",
+    "i8kkvl": "f16mnhsx",
+    "Belr9w4": "fbi42co",
+    "Bahqtrf": "fk6fouc",
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "qhf8xq": "f10pi13n",
+    "B7ck84d": "f1ewtqcl"
+  },
+  "interactive": {
+    "oqd9ik": "ffdc0f3",
+    "Bs6t6z0": "fqc6z8f",
+    "Hdbjpj": "f11ef69",
+    "jc51t6": ["f383sj6", "fpmdmpy"],
+    "Bj55yzk": "fqmzrrm",
+    "cnmfks": ["fpmdmpy", "f383sj6"],
+    "mpb1vu": "f1iv82i4",
+    "B9nohqn": ["f1j2a01o", "fvxed1z"],
+    "frdscb": ["fvxed1z", "f1j2a01o"],
+    "B3zxwmv": "f1gw3il9",
+    "J4s2b0": "fd0py6g",
+    "Bk8j60v": "f1ta67ae",
+    "B5pt6m4": "fabrkco",
+    "xn0juu": "f1lmmjng",
+    "wbfbqe": "fopw4to",
+    "mafdb0": "f1dw3w9y",
+    "s1xtto": "f1n2ytmg",
+    "Hbcoss": "fnqdfvx",
+    "lq1u8j": "fbqc2tv",
+    "B37x0ls": "fvvig05",
+    "H8rp7s": "f1nwpqpa",
+    "uvoyur": "f1e6xsgv"
+  },
+  "small": {
+    "sshi5w": "f1pha7fy",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
+    "Be2twd7": "fy9rknc",
+    "Bg96gwp": "fwrc4pm"
+  },
+  "medium": {
+    "sshi5w": "f1nxs5xn",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f81rol6", "frdkuqy"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["frdkuqy", "f81rol6"],
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "large": {
+    "sshi5w": "f1w5jphr",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f11qrl6u", "fjlbh76"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["fjlbh76", "f11qrl6u"],
+    "Be2twd7": "fod5ikn",
+    "Bg96gwp": "faaz57k",
+    "i8kkvl": "fgfbwa2",
+    "Belr9w4": "f1y3hx6l"
+  },
+  "inline": {
+    "mc9l5x": "ftuwxu6"
+  },
+  "outline": {
+    "De3pzq": "fxugw4r",
+    "B4j52fo": "f5ogflp",
+    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
+    "Bn0qgzm": "f1f09k3d",
+    "ibv6hh": ["finvdd3", "f1hqa2wf"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "g2u3we": "fj3muxo",
+    "h3c5rm": ["f1akhkt", "f1lxtadh"],
+    "B9xav0g": "f1c1zstj",
+    "zhjwy3": ["f1lxtadh", "f1akhkt"]
+  },
+  "outlineInteractive": {
+    "Bgoe8wy": "fvcxoqz",
+    "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
+    "oetu4i": "f1l4zc64",
+    "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
+    "Drbcw7": "f8vnjqi",
+    "udz0bu": ["fz1etlk", "f1hc16gm"],
+    "Be8ivqh": "f1klwx88",
+    "ofdepl": ["f1hc16gm", "fz1etlk"]
+  },
+  "underline": {
+    "De3pzq": "f1c21dwh",
+    "Bbmb7ep": ["f1krrbdw", "f1deotkl"],
+    "Beyfa6y": ["f1deotkl", "f1krrbdw"],
+    "B7oj6ja": ["f10ostut", "f1ozlkrg"],
+    "Btl43ni": ["f1ozlkrg", "f10ostut"],
+    "Bn0qgzm": "f1f09k3d",
+    "oivjwe": "fg706s2",
+    "B9xav0g": "f1c1zstj"
+  },
+  "underlineInteractive": {
+    "oetu4i": "f1l4zc64",
+    "Be8ivqh": "f1klwx88",
+    "frdscb": ["fqvcdsd", "f9cg6ix"],
+    "B9nohqn": ["f9cg6ix", "fqvcdsd"],
+    "B1dhsta": ["f1pvm60u", "f179ivkp"],
+    "Bjdmjzx": ["f179ivkp", "f1pvm60u"]
+  },
+  "filled": {
+    "E5pizo": "fyed02w",
+    "B4j52fo": "f5ogflp",
+    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
+    "Bn0qgzm": "f1f09k3d",
+    "ibv6hh": ["finvdd3", "f1hqa2wf"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"]
+  },
+  "filledInteractive": {
+    "q7v0qe": "ftmjh5b",
+    "kmh5ft": ["f17blpuu", "fsrcdbj"],
+    "nagaa4": "f1tpwn32",
+    "B1yhkcb": ["fsrcdbj", "f17blpuu"]
+  },
+  "filledDarker": {
+    "De3pzq": "f16xq7d1"
+  },
+  "filledLighter": {
+    "De3pzq": "fxugw4r"
+  },
+  "disabled": {
+    "Bceei9c": "fdrzuqr",
+    "B4j52fo": "f5ogflp",
+    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
+    "Bn0qgzm": "f1f09k3d",
+    "ibv6hh": ["finvdd3", "f1hqa2wf"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "g2u3we": "f1jj8ep1",
+    "h3c5rm": ["f15xbau", "fy0fskl"],
+    "B9xav0g": "f4ikngz",
+    "zhjwy3": ["fy0fskl", "f15xbau"],
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"]
+  }
+}, {
+  "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:-webkit-max(2px, var(--borderRadiusMedium));height:-moz-max(2px, var(--borderRadiusMedium));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);}"],
+  "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);}"],
+  "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);}"]
+});
+
+const useInputElementStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {
+    "B7ck84d": "f1ewtqcl",
+    "Bh6795r": "fqerorx",
+    "icvyot": "f1ern45e",
+    "vrafjx": ["f1n71otn", "f1deefiw"],
+    "oivjwe": "f1h8hb77",
+    "wvpqe5": ["f1deefiw", "f1n71otn"],
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f12huiiw", "f161knb0"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f161knb0", "f12huiiw"],
+    "sj55zd": "f19n0e5",
+    "De3pzq": "f3rmtva",
+    "yvdlaj": "fwyc1cq",
+    "B3o7kgh": "f13ta7ih",
+    "B486eqv": "f2hkw1w"
+  },
+  "small": {
+    "Be2twd7": "fy9rknc",
+    "Bg96gwp": "fwrc4pm"
+  },
+  "medium": {
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "large": {
+    "Be2twd7": "fod5ikn",
+    "Bg96gwp": "faaz57k",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"]
+  },
+  "disabled": {
+    "sj55zd": "f1s2aq7o",
+    "De3pzq": "f1c21dwh",
+    "Bceei9c": "fdrzuqr",
+    "yvdlaj": "fahhnxm"
+  }
+}, {
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".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);}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+});
+
+const useContentStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {
+    "B7ck84d": "f1ewtqcl",
+    "sj55zd": "f11d4kpn",
+    "clhimo": "fyuhxbn"
+  },
+  "disabled": {
+    "sj55zd": "f1s2aq7o"
+  }
+}, {
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fyuhxbn>svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
+});
+/**
+ * Apply styling to the Input slots based on the state
+ */
+
+
+const useInputStyles = state => {
+  const {
+    size,
+    appearance
+  } = state;
+  const disabled = state.input.disabled;
+  const filled = appearance.startsWith('filled');
+  const rootStyles = useRootStyles();
+  const inputStyles = useInputElementStyles();
+  const contentStyles = useContentStyles();
+  state.root.className = react_make_styles_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_make_styles_1.mergeClasses(inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];
+
+  if (state.contentBefore) {
+    state.contentBefore.className = react_make_styles_1.mergeClasses(...contentClasses, state.contentBefore.className);
+  }
+
+  if (state.contentAfter) {
+    state.contentAfter.className = react_make_styles_1.mergeClasses(...contentClasses, state.contentAfter.className);
+  }
+
+  return state;
+};
+
+exports.useInputStyles = useInputStyles;
+//# sourceMappingURL=useInputStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}

package/lib-commonjs/index.d.ts

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

package/lib-commonjs/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./Input"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@fluentui/react-input",
+  "version": "0.0.0-nightlyca6ef2bc8e20220105.1",
+  "description": "Fluent UI React Input component",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
+    "clean": "just-scripts clean",
+    "code-style": "just-scripts code-style",
+    "just": "just-scripts",
+    "lint": "just-scripts lint",
+    "start": "yarn storybook",
+    "test": "jest --passWithNoTests",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-input/src && yarn docs",
+    "build-storybook": "just-scripts storybook:build",
+    "storybook": "start-storybook",
+    "type-check": "tsc -b tsconfig.json"
+  },
+  "devDependencies": {
+    "@fluentui/babel-make-styles": "0.0.0-nightlyca6ef2bc8e20220105.1",
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/jest-serializer-make-styles": "0.0.0-nightlyca6ef2bc8e20220105.1",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-make-styles": "0.0.0-nightlyca6ef2bc8e20220105.1",
+    "@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"
+  },
+  "dependencies": {
+    "@fluentui/react-make-styles": "0.0.0-nightlyca6ef2bc8e20220105.1",
+    "@fluentui/react-utilities": "0.0.0-nightlyca6ef2bc8e20220105.1",
+    "tslib": "^2.1.0"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8.0 <18.0.0",
+    "@types/react-dom": ">=16.8.0 <18.0.0",
+    "react": ">=16.8.0 <18.0.0",
+    "react-dom": ">=16.8.0 <18.0.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "minor",
+      "patch"
+    ]
+  }
+}