@fluentui/react-slider 9.1.3 → 9.1.5

package/lib-amd/components/Slider/useSliderStyles.js

@@ -1,185 +0,0 @@
-define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabster", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_tabster_1, react_theme_1) {
-    "use strict";
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useSliderStyles_unstable = exports.sliderCSSVars = exports.sliderClassNames = void 0;
-    exports.sliderClassNames = {
-        root: 'fui-Slider',
-        rail: 'fui-Slider__rail',
-        thumb: 'fui-Slider__thumb',
-        input: 'fui-Slider__input',
-    };
-    // Internal CSS variables
-    var thumbSizeVar = "--fui-Slider__thumb--size";
-    var railSizeVar = "--fui-Slider__rail--size";
-    var railColorVar = "--fui-Slider__rail--color";
-    var progressColorVar = "--fui-Slider__progress--color";
-    var thumbColorVar = "--fui-Slider__thumb--color";
-    exports.sliderCSSVars = {
-        sliderDirectionVar: "--fui-Slider--direction",
-        sliderProgressVar: "--fui-Slider--progress",
-        sliderStepsPercentVar: "--fui-Slider--steps-percent",
-    };
-    var sliderDirectionVar = exports.sliderCSSVars.sliderDirectionVar, sliderStepsPercentVar = exports.sliderCSSVars.sliderStepsPercentVar, sliderProgressVar = exports.sliderCSSVars.sliderProgressVar;
-    /**
-     * Styles for the root slot
-     */
-    var useRootStyles = react_1.makeStyles({
-        root: {
-            position: 'relative',
-            display: 'inline-grid',
-            touchAction: 'none',
-            alignItems: 'center',
-            justifyItems: 'center',
-        },
-        small: (_a = {},
-            _a[thumbSizeVar] = '16px',
-            _a[railSizeVar] = '2px',
-            _a.minHeight = '24px',
-            _a),
-        medium: (_b = {},
-            _b[thumbSizeVar] = '20px',
-            _b[railSizeVar] = '4px',
-            _b.minHeight = '32px',
-            _b),
-        horizontal: {
-            minWidth: '120px',
-            // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
-            gridTemplateRows: "1fr var(" + thumbSizeVar + ") 1fr",
-            gridTemplateColumns: "1fr calc(100% - var(" + thumbSizeVar + ")) 1fr",
-        },
-        vertical: {
-            minHeight: '120px',
-            // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
-            gridTemplateRows: "1fr calc(100% - var(" + thumbSizeVar + ")) 1fr",
-            gridTemplateColumns: "1fr var(" + thumbSizeVar + ") 1fr",
-        },
-        enabled: (_c = {},
-            _c[railColorVar] = react_theme_1.tokens.colorNeutralStrokeAccessible,
-            _c[progressColorVar] = react_theme_1.tokens.colorCompoundBrandBackground,
-            _c[thumbColorVar] = react_theme_1.tokens.colorCompoundBrandBackground,
-            _c[':hover'] = (_d = {},
-                _d[thumbColorVar] = react_theme_1.tokens.colorCompoundBrandBackgroundHover,
-                _d[progressColorVar] = react_theme_1.tokens.colorCompoundBrandBackgroundHover,
-                _d),
-            _c[':active'] = (_e = {},
-                _e[thumbColorVar] = react_theme_1.tokens.colorCompoundBrandBackgroundPressed,
-                _e[progressColorVar] = react_theme_1.tokens.colorCompoundBrandBackgroundPressed,
-                _e),
-            _c['@media (forced-colors: active)'] = (_f = {},
-                _f[railColorVar] = 'CanvasText',
-                _f[thumbColorVar] = 'Highlight',
-                _f[progressColorVar] = 'Highlight',
-                _f[':hover'] = (_g = {},
-                    _g[thumbColorVar] = 'Highlight',
-                    _g[progressColorVar] = 'Highlight',
-                    _g),
-                _f),
-            _c),
-        disabled: (_h = {},
-            _h[thumbColorVar] = react_theme_1.tokens.colorNeutralForegroundDisabled,
-            _h[railColorVar] = react_theme_1.tokens.colorNeutralBackgroundDisabled,
-            _h[progressColorVar] = react_theme_1.tokens.colorNeutralForegroundDisabled,
-            _h['@media (forced-colors: active)'] = (_j = {},
-                _j[railColorVar] = 'GrayText',
-                _j[thumbColorVar] = 'GrayText',
-                _j[progressColorVar] = 'GrayText',
-                _j),
-            _h),
-        focusIndicatorHorizontal: react_tabster_1.createFocusOutlineStyle({
-            selector: 'focus-within',
-            style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '8px', right: '8px' } },
-        }),
-        focusIndicatorVertical: react_tabster_1.createFocusOutlineStyle({
-            selector: 'focus-within',
-            style: { outlineOffset: { top: '6px', bottom: '6px', left: '4px', right: '4px' } },
-        }),
-    });
-    /**
-     * Styles for the rail slot
-     */
-    var useRailStyles = react_1.makeStyles({
-        rail: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusXLarge)), { pointerEvents: 'none', gridRowStart: '2', gridRowEnd: '2', gridColumnStart: '2', gridColumnEnd: '2', position: 'relative', forcedColorAdjust: 'none', 
-            // Background gradient represents the progress of the slider
-            backgroundImage: "linear-gradient(\n      var(" + sliderDirectionVar + "),\n      var(" + progressColorVar + ") 0%,\n      var(" + progressColorVar + ") var(" + sliderProgressVar + "),\n      var(" + railColorVar + ") var(" + sliderProgressVar + ")\n    )", outlineWidth: '1px', outlineStyle: 'solid', outlineColor: react_theme_1.tokens.colorTransparentStroke, '::before': {
-                content: "''",
-                position: 'absolute',
-                // Repeating gradient represents the steps if provided
-                backgroundImage: "repeating-linear-gradient(\n        var(" + sliderDirectionVar + "),\n        #0000 0%,\n        #0000 calc(var(" + sliderStepsPercentVar + ") - 1px),\n        " + react_theme_1.tokens.colorNeutralBackground1 + " calc(var(" + sliderStepsPercentVar + ") - 1px),\n        " + react_theme_1.tokens.colorNeutralBackground1 + " var(" + sliderStepsPercentVar + ")\n      )",
-                // force steps to use HighlightText for high contrast mode
-                '@media (forced-colors: active)': {
-                    backgroundImage: "repeating-linear-gradient(\n          var(" + sliderDirectionVar + "),\n          #0000 0%,\n          #0000 calc(var(" + sliderStepsPercentVar + ") - 1px),\n          HighlightText calc(var(" + sliderStepsPercentVar + ") - 1px),\n          HighlightText var(" + sliderStepsPercentVar + ")\n        )",
-                },
-            } }),
-        horizontal: {
-            width: '100%',
-            height: "var(" + railSizeVar + ")",
-            '::before': {
-                left: '-1px',
-                right: '-1px',
-                height: "var(" + railSizeVar + ")",
-            },
-        },
-        vertical: {
-            width: "var(" + railSizeVar + ")",
-            height: '100%',
-            '::before': {
-                width: "var(" + railSizeVar + ")",
-                top: '-1px',
-                bottom: '1px',
-            },
-        },
-    });
-    /**
-     * Styles for the thumb slot
-     */
-    var useThumbStyles = react_1.makeStyles({
-        thumb: tslib_1.__assign(tslib_1.__assign({ gridRowStart: '2', gridRowEnd: '2', gridColumnStart: '2', gridColumnEnd: '2', position: 'absolute', width: "var(" + thumbSizeVar + ")", height: "var(" + thumbSizeVar + ")", pointerEvents: 'none', outlineStyle: 'none', forcedColorAdjust: 'none' }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { boxShadow: "0 0 0 calc(var(" + thumbSizeVar + ") * .2) " + react_theme_1.tokens.colorNeutralBackground1 + " inset", backgroundColor: "var(" + thumbColorVar + ")", '::before': tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ position: 'absolute', top: '0px', left: '0px', bottom: '0px', right: '0px' }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { boxSizing: 'border-box', content: "''" }), react_1.shorthands.border("calc(var(" + thumbSizeVar + ") * .05)", 'solid', react_theme_1.tokens.colorNeutralStroke1)) }),
-        disabled: {
-            '::before': tslib_1.__assign({}, react_1.shorthands.border("calc(var(" + thumbSizeVar + ") * .05)", 'solid', react_theme_1.tokens.colorNeutralForegroundDisabled)),
-        },
-        horizontal: {
-            transform: 'translateX(-50%)',
-            left: "var(" + sliderProgressVar + ")",
-        },
-        vertical: {
-            transform: 'translateY(50%)',
-            bottom: "var(" + sliderProgressVar + ")",
-        },
-    });
-    /**
-     * Styles for the Input slot
-     */
-    var useInputStyles = react_1.makeStyles({
-        input: tslib_1.__assign(tslib_1.__assign({ cursor: 'pointer', opacity: 0, gridRowStart: '1', gridRowEnd: '-1', gridColumnStart: '1', gridColumnEnd: '-1' }, react_1.shorthands.padding(0)), react_1.shorthands.margin(0)),
-        disabled: {
-            cursor: 'default',
-        },
-        horizontal: {
-            height: "var(" + thumbSizeVar + ")",
-            width: '100%',
-        },
-        vertical: {
-            height: '100%',
-            width: "var(" + thumbSizeVar + ")",
-            '-webkit-appearance': 'slider-vertical',
-        },
-    });
-    /**
-     * Apply styling to the Slider slots based on the state
-     */
-    var useSliderStyles_unstable = function (state) {
-        var rootStyles = useRootStyles();
-        var railStyles = useRailStyles();
-        var thumbStyles = useThumbStyles();
-        var inputStyles = useInputStyles();
-        var isVertical = state.vertical;
-        state.root.className = react_1.mergeClasses(exports.sliderClassNames.root, rootStyles.root, isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal, rootStyles[state.size], isVertical ? rootStyles.vertical : rootStyles.horizontal, state.disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
-        state.rail.className = react_1.mergeClasses(exports.sliderClassNames.rail, railStyles.rail, isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
-        state.thumb.className = react_1.mergeClasses(exports.sliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.disabled && thumbStyles.disabled, state.thumb.className);
-        state.input.className = react_1.mergeClasses(exports.sliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.disabled && inputStyles.disabled, state.input.className);
-        return state;
-    };
-    exports.useSliderStyles_unstable = useSliderStyles_unstable;
-});
-//# sourceMappingURL=useSliderStyles.js.map

package/lib-amd/components/Slider/useSliderStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSliderStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SliderState, SliderSlots } from './Slider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const sliderClassNames: SlotClassNames<SliderSlots> = {\n  root: 'fui-Slider',\n  rail: 'fui-Slider__rail',\n  thumb: 'fui-Slider__thumb',\n  input: 'fui-Slider__input',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\nconst railSizeVar = `--fui-Slider__rail--size`;\nconst railColorVar = `--fui-Slider__rail--color`;\nconst progressColorVar = `--fui-Slider__progress--color`;\nconst thumbColorVar = `--fui-Slider__thumb--color`;\n\nexport const sliderCSSVars = {\n  sliderDirectionVar: `--fui-Slider--direction`,\n  sliderProgressVar: `--fui-Slider--progress`,\n  sliderStepsPercentVar: `--fui-Slider--steps-percent`,\n};\n\nconst { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    position: 'relative',\n    display: 'inline-grid',\n    touchAction: 'none',\n    alignItems: 'center',\n    justifyItems: 'center',\n  },\n\n  small: {\n    [thumbSizeVar]: '16px',\n    [railSizeVar]: '2px',\n    minHeight: '24px',\n  },\n\n  medium: {\n    [thumbSizeVar]: '20px',\n    [railSizeVar]: '4px',\n    minHeight: '32px',\n  },\n\n  horizontal: {\n    minWidth: '120px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr var(${thumbSizeVar}) 1fr`,\n    gridTemplateColumns: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n  },\n\n  vertical: {\n    minHeight: '120px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,\n    gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`,\n  },\n\n  enabled: {\n    [railColorVar]: tokens.colorNeutralStrokeAccessible,\n    [progressColorVar]: tokens.colorCompoundBrandBackground,\n    [thumbColorVar]: tokens.colorCompoundBrandBackground,\n    ':hover': {\n      [thumbColorVar]: tokens.colorCompoundBrandBackgroundHover,\n      [progressColorVar]: tokens.colorCompoundBrandBackgroundHover,\n    },\n    ':active': {\n      [thumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n      [progressColorVar]: tokens.colorCompoundBrandBackgroundPressed,\n    },\n    '@media (forced-colors: active)': {\n      [railColorVar]: 'CanvasText',\n      [thumbColorVar]: 'Highlight',\n      [progressColorVar]: 'Highlight',\n      ':hover': {\n        [thumbColorVar]: 'Highlight',\n        [progressColorVar]: 'Highlight',\n      },\n    },\n  },\n\n  disabled: {\n    [thumbColorVar]: tokens.colorNeutralForegroundDisabled,\n    [railColorVar]: tokens.colorNeutralBackgroundDisabled,\n    [progressColorVar]: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      [railColorVar]: 'GrayText',\n      [thumbColorVar]: 'GrayText',\n      [progressColorVar]: 'GrayText',\n    },\n  },\n\n  focusIndicatorHorizontal: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '8px', right: '8px' } },\n  }),\n\n  focusIndicatorVertical: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: { outlineOffset: { top: '6px', bottom: '6px', left: '4px', right: '4px' } },\n  }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: {\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n    pointerEvents: 'none',\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    // Background gradient represents the progress of the slider\n    backgroundImage: `linear-gradient(\n      var(${sliderDirectionVar}),\n      var(${progressColorVar}) 0%,\n      var(${progressColorVar}) var(${sliderProgressVar}),\n      var(${railColorVar}) var(${sliderProgressVar})\n    )`,\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    '::before': {\n      content: \"''\",\n      position: 'absolute',\n      // Repeating gradient represents the steps if provided\n      backgroundImage: `repeating-linear-gradient(\n        var(${sliderDirectionVar}),\n        #0000 0%,\n        #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n        ${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),\n        ${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})\n      )`,\n      // force steps to use HighlightText for high contrast mode\n      '@media (forced-colors: active)': {\n        backgroundImage: `repeating-linear-gradient(\n          var(${sliderDirectionVar}),\n          #0000 0%,\n          #0000 calc(var(${sliderStepsPercentVar}) - 1px),\n          HighlightText calc(var(${sliderStepsPercentVar}) - 1px),\n          HighlightText var(${sliderStepsPercentVar})\n        )`,\n      },\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${railSizeVar})`,\n    '::before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${railSizeVar})`,\n    height: '100%',\n    '::before': {\n      width: `var(${railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'absolute',\n    width: `var(${thumbSizeVar})`,\n    height: `var(${thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,\n    backgroundColor: `var(${thumbColorVar})`,\n    '::before': {\n      position: 'absolute',\n      top: '0px',\n      left: '0px',\n      bottom: '0px',\n      right: '0px',\n      ...shorthands.borderRadius(tokens.borderRadiusCircular),\n      boxSizing: 'border-box',\n      content: \"''\",\n      ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralStroke1),\n    },\n  },\n  disabled: {\n    '::before': {\n      ...shorthands.border(`calc(var(${thumbSizeVar}) * .05)`, 'solid', tokens.colorNeutralForegroundDisabled),\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${sliderProgressVar})`,\n  },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    cursor: 'pointer',\n    opacity: 0,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n    gridColumnStart: '1',\n    gridColumnEnd: '-1',\n    ...shorthands.padding(0),\n    ...shorthands.margin(0),\n  },\n  disabled: {\n    cursor: 'default',\n  },\n  horizontal: {\n    height: `var(${thumbSizeVar})`,\n    width: '100%',\n  },\n  vertical: {\n    height: '100%',\n    width: `var(${thumbSizeVar})`,\n    '-webkit-appearance': 'slider-vertical',\n  },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles_unstable = (state: SliderState): SliderState => {\n  const rootStyles = useRootStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const isVertical = state.vertical;\n\n  state.root.className = mergeClasses(\n    sliderClassNames.root,\n    rootStyles.root,\n    isVertical ? rootStyles.focusIndicatorVertical : rootStyles.focusIndicatorHorizontal,\n    rootStyles[state.size!],\n    isVertical ? rootStyles.vertical : rootStyles.horizontal,\n    state.disabled ? rootStyles.disabled : rootStyles.enabled,\n    state.root.className,\n  );\n\n  state.rail.className = mergeClasses(\n    sliderClassNames.rail,\n    railStyles.rail,\n    isVertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    sliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.disabled && thumbStyles.disabled,\n    state.thumb.className,\n  );\n\n  state.input.className = mergeClasses(\n    sliderClassNames.input,\n    inputStyles.input,\n    isVertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  return state;\n};\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"SliderField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-slider/src/components/SliderField/SliderField.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 { Slider, sliderClassNames, SliderProps } from '../../Slider';\n\n/** @deprecated Use Field with Slider: `<Field><Slider /></Field>` */\nexport type SliderFieldProps = DeprecatedFieldProps<SliderProps>;\n/** @deprecated Use Field with Slider: `<Field><Slider /></Field>` */\nexport const sliderFieldClassNames = getDeprecatedFieldClassNames(sliderClassNames.root);\n/** @deprecated Use Field with Slider: `<Field><Slider /></Field>` */\nexport const SliderField: ForwardRefComponent<SliderFieldProps> = makeDeprecatedField(Slider);\n"]}

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

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

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

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

package/lib-amd/index.js

@@ -1,15 +0,0 @@
-define(["require", "exports", "./Slider", "./SliderField"], function (require, exports, Slider_1, SliderField_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.sliderFieldClassNames = exports.SliderField_unstable = exports.useSlider_unstable = exports.useSliderStyles_unstable = exports.useSliderState_unstable = exports.sliderCSSVars = exports.sliderClassNames = exports.renderSlider_unstable = exports.Slider = void 0;
-    Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
-    Object.defineProperty(exports, "renderSlider_unstable", { enumerable: true, get: function () { return Slider_1.renderSlider_unstable; } });
-    Object.defineProperty(exports, "sliderClassNames", { enumerable: true, get: function () { return Slider_1.sliderClassNames; } });
-    Object.defineProperty(exports, "sliderCSSVars", { enumerable: true, get: function () { return Slider_1.sliderCSSVars; } });
-    Object.defineProperty(exports, "useSliderState_unstable", { enumerable: true, get: function () { return Slider_1.useSliderState_unstable; } });
-    Object.defineProperty(exports, "useSliderStyles_unstable", { enumerable: true, get: function () { return Slider_1.useSliderStyles_unstable; } });
-    Object.defineProperty(exports, "useSlider_unstable", { enumerable: true, get: function () { return Slider_1.useSlider_unstable; } });
-    Object.defineProperty(exports, "SliderField_unstable", { enumerable: true, get: function () { return SliderField_1.SliderField; } });
-    Object.defineProperty(exports, "sliderFieldClassNames", { enumerable: true, get: function () { return SliderField_1.sliderFieldClassNames; } });
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-slider/src/index.ts"],"names":[],"mappings":";;;;IACE,gGAAA,MAAM,OAAA;IACN,+GAAA,qBAAqB,OAAA;IACrB,0GAAA,gBAAgB,OAAA;IAChB,uGAAA,aAAa,OAAA;IACb,iHAAA,uBAAuB,OAAA;IACvB,kHAAA,wBAAwB,OAAA;IACxB,4GAAA,kBAAkB,OAAA;IAKX,mHAAA,WAAW,OAAwB;IAAE,oHAAA,qBAAqB,OAAA","sourcesContent":["export {\n  Slider,\n  renderSlider_unstable,\n  sliderClassNames,\n  sliderCSSVars,\n  useSliderState_unstable,\n  useSliderStyles_unstable,\n  useSlider_unstable,\n} from './Slider';\nexport type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { SliderField as SliderField_unstable, sliderFieldClassNames } from './SliderField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SliderFieldProps as SliderFieldProps_unstable } from './SliderField';\n"]}