@fluentui/react-select 9.1.4 → 9.1.6

package/lib-amd/components/Select/useSelectStyles.js

@@ -1,154 +0,0 @@
-define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useSelectStyles_unstable = exports.selectClassNames = void 0;
-    exports.selectClassNames = {
-        root: 'fui-Select',
-        select: 'fui-Select__select',
-        icon: 'fui-Select__icon',
-    };
-    var iconSizes = {
-        small: '16px',
-        medium: '20px',
-        large: '24px',
-    };
-    //TODO: Should fieldHeights be a set of global design tokens or constants?
-    var fieldHeights = {
-        small: '24px',
-        medium: '32px',
-        large: '40px',
-    };
-    /* Since the <select> element must span the full width and cannot have children,
-     * the right padding needs to be calculated from the sum of the following:
-     * 1. Field padding-right
-     * 2. Icon width
-     * 3. Content-icon spacing
-     * 4. Content inner padding
-     */
-    var paddingRight = {
-        small: "calc(" + react_theme_1.tokens.spacingHorizontalSNudge + "\n    + " + iconSizes.small + "\n    + " + react_theme_1.tokens.spacingHorizontalXXS + "\n    + " + react_theme_1.tokens.spacingHorizontalXXS + ")",
-        medium: "calc(" + react_theme_1.tokens.spacingHorizontalMNudge + "\n    + " + iconSizes.medium + "\n    + " + react_theme_1.tokens.spacingHorizontalXXS + "\n    + " + react_theme_1.tokens.spacingHorizontalXXS + ")",
-        large: "calc(" + react_theme_1.tokens.spacingHorizontalM + "\n    + " + iconSizes.large + "\n    + " + react_theme_1.tokens.spacingHorizontalSNudge + "\n    + " + react_theme_1.tokens.spacingHorizontalSNudge + ")",
-    };
-    /* Left padding is calculated from the outer padding + inner content padding values
-     * since <select> can't have additional child content or custom inner layout */
-    var paddingLeft = {
-        small: "calc(" + react_theme_1.tokens.spacingHorizontalSNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")",
-        medium: "calc(" + react_theme_1.tokens.spacingHorizontalMNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")",
-        large: "calc(" + react_theme_1.tokens.spacingHorizontalM + " + " + react_theme_1.tokens.spacingHorizontalSNudge + ")",
-    };
-    /* end of shared values */
-    var useRootStyles = react_1.makeStyles({
-        base: {
-            alignItems: 'center',
-            boxSizing: 'border-box',
-            display: 'flex',
-            flexWrap: 'nowrap',
-            fontFamily: react_theme_1.tokens.fontFamilyBase,
-            position: 'relative',
-            '&::after': tslib_1.__assign(tslib_1.__assign({ backgroundImage: "linear-gradient(\n        0deg,\n        " + react_theme_1.tokens.colorCompoundBrandStroke + " 0%,\n        " + react_theme_1.tokens.colorCompoundBrandStroke + " 50%,\n        transparent 50%,\n        transparent 100%\n      )" }, react_1.shorthands.borderRadius(0, 0, react_theme_1.tokens.borderRadiusMedium, react_theme_1.tokens.borderRadiusMedium)), { boxSizing: 'border-box', content: '""', height: react_theme_1.tokens.borderRadiusMedium, position: 'absolute', bottom: '0', left: '0', right: '0', 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': {
-                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',
-                },
-            },
-        },
-    });
-    var useSelectStyles = react_1.makeStyles({
-        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ appearance: 'none' }, react_1.shorthands.border('1px', 'solid', 'transparent')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { boxShadow: 'none', boxSizing: 'border-box', color: react_theme_1.tokens.colorNeutralForeground1, cursor: 'pointer', flexGrow: 1, maxWidth: '100%', paddingBottom: 0, paddingTop: 0, ':focus': {
-                outlineWidth: '2px',
-                outlineStyle: 'solid',
-                outlineColor: 'transparent',
-            } }),
-        disabled: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
-        disabledUnderline: tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeDisabled, react_theme_1.tokens.colorTransparentStrokeDisabled, react_theme_1.tokens.colorNeutralStrokeDisabled)),
-        small: tslib_1.__assign({ height: fieldHeights.small, paddingLeft: paddingLeft.small, paddingRight: paddingRight.small }, react_theme_1.typographyStyles.caption1),
-        medium: tslib_1.__assign({ height: fieldHeights.medium, paddingLeft: paddingLeft.medium, paddingRight: paddingRight.medium }, react_theme_1.typographyStyles.body1),
-        large: tslib_1.__assign({ height: fieldHeights.large, paddingLeft: paddingLeft.large, paddingRight: paddingRight.large }, react_theme_1.typographyStyles.body2),
-        outline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
-        outlineInteractive: {
-            '&:hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
-            '&:active': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
-        },
-        underline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderBottom('1px', 'solid', react_theme_1.tokens.colorNeutralStrokeAccessible)), react_1.shorthands.borderRadius(0)),
-        'filled-lighter': {
-            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
-        },
-        'filled-darker': {
-            backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
-        },
-        invalid: {
-            ':not(:focus-within),:hover:not(:focus-within)': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteRedBorder2)),
-        },
-        invalidUnderline: {
-            ':not(:focus-within),:hover:not(:focus-within)': {
-                borderBottomColor: react_theme_1.tokens.colorPaletteRedBorder2,
-            },
-        },
-    });
-    var useIconStyles = react_1.makeStyles({
-        icon: {
-            boxSizing: 'border-box',
-            color: react_theme_1.tokens.colorNeutralStrokeAccessible,
-            display: 'block',
-            position: 'absolute',
-            pointerEvents: 'none',
-            // the SVG must have display: block for accurate positioning
-            // otherwise an extra inline space is inserted after the svg element
-            '& svg': {
-                display: 'block',
-            },
-        },
-        disabled: {
-            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
-            '@media (forced-colors: active)': {
-                color: 'GrayText',
-            },
-        },
-        small: {
-            fontSize: iconSizes.small,
-            height: iconSizes.small,
-            right: react_theme_1.tokens.spacingHorizontalSNudge,
-            width: iconSizes.small,
-        },
-        medium: {
-            fontSize: iconSizes.medium,
-            height: iconSizes.medium,
-            right: react_theme_1.tokens.spacingHorizontalMNudge,
-            width: iconSizes.medium,
-        },
-        large: {
-            fontSize: iconSizes.large,
-            height: iconSizes.large,
-            right: react_theme_1.tokens.spacingHorizontalM,
-            width: iconSizes.large,
-        },
-    });
-    /**
-     * Apply styling to the Select slots based on the state
-     */
-    var useSelectStyles_unstable = function (state) {
-        var size = state.size, appearance = state.appearance;
-        var disabled = state.select.disabled;
-        var invalid = "" + state.select['aria-invalid'] === 'true';
-        var iconStyles = useIconStyles();
-        var rootStyles = useRootStyles();
-        var selectStyles = useSelectStyles();
-        state.root.className = react_1.mergeClasses(exports.selectClassNames.root, rootStyles.base, state.root.className);
-        state.select.className = react_1.mergeClasses(exports.selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
-        if (state.icon) {
-            state.icon.className = react_1.mergeClasses(exports.selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
-        }
-        return state;
-    };
-    exports.useSelectStyles_unstable = useSelectStyles_unstable;
-});
-//# sourceMappingURL=useSelectStyles.js.map

package/lib-amd/components/Select/useSelectStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSelectStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/useSelectStyles.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 { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n  root: 'fui-Select',\n  select: 'fui-Select__select',\n  icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n  small: `calc(${tokens.spacingHorizontalSNudge}\n    + ${iconSizes.small}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge}\n    + ${iconSizes.medium}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM}\n    + ${iconSizes.large}\n    + ${tokens.spacingHorizontalSNudge}\n    + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n  small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexWrap: 'nowrap',\n    fontFamily: tokens.fontFamilyBase,\n    position: 'relative',\n\n    '&::after': {\n      backgroundImage: `linear-gradient(\n        0deg,\n        ${tokens.colorCompoundBrandStroke} 0%,\n        ${tokens.colorCompoundBrandStroke} 50%,\n        transparent 50%,\n        transparent 100%\n      )`,\n      ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      content: '\"\"',\n      height: tokens.borderRadiusMedium,\n      position: 'absolute',\n      bottom: '0',\n      left: '0',\n      right: '0',\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\n    '&:focus-within::after': {\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  },\n});\n\nconst useSelectStyles = makeStyles({\n  base: {\n    appearance: 'none',\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    cursor: 'pointer',\n    flexGrow: 1,\n    maxWidth: '100%',\n    paddingBottom: 0,\n    paddingTop: 0,\n\n    ':focus': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n  disabledUnderline: {\n    ...shorthands.borderColor(\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorNeutralStrokeDisabled,\n    ),\n  },\n\n  small: {\n    height: fieldHeights.small,\n    paddingLeft: paddingLeft.small,\n    paddingRight: paddingRight.small,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: fieldHeights.medium,\n    paddingLeft: paddingLeft.medium,\n    paddingRight: paddingRight.medium,\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: fieldHeights.large,\n    paddingLeft: paddingLeft.large,\n    paddingRight: paddingRight.large,\n    ...typographyStyles.body2,\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    position: 'absolute',\n    pointerEvents: 'none',\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n  small: {\n    fontSize: iconSizes.small,\n    height: iconSizes.small,\n    right: tokens.spacingHorizontalSNudge,\n    width: iconSizes.small,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    height: iconSizes.medium,\n    right: tokens.spacingHorizontalMNudge,\n    width: iconSizes.medium,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    height: iconSizes.large,\n    right: tokens.spacingHorizontalM,\n    width: iconSizes.large,\n  },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n  const { size, appearance } = state;\n  const disabled = state.select.disabled;\n  const invalid = `${state.select['aria-invalid']}` === 'true';\n\n  const iconStyles = useIconStyles();\n  const rootStyles = useRootStyles();\n  const selectStyles = useSelectStyles();\n\n  state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n  state.select.className = mergeClasses(\n    selectClassNames.select,\n    selectStyles.base,\n    selectStyles[size],\n    selectStyles[appearance],\n    !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n    !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n    !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n    disabled && selectStyles.disabled,\n    disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n    state.select.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      selectClassNames.icon,\n      iconStyles.icon,\n      disabled && iconStyles.disabled,\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/SelectField/SelectField.tsx"],"names":[],"mappings":";;;;IAOA,qEAAqE;IACxD,QAAA,qBAAqB,GAAG,0CAA4B,CAAC,yBAAgB,CAAC,IAAI,CAAC,CAAC;IACzF,qEAAqE;IACxD,QAAA,WAAW,GAA0C,iCAAmB,CAAC,eAAM,CAAC,CAAC","sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Select, selectClassNames, SelectProps } from '../../Select';\n\n/** @deprecated Use Field with Select: `<Field><Select /></Field>` */\nexport type SelectFieldProps = DeprecatedFieldProps<SelectProps>;\n/** @deprecated Use Field with Select: `<Field><Select /></Field>` */\nexport const selectFieldClassNames = getDeprecatedFieldClassNames(selectClassNames.root);\n/** @deprecated Use Field with Select: `<Field><Select /></Field>` */\nexport const SelectField: ForwardRefComponent<SelectFieldProps> = makeDeprecatedField(Select);\n"]}

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

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

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

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

package/lib-amd/index.js

@@ -1,13 +0,0 @@
-define(["require", "exports", "./Select", "./SelectField"], function (require, exports, Select_1, SelectField_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.selectFieldClassNames = exports.SelectField_unstable = exports.useSelect_unstable = exports.useSelectStyles_unstable = exports.renderSelect_unstable = exports.selectClassNames = exports.Select = void 0;
-    Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
-    Object.defineProperty(exports, "selectClassNames", { enumerable: true, get: function () { return Select_1.selectClassNames; } });
-    Object.defineProperty(exports, "renderSelect_unstable", { enumerable: true, get: function () { return Select_1.renderSelect_unstable; } });
-    Object.defineProperty(exports, "useSelectStyles_unstable", { enumerable: true, get: function () { return Select_1.useSelectStyles_unstable; } });
-    Object.defineProperty(exports, "useSelect_unstable", { enumerable: true, get: function () { return Select_1.useSelect_unstable; } });
-    Object.defineProperty(exports, "SelectField_unstable", { enumerable: true, get: function () { return SelectField_1.SelectField; } });
-    Object.defineProperty(exports, "selectFieldClassNames", { enumerable: true, get: function () { return SelectField_1.selectFieldClassNames; } });
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-select/src/index.ts"],"names":[],"mappings":";;;;IACE,gGAAA,MAAM,OAAA;IACN,0GAAA,gBAAgB,OAAA;IAChB,+GAAA,qBAAqB,OAAA;IACrB,kHAAA,wBAAwB,OAAA;IACxB,4GAAA,kBAAkB,OAAA;IAKX,mHAAA,WAAW,OAAwB;IAAE,oHAAA,qBAAqB,OAAA","sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { SelectField as SelectField_unstable, selectFieldClassNames } from './SelectField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SelectFieldProps as SelectFieldProps_unstable } from './SelectField';\n"]}