@fluentui/react-textarea 9.3.4 → 9.3.6

package/lib-amd/components/Textarea/useTextareaStyles.js

@@ -1,131 +0,0 @@
-define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
-    "use strict";
-    var _a;
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useTextareaStyles_unstable = exports.textareaClassNames = void 0;
-    exports.textareaClassNames = {
-        root: 'fui-Textarea',
-        textarea: 'fui-Textarea__textarea',
-    };
-    var textareaHeight = {
-        small: '24px',
-        medium: '32px',
-        large: '40px',
-    };
-    /**
-     * Styles for the root(wrapper) slot
-     */
-    var useRootStyles = react_1.makeStyles({
-        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', boxSizing: 'border-box', position: 'relative' }, react_1.shorthands.padding('0', '0', react_theme_1.tokens.strokeWidthThick, '0')), react_1.shorthands.margin('0')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)),
-        disabled: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStrokeDisabled)), (_a = {}, _a["& > textarea"] = {
-            cursor: 'not-allowed',
-            '::placeholder': {
-                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
-            },
-        }, _a['@media (forced-colors: active)'] = tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), _a)),
-        interactive: {
-            // 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': tslib_1.__assign(tslib_1.__assign({ 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(" + react_theme_1.tokens.strokeWidthThick + ", " + react_theme_1.tokens.borderRadiusMedium + ")", borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium, borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium }, react_1.shorthands.borderBottom(react_theme_1.tokens.strokeWidthThick, 'solid', react_theme_1.tokens.colorCompoundBrandStroke)), { clipPath: "inset(calc(100% - " + react_theme_1.tokens.strokeWidthThick + ") 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': {
-                outlineWidth: react_theme_1.tokens.strokeWidthThick,
-                outlineStyle: 'solid',
-                outlineColor: 'transparent',
-            },
-        },
-        filled: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorTransparentStroke)), { ':hover,:focus-within': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)) }),
-        'filled-darker': {
-            backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
-        },
-        'filled-lighter': {
-            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
-        },
-        'filled-darker-shadow': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground3 }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorTransparentStrokeInteractive)), { boxShadow: react_theme_1.tokens.shadow2 }),
-        'filled-lighter-shadow': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorTransparentStrokeInteractive)), { boxShadow: react_theme_1.tokens.shadow2 }),
-        outline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
-        outlineInteractive: {
-            ':hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
-            ':active': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }),
-            ':focus-within': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorCompoundBrandStroke }),
-        },
-        invalid: {
-            ':not(:focus-within),:hover:not(:focus-within)': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteRedBorder2)),
-        },
-    });
-    /**
-     * Styles for the textarea slot
-     */
-    var useTextareaStyles = react_1.makeStyles({
-        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderStyle('none')), react_1.shorthands.margin('0')), { backgroundColor: 'transparent', boxSizing: 'border-box', color: react_theme_1.tokens.colorNeutralForeground1, flexGrow: 1, fontFamily: react_theme_1.tokens.fontFamilyBase, height: '100%', maxHeight: '100%', '::placeholder': {
-                color: react_theme_1.tokens.colorNeutralForeground4,
-                opacity: 1,
-            }, '::selection': {
-                color: react_theme_1.tokens.colorNeutralForegroundInverted,
-                backgroundColor: react_theme_1.tokens.colorNeutralBackgroundInverted,
-            }, outlineStyle: 'none' }),
-        // The padding style adds both content and regular padding (from design spec), this is because the handle is not
-        // affected by changing the padding of the root.
-        small: tslib_1.__assign(tslib_1.__assign({ height: textareaHeight.small, minHeight: '40px' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalXS, "calc(" + react_theme_1.tokens.spacingHorizontalSNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")), react_theme_1.typographyStyles.caption1),
-        medium: tslib_1.__assign(tslib_1.__assign({ height: textareaHeight.medium, minHeight: '52px' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalSNudge, "calc(" + react_theme_1.tokens.spacingHorizontalMNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")), react_theme_1.typographyStyles.body1),
-        large: tslib_1.__assign(tslib_1.__assign({ height: textareaHeight.large, minHeight: '64px' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, "calc(" + react_theme_1.tokens.spacingHorizontalM + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")")), react_theme_1.typographyStyles.body2),
-    });
-    /**
-     * Styles for the textarea's resize property
-     */
-    var useTextareaResizeStyles = react_1.makeStyles({
-        none: {
-            resize: 'none',
-        },
-        both: {
-            resize: 'both',
-        },
-        horizontal: {
-            resize: 'horizontal',
-        },
-        vertical: {
-            resize: 'vertical',
-        },
-    });
-    /**
-     * Apply styling to the Textarea slots based on the state
-     */
-    var useTextareaStyles_unstable = function (state) {
-        var size = state.size, appearance = state.appearance, resize = state.resize;
-        var disabled = state.textarea.disabled;
-        var invalid = "" + state.textarea['aria-invalid'] === 'true';
-        var filled = appearance.startsWith('filled');
-        var rootStyles = useRootStyles();
-        state.root.className = react_1.mergeClasses(exports.textareaClassNames.root, rootStyles.base, rootStyles[appearance], filled && rootStyles.filled, disabled && rootStyles.disabled, !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);
-        var textareaStyles = useTextareaStyles();
-        var textareaResizeStyles = useTextareaResizeStyles();
-        state.textarea.className = react_1.mergeClasses(exports.textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], state.textarea.className);
-        return state;
-    };
-    exports.useTextareaStyles_unstable = useTextareaStyles_unstable;
-});
-//# sourceMappingURL=useTextareaStyles.js.map

package/lib-amd/components/Textarea/useTextareaStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTextareaStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n  root: 'fui-Textarea',\n  textarea: 'fui-Textarea__textarea',\n};\n\nconst textareaHeight = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    position: 'relative',\n    // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n    ...shorthands.padding('0', '0', tokens.strokeWidthThick, '0'),\n    ...shorthands.margin('0'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled),\n    [`& > textarea`]: {\n      cursor: 'not-allowed',\n      '::placeholder': {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 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      outlineWidth: tokens.strokeWidthThick,\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n\n  filled: {\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n    ':hover,:focus-within': {\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\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    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),\n    boxShadow: tokens.shadow2,\n  },\n\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    ':focus-within': {\n      ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorCompoundBrandStroke,\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n  base: {\n    ...shorthands.borderStyle('none'),\n    ...shorthands.margin('0'),\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    flexGrow: 1,\n    fontFamily: tokens.fontFamilyBase,\n    height: '100%',\n    maxHeight: '100%',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n\n    '::selection': {\n      color: tokens.colorNeutralForegroundInverted,\n      backgroundColor: tokens.colorNeutralBackgroundInverted,\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n\n  // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n  // affected by changing the padding of the root.\n  small: {\n    height: textareaHeight.small,\n    minHeight: '40px',\n    ...shorthands.padding(\n      tokens.spacingVerticalXS,\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: textareaHeight.medium,\n    minHeight: '52px',\n    ...shorthands.padding(\n      tokens.spacingVerticalSNudge,\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: textareaHeight.large,\n    minHeight: '64px',\n    ...shorthands.padding(\n      tokens.spacingVerticalS,\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n    ),\n    ...typographyStyles.body2,\n  },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n  none: {\n    resize: 'none',\n  },\n  both: {\n    resize: 'both',\n  },\n  horizontal: {\n    resize: 'horizontal',\n  },\n  vertical: {\n    resize: 'vertical',\n  },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n  const { size, appearance, resize } = state;\n  const disabled = state.textarea.disabled;\n  const invalid = `${state.textarea['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    textareaClassNames.root,\n    rootStyles.base,\n    rootStyles[appearance],\n    filled && rootStyles.filled,\n    disabled && rootStyles.disabled,\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    state.root.className,\n  );\n\n  const textareaStyles = useTextareaStyles();\n  const textareaResizeStyles = useTextareaResizeStyles();\n  state.textarea.className = mergeClasses(\n    textareaClassNames.textarea,\n    textareaStyles.base,\n    textareaStyles[size],\n    textareaResizeStyles[resize],\n    state.textarea.className,\n  );\n\n  return state;\n};\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"TextareaField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-textarea/src/components/TextareaField/TextareaField.tsx"],"names":[],"mappings":";;;;IAOA,yEAAyE;IAC5D,QAAA,uBAAuB,GAAG,0CAA4B,CAAC,6BAAkB,CAAC,IAAI,CAAC,CAAC;IAC7F,yEAAyE;IAC5D,QAAA,aAAa,GAA4C,iCAAmB,CAAC,mBAAQ,CAAC,CAAC","sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Textarea, textareaClassNames, TextareaProps } from '../../Textarea';\n\n/** @deprecated Use Field with Textarea: `<Field><Textarea /></Field>` */\nexport type TextareaFieldProps = DeprecatedFieldProps<TextareaProps>;\n/** @deprecated Use Field with Textarea: `<Field><Textarea /></Field>` */\nexport const textareaFieldClassNames = getDeprecatedFieldClassNames(textareaClassNames.root);\n/** @deprecated Use Field with Textarea: `<Field><Textarea /></Field>` */\nexport const TextareaField: ForwardRefComponent<TextareaFieldProps> = makeDeprecatedField(Textarea);\n"]}

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

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

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

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

package/lib-amd/index.js

@@ -1,13 +0,0 @@
-define(["require", "exports", "./Textarea", "./TextareaField"], function (require, exports, Textarea_1, TextareaField_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.textareaFieldClassNames = exports.TextareaField_unstable = exports.useTextarea_unstable = exports.useTextareaStyles_unstable = exports.textareaClassNames = exports.renderTextarea_unstable = exports.Textarea = void 0;
-    Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return Textarea_1.Textarea; } });
-    Object.defineProperty(exports, "renderTextarea_unstable", { enumerable: true, get: function () { return Textarea_1.renderTextarea_unstable; } });
-    Object.defineProperty(exports, "textareaClassNames", { enumerable: true, get: function () { return Textarea_1.textareaClassNames; } });
-    Object.defineProperty(exports, "useTextareaStyles_unstable", { enumerable: true, get: function () { return Textarea_1.useTextareaStyles_unstable; } });
-    Object.defineProperty(exports, "useTextarea_unstable", { enumerable: true, get: function () { return Textarea_1.useTextarea_unstable; } });
-    Object.defineProperty(exports, "TextareaField_unstable", { enumerable: true, get: function () { return TextareaField_1.TextareaField; } });
-    Object.defineProperty(exports, "textareaFieldClassNames", { enumerable: true, get: function () { return TextareaField_1.textareaFieldClassNames; } });
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-textarea/src/index.ts"],"names":[],"mappings":";;;;IACE,oGAAA,QAAQ,OAAA;IACR,mHAAA,uBAAuB,OAAA;IACvB,8GAAA,kBAAkB,OAAA;IAClB,sHAAA,0BAA0B,OAAA;IAC1B,gHAAA,oBAAoB,OAAA;IAKb,uHAAA,aAAa,OAA0B;IAAE,wHAAA,uBAAuB,OAAA","sourcesContent":["export {\n  Textarea,\n  renderTextarea_unstable,\n  textareaClassNames,\n  useTextareaStyles_unstable,\n  useTextarea_unstable,\n} from './Textarea';\nexport type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { TextareaField as TextareaField_unstable, textareaFieldClassNames } from './TextareaField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { TextareaFieldProps as TextareaFieldProps_unstable } from './TextareaField';\n"]}