@fluentui/react-input 9.4.4 → 9.4.6

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

@@ -1,214 +0,0 @@
-define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_theme_1, react_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useInputStyles_unstable = exports.inputClassNames = void 0;
-    exports.inputClassNames = {
-        root: 'fui-Input',
-        input: 'fui-Input__input',
-        contentBefore: 'fui-Input__contentBefore',
-        contentAfter: 'fui-Input__contentAfter',
-    };
-    // TODO(sharing) should these be shared somewhere?
-    var fieldHeights = {
-        small: '24px',
-        medium: '32px',
-        large: '40px',
-    };
-    var useRootClassName = react_1.makeResetStyles(tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', alignItems: 'center', flexWrap: 'nowrap', gap: react_theme_1.tokens.spacingHorizontalXXS, borderRadius: react_theme_1.tokens.borderRadiusMedium, position: 'relative', boxSizing: 'border-box', 
-        // size: medium (default)
-        minHeight: fieldHeights.medium, padding: "0 " + react_theme_1.tokens.spacingHorizontalMNudge }, react_theme_1.typographyStyles.body1), { 
-        // appearance: outline (default)
-        backgroundColor: react_theme_1.tokens.colorNeutralBackground1, border: "1px solid " + react_theme_1.tokens.colorNeutralStroke1, borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible, 
-        // This is all for the bottom focus border.
-        // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
-        '::after': {
-            boxSizing: 'border-box',
-            content: '""',
-            position: 'absolute',
-            left: '-1px',
-            bottom: '-1px',
-            right: '-1px',
-            // Maintaining the correct corner radius:
-            // Use the whole border-radius as the height and only put radii on the bottom corners.
-            // (Otherwise the radius would be automatically reduced to fit available space.)
-            // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
-            height: "max(2px, " + react_theme_1.tokens.borderRadiusMedium + ")",
-            borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium,
-            borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium,
-            // Flat 2px border:
-            // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
-            // (This could be done without trimming using `background: linear-gradient(...)`, but using
-            // borderBottom makes it easier for people to override the color if needed.)
-            borderBottom: "2px solid " + react_theme_1.tokens.colorCompoundBrandStroke,
-            clipPath: 'inset(calc(100% - 2px) 0 0 0)',
-            // Animation for focus OUT
-            transform: 'scaleX(0)',
-            transitionProperty: 'transform',
-            transitionDuration: react_theme_1.tokens.durationUltraFast,
-            transitionDelay: react_theme_1.tokens.curveAccelerateMid,
-            '@media screen and (prefers-reduced-motion: reduce)': {
-                transitionDuration: '0.01ms',
-                transitionDelay: '0.01ms',
-            },
-        }, ':focus-within::after': {
-            // Animation for focus IN
-            transform: 'scaleX(1)',
-            transitionProperty: 'transform',
-            transitionDuration: react_theme_1.tokens.durationNormal,
-            transitionDelay: react_theme_1.tokens.curveDecelerateMid,
-            '@media screen and (prefers-reduced-motion: reduce)': {
-                transitionDuration: '0.01ms',
-                transitionDelay: '0.01ms',
-            },
-        }, ':focus-within:active::after': {
-            // This is if the user clicks the field again while it's already focused
-            borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
-        }, ':focus-within': {
-            outline: '2px solid transparent',
-        } }));
-    var useRootStyles = react_1.makeStyles({
-        small: tslib_1.__assign({ minHeight: fieldHeights.small, paddingLeft: react_theme_1.tokens.spacingHorizontalSNudge, paddingRight: react_theme_1.tokens.spacingHorizontalSNudge }, react_theme_1.typographyStyles.caption1),
-        medium: {
-        // included in rootBaseStyles
-        },
-        large: tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.large, paddingLeft: react_theme_1.tokens.spacingHorizontalM, paddingRight: react_theme_1.tokens.spacingHorizontalM }, react_theme_1.typographyStyles.body2), react_1.shorthands.gap(react_theme_1.tokens.spacingHorizontalSNudge)),
-        outline: {
-        // included in rootBaseStyles
-        },
-        outlineInteractive: {
-            ':hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
-            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
-            ':active,:focus-within': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }),
-        },
-        underline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderRadius(0)), { 
-            // border is specified in rootBaseStyles, but we only want a bottom border here
-            borderTopStyle: 'none', borderRightStyle: 'none', borderLeftStyle: 'none', 
-            // Make the focus underline (::after) match the width of the bottom border
-            '::after': {
-                left: 0,
-                right: 0,
-            } }),
-        underlineInteractive: {
-            ':hover': {
-                borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
-            },
-            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
-            ':active,:focus-within': {
-                borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
-            },
-            '::after': react_1.shorthands.borderRadius(0), // remove rounded corners from focus underline
-        },
-        filled: tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)),
-        filledInteractive: {
-            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
-            ':hover,:focus-within': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)),
-        },
-        invalid: {
-            ':not(:focus-within),:hover:not(:focus-within)': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteRedBorder2)),
-        },
-        'filled-darker': {
-            backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
-        },
-        'filled-lighter': {
-            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
-        },
-        'filled-darker-shadow': {
-            backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
-            boxShadow: react_theme_1.tokens.shadow2,
-        },
-        'filled-lighter-shadow': {
-            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
-            boxShadow: react_theme_1.tokens.shadow2,
-        },
-        disabled: tslib_1.__assign(tslib_1.__assign({ cursor: 'not-allowed', backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), 
-            // remove the focus border
-            '::after': {
-                content: 'unset',
-            }, 
-            // remove the focus outline
-            ':focus-within': {
-                outlineStyle: 'none',
-            } }),
-    });
-    var useInputClassName = react_1.makeResetStyles({
-        boxSizing: 'border-box',
-        flexGrow: 1,
-        minWidth: 0,
-        borderStyle: 'none',
-        padding: "0 " + react_theme_1.tokens.spacingHorizontalXXS,
-        color: react_theme_1.tokens.colorNeutralForeground1,
-        // Use literal "transparent" (not from the theme) to always let the color from the root show through
-        backgroundColor: 'transparent',
-        '::placeholder': {
-            color: react_theme_1.tokens.colorNeutralForeground4,
-            opacity: 1, // browser style override
-        },
-        outlineStyle: 'none',
-        // Inherit typography styles from root
-        fontFamily: 'inherit',
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        lineHeight: 'inherit',
-    });
-    var useInputElementStyles = react_1.makeStyles({
-        large: {
-            paddingLeft: react_theme_1.tokens.spacingHorizontalSNudge,
-            paddingRight: react_theme_1.tokens.spacingHorizontalSNudge,
-        },
-        disabled: {
-            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
-            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
-            cursor: 'not-allowed',
-            '::placeholder': {
-                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
-            },
-        },
-    });
-    var useContentClassName = react_1.makeResetStyles({
-        boxSizing: 'border-box',
-        color: react_theme_1.tokens.colorNeutralForeground3,
-        display: 'flex',
-        // special case styling for icons (most common case) to ensure they're centered vertically
-        // size: medium (default)
-        '> svg': { fontSize: '20px' },
-    });
-    var useContentStyles = react_1.makeStyles({
-        disabled: {
-            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
-        },
-        // Ensure resizable icons show up with the proper font size
-        small: {
-            '> svg': { fontSize: '16px' },
-        },
-        medium: {
-        // included in useContentClassName
-        },
-        large: {
-            '> svg': { fontSize: '24px' },
-        },
-    });
-    /**
-     * Apply styling to the Input slots based on the state
-     */
-    var useInputStyles_unstable = function (state) {
-        var size = state.size, appearance = state.appearance;
-        var disabled = state.input.disabled;
-        var invalid = "" + state.input['aria-invalid'] === 'true';
-        var filled = appearance.startsWith('filled');
-        var rootStyles = useRootStyles();
-        var inputStyles = useInputElementStyles();
-        var contentStyles = useContentStyles();
-        state.root.className = react_1.mergeClasses(exports.inputClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
-        state.input.className = react_1.mergeClasses(exports.inputClassNames.input, useInputClassName(), size === 'large' && inputStyles.large, disabled && inputStyles.disabled, state.input.className);
-        var contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];
-        if (state.contentBefore) {
-            state.contentBefore.className = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([exports.inputClassNames.contentBefore], contentClasses), [state.contentBefore.className]));
-        }
-        if (state.contentAfter) {
-            state.contentAfter.className = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([exports.inputClassNames.contentAfter], contentClasses), [state.contentAfter.className]));
-        }
-        return state;
-    };
-    exports.useInputStyles_unstable = useInputStyles_unstable;
-});
-//# sourceMappingURL=useInputStyles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useInputStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\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) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  gap: tokens.spacingHorizontalXXS,\n  borderRadius: tokens.borderRadiusMedium, // used for all but underline\n  position: 'relative',\n  boxSizing: 'border-box',\n\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  padding: `0 ${tokens.spacingHorizontalMNudge}`,\n  ...typographyStyles.body1,\n\n  // appearance: outline (default)\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\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    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    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\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    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\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    outline: '2px solid transparent',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    paddingLeft: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalM,\n    ...typographyStyles.body2,\n    ...shorthands.gap(tokens.spacingHorizontalSNudge),\n  },\n  outline: {\n    // included in rootBaseStyles\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    // border is specified in rootBaseStyles, but we only want a bottom border here\n    borderTopStyle: 'none',\n    borderRightStyle: 'none',\n    borderLeftStyle: 'none',\n    // Make the focus underline (::after) match the width of the bottom border\n    '::after': {\n      left: 0,\n      right: 0,\n    },\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    ...shorthands.borderColor(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  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow2,\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n    // remove the focus border\n    '::after': {\n      content: 'unset',\n    },\n    // remove the focus outline\n    ':focus-within': {\n      outlineStyle: 'none',\n    },\n  },\n});\n\nconst useInputClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  flexGrow: 1,\n  minWidth: 0, // required to make the input shrink to fit the wrapper\n  borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n  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\n  outlineStyle: 'none', // disable default browser outline\n\n  // Inherit typography styles from root\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  fontWeight: 'inherit',\n  lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n  large: {\n    paddingLeft: tokens.spacingHorizontalSNudge,\n    paddingRight: 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 useContentClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n  display: 'flex',\n  // special case styling for icons (most common case) to ensure they're centered vertically\n  // size: medium (default)\n  '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\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    // included in useContentClassName\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 invalid = `${state.input['aria-invalid']}` === 'true';\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    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    useInputClassName(),\n    size === 'large' && inputStyles.large,\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), 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"]}

package/lib-amd/components/InputField/InputField.js

@@ -1,10 +0,0 @@
-define(["require", "exports", "@fluentui/react-field", "../../Input"], function (require, exports, react_field_1, Input_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.InputField = exports.inputFieldClassNames = void 0;
-    /** @deprecated Use Field with Input: `<Field><Input /></Field>` */
-    exports.inputFieldClassNames = react_field_1.getDeprecatedFieldClassNames(Input_1.inputClassNames.root);
-    /** @deprecated Use Field with Input: `<Field><Input /></Field>` */
-    exports.InputField = react_field_1.makeDeprecatedField(Input_1.Input);
-});
-//# sourceMappingURL=InputField.js.map

package/lib-amd/components/InputField/InputField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/InputField/InputField.tsx"],"names":[],"mappings":";;;;IAOA,mEAAmE;IACtD,QAAA,oBAAoB,GAAG,0CAA4B,CAAC,uBAAe,CAAC,IAAI,CAAC,CAAC;IACvF,mEAAmE;IACtD,QAAA,UAAU,GAAyC,iCAAmB,CAAC,aAAK,CAAC,CAAC","sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input, inputClassNames, InputProps } from '../../Input';\n\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport type InputFieldProps = DeprecatedFieldProps<InputProps>;\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const inputFieldClassNames = getDeprecatedFieldClassNames(inputClassNames.root);\n/** @deprecated Use Field with Input: `<Field><Input /></Field>` */\nexport const InputField: ForwardRefComponent<InputFieldProps> = makeDeprecatedField(Input);\n"]}

package/lib-amd/components/InputField/index.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./InputField"], function (require, exports, tslib_1, InputField_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(InputField_1, exports);
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/components/InputField/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/InputField/index.ts"],"names":[],"mappings":";;;IAAA,4CAA6B","sourcesContent":["export * from './InputField';\n"]}

package/lib-amd/index.js

@@ -1,13 +0,0 @@
-define(["require", "exports", "./Input", "./InputField"], function (require, exports, Input_1, InputField_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.inputFieldClassNames = exports.InputField_unstable = exports.useInput_unstable = exports.useInputStyles_unstable = exports.renderInput_unstable = exports.inputClassNames = exports.Input = void 0;
-    Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
-    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; } });
-    Object.defineProperty(exports, "InputField_unstable", { enumerable: true, get: function () { return InputField_1.InputField; } });
-    Object.defineProperty(exports, "inputFieldClassNames", { enumerable: true, get: function () { return InputField_1.inputFieldClassNames; } });
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-input/src/index.ts"],"names":[],"mappings":";;;;IAAS,8FAAA,KAAK,OAAA;IAAE,wGAAA,eAAe,OAAA;IAAE,6GAAA,oBAAoB,OAAA;IAAE,gHAAA,uBAAuB,OAAA;IAAE,0GAAA,iBAAiB,OAAA;IAIxF,iHAAA,UAAU,OAAuB;IAAE,kHAAA,oBAAoB,OAAA","sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"]}